*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:  "Open Sans", "sans serif";
}


.blur-bg-overlay{
    background-color:rgb(223, 230, 238);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
}

.form-popup{
    
    position: fixed;
    top:50%;
    left:50%;
    max-width: 720px;
    width: 100%;
    background-color: #fff;
    border: 2px solid darkgrey;
    transform: translate(-50% ,-50%);
}

.form-popup .close-btn{
    position: absolute;
    top:12px;
    right: 12px;
    color: #878484;
    cursor: pointer;
}

.form-popup .form-box{
    display: flex;
} 

.form-box .form-details
{
    padding: 15px;

}

.form-details img{
    margin-top: 20px;
    width: 250px;
    height: 250px;
    margin-left: 55px;
   
}

.form-details h2{
    margin-top: 100px;
    text-align: center;
    color: darkcyan;
}

.form-details p{
   text-align: center;
   color: darkgray;
  
}



.form-box .form-content
{
    width: 100%;
    
    padding: 35px;
    background-color: #c7e0e3;
    /*background-color:#4169E1;*/
}

form .input-field{
 
    height: 50px;
    width: 100%;
    margin-top: 20px;
    position: relative;
}

form .input-field input{
    width: 100%;
    height: 100%;
    outline: none;
    padding: 0 15px;
    font-size: .95rem;
    border-radius: 3px;
    border: 1px solid #717171;

}

/* input{background-color: aquamarine;}
label{background-color: rosybrown;} */


form .input-field input:is(:focus,:valid){
    padding: 16px 15px 0;
}

.input-field input:focus{
    border-color: royalblue;
} 

form .input-field label{
    position: absolute;
    top: 50%;
    left:15px;
    color:"#717171";
    pointer-events: none;
    transform: translateY(-50%);
    transition: .2s ease;

} 

 .input-field input:is(:focus ,:valid) ~ label
{
color: red;
    font-size: .75rem;
    transform: translateY(-120%);

} 

.form-box a{
    color:  #00bcd4;
    text-decoration: none;
}

.form-box a:hover{
    text-decoration: underline;
}

.form-box .forgot-pass{
    display: inline-flex;
    margin-top: 14px;
    font-size: .95rem ;
}

form button{
    width: 100%;
    outline: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 0;
    border-radius: 3px;
    margin: 25px 0px;
    color: #fff;
    cursor: pointer;
   background-color: #00bcd4;
   transition: .2s ease;
}
form button:hover{
    background-color:  #0097a7;;
}

.form-box .bottom-link{
    text-align: center;
}

@media(max-width:640px){
    
  .form-popup .form-box{
        display:flex;
        flex-direction:column;
    }
    
    
    .form-details img{
    margin-top: 20px;
    width: 150px;
    height: 150px;
    margin-left: 105px;
   
}

.form-details h2{
    margin-top: 0px;

}

.form-details p{
   text-align: center;
   color: darkgray;
}

   .form-popup{
    padding:10px;

  
}
}