/* MWEBI login theme */

body:has(.login-form) {
    background:
        radial-gradient(circle at 50% 0, rgba(255, 210, 26, .08), transparent 34%),
        #071936 !important;
    color: #ffffff;
}

body:has(.login-form) .login-form {
    width: min(450px, calc(100% - 32px)) !important;
    max-width: 450px !important;
    margin: 48px auto 58px !important;
}

body:has(.login-form) .login-form .card {
    position: relative;
    overflow: hidden;
    max-width: 450px !important;
    background: rgba(10, 29, 57, .97) !important;
    border: 1px solid rgba(255, 210, 26, .22) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .38) !important;
}

body:has(.login-form) .login-form .card::before {
    display: block;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, #e8b900, #ffe45b, #e8b900);
}

body:has(.login-form) .login-form .card-body {
    padding: 30px 32px !important;
    background: transparent !important;
}

body:has(.login-form) .login-form .card-footer {
    padding: 15px 20px !important;
    background: rgba(4, 17, 36, .72) !important;
    border-top: 1px solid rgba(255, 210, 26, .12) !important;
}

body:has(.login-form) .login-form h1,
body:has(.login-form) .login-form h2,
body:has(.login-form) .login-form h3,
body:has(.login-form) .login-form h4,
body:has(.login-form) .login-form h5,
body:has(.login-form) .login-form h6 {
    color: #ffffff !important;
}

body:has(.login-form) .login-form label {
    color: #f2f4f8 !important;
}

body:has(.login-form) .login-form small,
body:has(.login-form) .login-form .text-muted {
    color: #aebbd0 !important;
}

body:has(.login-form) .login-form .form-control {
    height: 48px !important;
    min-height: 48px !important;
    color: #ffffff !important;
    background: #061326 !important;
    border: 1px solid rgba(174, 187, 208, .22) !important;
}

body:has(.login-form) .login-form .form-control:focus {
    border-color: #ffd21a !important;
    box-shadow: 0 0 0 3px rgba(255, 210, 26, .12) !important;
}

body:has(.login-form) .login-form .form-control::placeholder {
    color: #73839a !important;
}

body:has(.login-form) .login-form .input-group-text,
body:has(.login-form) .login-form .btn-reveal-pw {
    height: 48px !important;
    min-height: 48px !important;
    color: #ffd21a !important;
    background: #10294d !important;
    border-color: rgba(255, 210, 26, .25) !important;
}

body:has(.login-form) .login-form .btn-primary,
body:has(.login-form) .login-form #login {
    min-height: 48px !important;
    padding: 10px 24px !important;
    color: #071936 !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #ffe45b, #f4bd00) !important;
    border: 1px solid #ffd21a !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 20px rgba(255, 210, 26, .18) !important;
}

body:has(.login-form) .login-form .btn-primary:hover,
body:has(.login-form) .login-form #login:hover {
    color: #071936 !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

body:has(.login-form) .login-form a {
    color: #ffd21a !important;
}

body:has(.login-form) .login-form a:hover {
    color: #fff1a6 !important;
}

body:has(.login-form) .login-form input[type="checkbox"] {
    accent-color: #ffd21a;
}

@media (max-width: 575px) {
    body:has(.login-form) .login-form {
        width: calc(100% - 24px) !important;
        margin: 28px auto 40px !important;
    }

    body:has(.login-form) .login-form .card-body {
        padding: 26px 20px !important;
    }
}

/* Align header and footer accents with the main website */
body:has(.login-form) .navbar-nav .nav-link::after,
body:has(.login-form) .navbar-nav .nav-link.active::after {
    background: #ffd21a !important;
}

body:has(.login-form) .navbar-nav .nav-link:hover,
body:has(.login-form) .navbar-nav .nav-link.active {
    color: #ffd21a !important;
}

body:has(.login-form) footer a:hover,
body:has(.login-form) .footer a:hover {
    color: #ffd21a !important;
}

body:has(.login-form) footer .fas,
body:has(.login-form) footer .far,
body:has(.login-form) footer .fab,
body:has(.login-form) .footer .fas,
body:has(.login-form) .footer .far,
body:has(.login-form) .footer .fab {
    color: #ffd21a !important;
}

body:has(.login-form) footer .btn,
body:has(.login-form) .footer .btn {
    border-color: rgba(255, 210, 26, .25) !important;
}

body:has(.login-form) footer .status,
body:has(.login-form) .footer .status {
    color: #ffd21a !important;
    border-color: rgba(255, 210, 26, .28) !important;
}

body:has(.login-form) .badge-success,
body:has(.login-form) .bg-success,
body:has(.login-form) .text-success {
    color: #071936 !important;
    background-color: #ffd21a !important;
}

body:has(.login-form) .btn-outline-success {
    color: #ffd21a !important;
    border-color: #ffd21a !important;
}

body:has(.login-form) .btn-outline-success:hover {
    color: #071936 !important;
    background: #ffd21a !important;
}