body.sirah-auth { background:linear-gradient(125deg,#0044dd,#00285d) !important; color:#00285d; min-height:100vh; }
.sirah-auth .background-overlay { background:linear-gradient(125deg,rgba(0,68,221,.88),rgba(0,40,93,.94)) !important; }
.sirah-auth .login-container { background:#fff; border-top:6px solid #0044dd; border-radius:8px; box-shadow:0 12px 40px rgba(0,25,70,.25); }
.sirah-auth #login-form, .sirah-auth .content-box { border-color:#d5e2ff; background:#fff !important; }
.sirah-auth .meta-box { background:#0044dd !important; color:#fff; padding:20px; }
.sirah-auth .meta-heading, .sirah-auth .meta-subheading { color:#fff !important; }
.sirah-auth .meta-box .meta-image { max-width:190px; height:auto; background:#fff; }
.sirah-auth .form-control, .sirah-auth input[type=text], .sirah-auth input[type=password], .sirah-auth input[type=email] { border:1px solid #bfd2ff; background:#f6f9ff; color:#00285d; }
.sirah-auth .form-control:focus, .sirah-auth input:focus { border-color:#0044dd; outline-color:#0044dd; box-shadow:0 0 0 3px rgba(0,68,221,.15); }
.sirah-auth .btn-primary, .sirah-auth #validateBtn { background:#0044dd !important; border-color:#0044dd !important; color:#fff !important; }
.sirah-auth #retryBtn { background:#00285d !important; border-color:#00285d !important; color:#fff !important; }
.sirah-auth .btn-primary:hover, .sirah-auth #validateBtn:hover { background:#00285d !important; }
.sirah-auth a { color:#0044dd; }
.sirah-auth #accessTokenForm { width:100%; max-width:460px; float:none; margin:0 auto; }
.sirah-auth #accessTokenForm input[type=text] { font-size:22px; letter-spacing:3px; text-align:center; width:100%; }
.sirah-auth #accessTokenForm .input-group { width:100%; }
.sirah-auth .sirah-auth-brand { color:#0044dd; font:bold 34px Arial,sans-serif; text-align:center; padding:16px 0; }
.sirah-auth .sirah-auth-help { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; padding:16px; font-size:12px; }

/* Shared login and second-factor layout for administrators, teachers and students. */
html { min-height:100%; }
body.sirah-auth {
    display:block !important; margin:0 !important; padding:0 !important;
    min-height:100vh; overflow-x:hidden; overflow-y:auto;
    background:#00285d url('../assets/images/loginBG.png') center center / cover no-repeat fixed !important;
}
.sirah-auth .login-container {
    display:flex !important; flex-direction:column !important; align-items:center !important;
    justify-content:center !important; box-sizing:border-box;
    width:100% !important; max-width:none !important; min-height:100vh !important; height:auto !important;
    margin:0 auto !important; padding:32px 16px !important;
    position:relative !important; top:auto !important; left:auto !important; transform:none !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
}
.sirah-auth .login-card, .sirah-auth #accessTokenForm {
    box-sizing:border-box; width:100% !important; max-width:440px !important;
    min-height:0 !important; margin:0 auto !important; padding:0 !important; float:none !important;
    background:#fff; border:0 !important; border-radius:12px;
    box-shadow:0 12px 40px rgba(0,25,70,.35); overflow:hidden;
}
.sirah-auth #userAccountLoginForm {
    box-sizing:border-box; width:100% !important; max-width:440px !important;
    float:none !important; margin:0 auto !important; padding:0 !important;
}
.sirah-auth #login-form, .sirah-auth .panel-layout {
    width:100%; margin:0 !important; border:0 !important; border-radius:0;
}
.sirah-auth .meta-box {
    position:static !important; margin:0 !important; padding:24px !important; text-align:center;
}
.sirah-auth .meta-box .meta-image {
    display:block !important; position:static !important; transform:none !important;
    box-sizing:content-box; width:210px !important; max-width:100% !important; height:auto !important;
    margin:0 auto 18px !important; padding:0 !important; border:0 !important; border-radius:0 !important;
    background:transparent !important; box-shadow:none !important;
}
.sirah-auth .meta-heading { margin:0 0 6px !important; line-height:1.4; }
.sirah-auth .meta-subheading { margin:0 !important; line-height:1.4; }
.sirah-auth .content-box-wrapper { padding:24px !important; }
.sirah-auth .sirah-auth-help {
    box-sizing:border-box; width:100%; max-width:440px; margin:14px auto 0;
    background:rgba(255,255,255,.96); border-radius:8px; text-align:center;
}
.sirah-auth .g-recaptcha { display:flex; justify-content:center; padding-left:0; padding-right:0; }
.sirah-auth #accessTokenForm input::placeholder { font-size:14px; letter-spacing:normal; }
.sirah-auth #retryBtn, .sirah-auth #retryBtn:hover, .sirah-auth #retryBtn:focus, .sirah-auth #retryBtn:active {
    background:#00285d !important; border-color:#00285d !important; color:#fff !important;
}
.sirah-auth .content-box-wrapper, .sirah-auth .form-control, .sirah-auth .content-box-wrapper label { color:#111 !important; }
@media(max-width:480px) {
    .sirah-auth .login-container { padding:20px 12px !important; }
    .sirah-auth .content-box-wrapper { padding:20px 16px !important; }
}
@media(max-width:360px) {
    .sirah-auth .g-recaptcha { transform:scale(.88); transform-origin:center top; height:68px; }
}