/* ==========================================================
   MedTrix Authentication Forms
   Version: 1.0
========================================================== */

/* Form */

#medtrixAuthModal .auth-content form{
    width:100%;
    margin:0;
}

/* Labels */

#medtrixAuthModal .auth-content label{
    display:block;
    margin-bottom:8px;
    color:#374151;
    font-size:14px;
    font-weight:600;
}

/* Inputs */

#medtrixAuthModal .auth-content input[type="text"],
#medtrixAuthModal .auth-content input[type="email"],
#medtrixAuthModal .auth-content input[type="password"],
#medtrixAuthModal .auth-content input[type="tel"],
#medtrixAuthModal .auth-content input[type="number"],
#medtrixAuthModal .auth-content input[type="url"],
#medtrixAuthModal .auth-content textarea,
#medtrixAuthModal .auth-content select{

    width:100%;
    height:54px;

    padding:0 18px;

    border:1px solid #d9e2ef;
    border-radius:12px;

    background:#fff;

    color:#1f2937;

    font-size:15px;

    transition:.25s;

    margin-bottom:18px;

    box-sizing:border-box;

}

/* Textarea */

#medtrixAuthModal .auth-content textarea{

    min-height:120px;

    padding:16px 18px;

    resize:vertical;

}

/* Focus */

#medtrixAuthModal .auth-content input:focus,
#medtrixAuthModal .auth-content textarea:focus,
#medtrixAuthModal .auth-content select:focus{

    border-color:#2C4A92;

    box-shadow:0 0 0 4px rgba(44,74,146,.12);

    outline:none;

}

/* Placeholder */

#medtrixAuthModal .auth-content input::placeholder,
#medtrixAuthModal .auth-content textarea::placeholder{

    color:#9CA3AF;

}

/* Checkbox */

#medtrixAuthModal .auth-content input[type="checkbox"]{

    width:18px;

    height:18px;

    margin-right:8px;

    accent-color:#2C4A92;

    vertical-align:middle;

}

#medtrixAuthModal .auth-content .checkbox,
#medtrixAuthModal .auth-content .remember-me{

    display:flex;

    align-items:center;

    margin-bottom:18px;

}

#medtrixAuthModal .auth-content .checkbox label,
#medtrixAuthModal .auth-content .remember-me label{

    margin:0;

    font-size:14px;

    font-weight:500;

    color:#4B5563;

}

/* Password Field */

#medtrixAuthModal .password-field{

    position:relative;

}

#medtrixAuthModal .password-field input{

    padding-right:55px;

}

#medtrixAuthModal .password-toggle{

    position:absolute;

    right:16px;

    top:44px;

    cursor:pointer;

    color:#6B7280;

    font-size:18px;

    user-select:none;

    transition: .2s;
}

/* Primary Button */

#medtrixAuthModal .button-loading{
    pointer-events:none;
}

#medtrixAuthModal .auth-submit{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:#F58220;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

#medtrixAuthModal .auth-submit:hover{

    background:#DD6F10;

}

#medtrixAuthModal .auth-submit:disabled{

    opacity:.7;

    cursor:not-allowed;

}

/* Generic Submit */

#medtrixAuthModal .auth-content button[type="submit"],
#medtrixAuthModal .auth-content input[type="submit"]{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:#F58220;

    color:#fff;

    font-size:16px;

    font-weight:700;

    transition:.25s;

    cursor:pointer;

}

#medtrixAuthModal .auth-content button[type="submit"]:hover,
#medtrixAuthModal .auth-content input[type="submit"]:hover{

    background:#DD6F10;

}

/* Links */

#medtrixAuthModal .auth-content a{

    color:#2C4A92;

    text-decoration:none;

    transition:.2s;

}

#medtrixAuthModal .auth-content a:hover{

    color:#223C79;

    text-decoration:underline;

}

/* Error */

#medtrixAuthModal .form-error{

    display:none;

    background:#FEE2E2;

    color:#B91C1C;

    padding:14px 16px;

    border-radius:10px;

    margin-bottom:18px;

    font-size:14px;
    
    line-height: 1.5;

}

/* Validation */

#medtrixAuthModal .input-error{

    border-color:#DC2626 !important;

}

#medtrixAuthModal .input-success{

    border-color:#16A34A !important;

}

/* Small Text */

#medtrixAuthModal .auth-small{

    font-size:13px;

    color:#6B7280;

    margin-top:-10px;

    margin-bottom:18px;

}

/* Loader Inside Button */

#medtrixAuthModal .auth-submit .spinner{

    display:none;

    width:18px;

    height:18px;

    margin-left:10px;

    vertical-align:middle;

}

#medtrixAuthModal .auth-submit .spinner img{
    width:18px;

    height:18px;
}

/* Tutor LMS Compatibility */

#medtrixAuthModal .tutor-form-group,
#medtrixAuthModal .tutor-form-row,
#medtrixAuthModal .tutor-form-wrap{

    margin-bottom:18px;

}

#medtrixAuthModal .tutor-form-control{

    width:100% !important;

    height:54px !important;

    border:1px solid #D9E2EF !important;

    border-radius:12px !important;

    padding:0 18px !important;

    box-sizing:border-box;

}

#medtrixAuthModal .tutor-form-control:focus{

    border-color:#2C4A92 !important;

    box-shadow:0 0 0 4px rgba(44,74,146,.12) !important;

}

#medtrixAuthModal .tutor-btn{

    width:100% !important;

    height:56px !important;

    border-radius:14px !important;

    background:#F58220 !important;

    border:none !important;

    color:#fff !important;

    font-weight:700 !important;

    font-size:16px !important;

    transition:.25s;

}

#medtrixAuthModal .tutor-btn:hover{

    background:#DD6F10 !important;

}

/* Responsive */

@media(max-width:767px){

    #medtrixAuthModal .auth-content input,
    #medtrixAuthModal .auth-content select,
    #medtrixAuthModal .auth-content textarea{

        font-size:16px;

    }

    #medtrixAuthModal .auth-submit,
    #medtrixAuthModal .auth-content button[type="submit"],
    #medtrixAuthModal .auth-content input[type="submit"]{

        height:54px;

    }

}