.main-body .section-container{
    min-height:calc(100vh - 200px);
    align-items:center;
}

.main-body .section{
    padding:80px 40px;
}

.main-body .section-column-wrap{
    justify-content:center;
}

.user-form{
    width:100%;
    border-radius:35px;
    position:relative;
    max-width:680px;
}

.user-form:before{
    content:"";
    pointer-events:none;
    height:calc(100% + 2px);
    width:calc(100% + 2px);
    border-radius:inherit;
    /*background: linear-gradient(90deg, var(--light-blue) 0%, var(--dark-blue) 100%);*/
    position:absolute;
    top:-1px;
    left:-1px;
    box-shadow:0 0 15px rgba(0,0,0,0.1);
}

.user-form .user-form-wrapper{
    background-color:var(--white);
    z-index:1;
    position:relative;
    padding:30px 60px;
    border-radius:inherit;
}

.register-form h1, .login-form h1{
    font-size:var(--h2-font-size);
    font-weight:var(--h2-font-weight);
    line-height:var(--h2-line-height);
    font-family:var(--font-quicksand);
    color:var(--black);
    text-align:center;
    margin-bottom:20px;
}

.form-field-wrapper{
    display:flex;
    flex-wrap:wrap;
}

.form-field{
    width:100%;
    display:flex;
    flex-direction:column;
    position:relative;
}

.form-field label{
    font-size:var(--p1-font-size);
    font-weight:var(--p1-font-weight);
    line-height:var(--p1-line-height);
    font-family:var(--font-quicksand);
    color:var(--black);
    margin-bottom:10px;
}

.form-field:not(:last-child){
    margin-bottom:20px;
}

.form-field.button-field{
    margin-bottom:0;
}

.form-input-field{
    border:1px solid #d9d9d9;
    border-radius:5px;
    padding:15px 25px;
    font-size:var(--p1-font-size);
    font-weight:var(--p1-font-weight);
    line-height:var(--p1-line-height);
    font-family:var(--font-quicksand);
    color:var(--black);
}

.form-input-field#user_password, .form-input-field#login_password, .form-input-field#confirm_password{
    padding:15px 45px 15px 25px;
}

.submit-button{
    text-align:center;
    padding-top:10px;
}

.submitBtn{
    padding:15px 50px;
    border-radius:30px;
    background-color:var(--yellow);
    font-size:var(--button-font-size);
    font-weight:var(--button-font-weight);
    line-height:var(--button-line-height);
    font-family:var(--font-quicksand);
    color:var(--white);
    border:none;
    transition:all 0.3s ease-out;
    cursor:pointer;
}

.submitBtn:hover{
    background-color:var(--dark-orange);
}

::placeholder{
    opacity:1;
    color:#a9a9a9;
}

.ask-message{
    width:100%;
    text-align:center;
    padding-top:15px;
}

.forget-message{
    width:100%;
    text-align:center;
}

.ask-message p,.forget-message p{
    font-size:var(--p1-font-size);
    font-weight:var(--p1-font-weight);
    line-height:var(--p1-line-height);
    font-family:var(--font-quicksand);
    color:var(--black);
}

.alert-message p, .success-message p, .login-alert p, .sent-message p, .confirm-message, .password-message p{
    font-size:13px;
    font-weight:var(--p1-font-weight);
    line-height:var(--p1-line-height);
    font-family:var(--font-quicksand);
    color:var(--black);    
}

#reset-form .confirm-message{
    margin: 0;
    opacity: 0;
    transition:all 0.3s ease-out;
    position:absolute;
    bottom:-30px;
}

#reset-form .confirm-field{
    margin-bottom:40px;
}


.ask-message span, .success-message span, .forget-message span{
    color:var(--dark-orange);
    font-weight:500;
    cursor:pointer;
}

.ask-message span:hover, .success-message span:hover, .forget-message span:hover{
    color:var(--light-blue);
}

.alert-message,.success-message, .login-alert , .sent-message, .password-message{
    padding-top:10px;
    display:none;
    text-align:center;
    width:100%;
}

.login-form{
    display:none;
}


span.password-eye{
    margin: 0;
    width: auto;
    position: absolute;
    cursor: pointer;
    right: 20px;
    top: 51px;
    display: flex;
    align-items: center;
}

.password-eye.active i:before{
    content:"\f070";
}

@media (max-width:767px){
    .main-body .section{
        padding:40px 20px;
    }
    
    .main-body .section-container{
        min-height:calc(100vh - 180px);
    }
    
    .user-form .user-form-wrapper{
        padding:30px 20px;
    }
    
    .user-form{
        border-radius:15px;
    }
    
    .form-input-field{
        padding:10px 20px;
    }
    
    .form-field label{
        margin-bottom:5px;
    }
    
    span.password-eye{
        top:38px;
        font-size:14px;
    }
}