body {

    width: 100%;

    min-height: 100vh;

    box-sizing: border-box;

   font-family: sans-serif;

    

    

}

 label{

	font-size:20px;

	color:#fff;

}

input {

    margin-bottom: 10px;

    padding: 5px;

    border: 1px solid #ccc;

}

.w-48{

    width:48% !important;

}

.container {

    position: relative;

    min-height: 100vh;

    max-width: 100% !important;

    background-color: #1d484d;

    overflow: hidden;

    display: grid;

    place-items: center;

}



.container::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    background: #00bcd4;

    /* transform: scale(0.5) translate(-100%, -100%); */

    /* transform: translateX(4em); */

    /* transform: scale(2, 0.5); */



    animation: move-up6 2s ease-in infinite alternate-reverse;

    

}



.container::after {

    content: "";

    position: absolute;

    vertical-align: bottom;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    background: #347a83b3;

    

    animation: move-up6 2s ease-in infinite alternate-reverse;

}

@keyframes move-up6 {

  to {

        transform: translateY(-50px);



    }

  }



a {

    text-decoration: none;

}



.login {

    position: relative;

    width: 350px;

    

    height: fit-content;

    background-color: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 15px;

    z-index: 10;

    backdrop-filter: blur(25px);

    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2),

    -10px -10px 40px rgba(0, 0, 0, 0.2);

}

.register {

    position: relative;

   width: 350px;

    

    height: fit-content;

    background-color: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 15px;

    z-index: 10;

    backdrop-filter: blur(25px);

    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2),

    -10px -10px 40px rgba(0, 0, 0, 0.2);

}



.login-body{

	padding: 30px 30px 0px 30px;

}

.login-header{

	background-color: white;

    padding: 15px 20px;

    height: 80px;

    border-top-right-radius: 15px;

    border-top-left-radius: 15px;

	width:100%;

}

.login-footer{

	padding: 15px 0px;

}

.btn .btn-success{

	color:#fff;

}

@media (max-width:400px) {

    .register, .login {

        width: 90%;

    }

}



.register h1, .login h1 {

    font-size: 1.8rem;

    color: #fff;

    margin-bottom: 40px;

    margin-top: 0;

    text-align: center;

}



.register form,.login form {

    width: 100%;

    height: 100%;

    outline: none;

    border: none;

}



.register form .form-control, .login form .input-box {

    width: 100%;

    position: relative;

    margin-bottom: 30px;

    display: flex;

}

.login form .input-box input {

    width: 100%;

    border: none;

    padding: 1rem 2.7rem 1rem 1rem;

    border-radius: 10px;

    color: #fff;

    background-color: rgba(255, 255, 255, 0.2);

    border: 1px solid rgba(255, 255, 255, 0.4);

}



.register form .form-control{

    width: 100%;

    border: none;

    padding: 1rem 2.7rem 1rem 1rem;

    border-radius: 10px;

    color: #fff;

    background-color: rgba(255, 255, 255, 0.2);

    border: 1px solid rgba(255, 255, 255, 0.4);

}



.register form .form-control::placeholder ,.login form .input-box input::placeholder {

    color: #fff;

    font-size: 0.8rem;

    transition: 0.5s ease;

}



.register form .form-control:focus::placeholder, .login form .input-box input:focus::placeholder {

    opacity: 0;

}



.register form .form-control:focus, .login form .input-box input:focus {

    outline: none;

}



.register form .form-control i, .login form .input-box i {

    position: absolute;

    top: 50%;

    right: 15px;

    transform: translateY(-50%);

    color: #fff;

    font-size: 1.2rem;

}



.register form .rembar, .login form .rembar {

    margin-bottom: 30px;

    width: 100%;

}



.register form .rembar input, .login form .rembar input {

    appearance: none;

}



.register form .rembar label , .login form .rembar label {

    color: #fff;

    position: relative;

    width: 100%;

    padding-left: 35px;

    font-size: 0.9rem;

}



.register form .rembar label::before, .login form .rembar label::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background-color: rgba(255, 255, 255, 0.2);

}



.register form .rembar label::after, .login form .rembar label::after {

    content: "";

    position: absolute;

    left: 4px;

    top: 50%;

    transform: translateY(-50%);

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background-color: #fff;

    transition: 0.5 ease;

    opacity: 0;

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);

}



.register form .rembar input:checked + label::after , .login form .rembar input:checked + label::after {

    opacity: 1;

}



.register form button, .login form button {

    width: 100%;

    border: none;

    padding: 1rem 1rem 1rem 1rem;

    border-radius: 10px;

    color: #fff;

    margin-bottom: 30px;

   background-color: #1d484d;

    border: 1px solid rgb(29 72 77);

    transition: 0.5s ease;

    cursor: pointer;

    font-weight: 600;

}



.register form button:hover, .login form button:hover {

    background-color: #111;

}



.register form .links , .login form .links {

    width: 100%;

    display: flex;

    justify-content: space-between;

    gap: 15px;

}



.register form .links  .login form .links a {

    color: #fff;

    font-weight: 100;

    font-size: 0.7rem;

}