/* -- Sidebar collapse toggle button ----------------------- */

/* Fixed so it is never clipped by the sidebar's overflow */
#btnToggleSidebar {
    position: absolute;
    /* Valex full sidebar = 240px; button centre sits on the right edge */
    left: 200px;
    top: 68px;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px #fff;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #003EA4;
    z-index: 9999;
    transition: left 0.25s ease, background 0.15s, color 0.15s;
}

    #btnToggleSidebar:hover {
        background: #e8f0fe;
        color: #003EA4;
    }

/* Shift button when sidebar collapses to icon-only (mini ~70 px) */
body.sidenav-toggled #btnToggleSidebar {
    left: 20px;
}


.auth-image-panel {
    object-fit: cover;
    object-position: center;
    height: 100vh;
    width: 100%;
}
/* Password strength rule icons — grey by default, green when passed */
.ps-rule-icon {
    filter: grayscale(100%) opacity(0.4);
    transition: filter 0.2s ease;
}
.tx-success .ps-rule-icon {
    filter: none;
}
/* Input fields */
.card-sigin .form-control {
    height: 44px !important;
    width: 100% !important; /* ← 420px → 100% */
    max-width: 420px !important; /* ← ADD */
    border-radius: 3px !important;
    border: 1px solid #5E5E5E !important;
}
/* Sign In button */
.card-sigin .btn-main-primary {
    height: 44px !important;
    width: 100% !important; /* ← 420px → 100% */
    max-width: 420px !important; /* ← ADD */
    border-radius: 3px;
}
/* Create Account button */
.card-sigin .btn-outline-primary {
    height: 44px !important;
    width: 100% !important; /* ← 420px → 100% */
    max-width: 420px !important; /* ← ADD */
    border-radius: 3px;
    border: 1px solid #003EA4 !important;
    color: #003EA4 !important;
}

    
.card-sigin .btn-outline-primary:hover {
    background-color: #003EA4 !important;
    color: #fff !important;
}

.card-sigin .btn-outline-primary:focus {
    background-color: #003EA4 !important;
    color: #fff !important;
    border-color: #003EA4 !important;
}
/* Brand name */
.text-brand-red {
    color: #CE2128;
}

.card-sigin {
    max-width: 420px !important;
}

.signin-image-panel {
    height: 100vh;
}

.signin-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.signin-content-wrapper {
    max-width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}

.signin-login-view {
    display: none;
}

.signin-login-view.active {
    display: block;
}

.login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

.col-md-6.bg-white {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden; /* ← ADD */
}

.login .container {
    height: 100%;
}

.login .row {
    height: 100%;
    align-items: center;
}
/* Password toggle icon inside input */
.auth-password-toggle {
    background-color: #fff;
    border-left: none;
    border-color: #5E5E5E;
}

    .auth-password-toggle:hover {
        background-color: #f4f4f4;
    }

/* Fix for 150% zoom - adjust card width to fit viewport */
@media (max-width: 640px) {
    .card-sigin {
        width: 100% !important;
        max-width: 100% !important;
    }

    .card-sigin .form-control {
        width: 100% !important;
    }

    .card-sigin .btn-main-primary {
        width: 100% !important;
    }

    .card-sigin .btn-outline-primary {
        width: 100% !important;
    }
}
/* Password checklist */
#passwordChecklist li {
    margin-bottom: 4px;
}

    #passwordChecklist li.check-pass,
    #passwordStrengthBox p.check-pass {
        color: rgba(0, 110, 11, 1); /* Figma: success green */
    }

    #passwordChecklist li.check-fail,
    #passwordStrengthBox p.check-fail {
        color: rgba(107, 114, 128, 1); /* Figma: greyed-out grey */
    }

/* Smooth color transition between inactive (grey) and completed (green) states.
   Icons inherit color via currentColor, so the disc + check transition together. */
#passwordStrengthBox p,
#passwordStrengthBox p i {
    transition: color 0.2s ease;
}

/* Solid filled check-circle (fas) keeps its centred white tick automatically
   because Font Awesome's solid check-circle is a single glyph with the tick
   carved out — colored via currentColor (success green). */
#passwordStrengthBox p i {
    font-size: 13.33px; /* Figma: 13.33 x 13.33 icon */
    width: 13.33px;
    height: 13.33px;
    line-height: 1;
}
/* Only applies to password toggle inputs */
.password-input-group.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    position: relative;
}

/* Password / Confirm Password fields — Figma: 202 × 44 px, 1px solid rgba(94,94,94,1), radius 3px.
   Width 100% fills the col-6 wrapper inside .card-sigin (˜ 202px after pe-2/ps-2 gutters). */
.password-input-group .form-control {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    border-right: 1px solid #5E5E5E !important;
    border-color: #5E5E5E;
}

.password-input-group .input-group-text:not(.maskingeye) {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    background-color: #fff;
    border-left: none;
    border-color: #5E5E5E;
    cursor: pointer;
}

.password-strength-segments {
    display: flex;
    gap: 4px;
    width: 100%;
    margin-top: 6px;
}

.strength-segment {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background-color: #e0e0e0;
    transition: background-color 0.3s;
}

    .strength-segment.active-weak {
        background-color: #dc3545;
    }

    .strength-segment.active-fair {
        background-color: #fd7e14;
    }

    .strength-segment.active-strong {
        background-color: #006E0B;
    }

/* Password strength text colors */
.text-fair {
    color: #fbbc0b !important;
}

.text-strong {
    color: #006E0B !important;
}

/* -- Validation error colors (Figma: rgba(203, 0, 0, 1)) --
   Note: #ps-label.tx-danger included so the "Weak password" strength
   label meets WCAG AA 4.5:1 contrast (Bootstrap's .tx-danger #ee335e
   is only 3.98:1 on white and fails BrowserStack/axe contrast audits). */
.invalid-feedback,
#lblPasswordMatchMsg.tx-danger,
#ps-label.tx-danger {
    color: #CB0000 !important;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.15px;
    vertical-align: middle;
}

.invalid-feedback .mdi-alert-circle-outline,
.invalid-feedback .fe-alert-circle,
#lblPasswordMatchMsg .mdi-alert-circle-outline,
#lblPasswordMatchMsg .fe-alert-circle {
    font-size: 20px !important;
    vertical-align: middle !important;
    color: #CB0000 !important;
}

/* API-error icon size — keep all alert-circle icons consistent at 18px
   across login, forgot-password, reset-password, signup error containers
   so any error returned from the API renders with the same icon size as
   the "Your email is not verified yet" message. */
#divLoginError .mdi-alert-circle-outline,
#divLoginError .fe-alert-circle,
#divResetError .mdi-alert-circle-outline,
#divResetError .fe-alert-circle,
#emailError .mdi-alert-circle-outline,
#emailError .fe-alert-circle,
.passworerror .mdi-alert-circle-outline,
.passworerror .fe-alert-circle,
.verify-email-msg .mdi-alert-circle-outline,
.verify-email-msg .fe-alert-circle {
    font-size: 20px !important;
    vertical-align: middle !important;
    color: rgba(203, 0, 0, 1) !important;
}

.text-danger {
    color: #CB0000 !important;
}

.passworerror {
    color: #CB0000 !important;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.15px;
}

.email-error .text-danger {
    color: #CB0000 !important;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.15px;
}

.password-input-group .form-control.is-invalid {
    border: 1.5px solid #CB0000 !important;
    border-right: 1.5px solid #CB0000 !important;
}

    .password-input-group .form-control.is-invalid + .input-group-text {
        border-color: #CB0000 !important;
    }

 /* Allow the password complexity / validation message to wrap normally
   under both Password and Confirm Password columns. Previously this was
   forced to a single line with text-overflow: ellipsis, which truncated
   the message (e.g. "...one sp..."). */
#lblPasswordError {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}


.login {
    height: auto !important;
    overflow: visible !important;
}

.col-md-6.col-lg-6.col-xl-5.bg-white {
    overflow-y: auto !important;
    max-height: 100vh !important;
}

/* -- Remove tick and cross icons from all inputs -- */
.was-validated .form-control:valid:not(.otp-box):not(.is-invalid),
.form-control.is-valid:not(.otp-box):not(.is-invalid) {
    border: 1px solid #5E5E5E !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

.was-validated .form-control.is-invalid,
.form-control.is-invalid,
.card-sigin .form-control.is-invalid,
.was-validated .form-control:invalid:not(.is-valid) {
    border: 1.5px solid #CB0000 !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}
/* Remove ALL validation borders and icons */
.was-validated .form-control:valid:not(.otp-box),
.was-validated .form-control:invalid:not(.otp-box),
.form-control.is-valid:not(.otp-box),
.form-control.is-invalid:not(.otp-box) {
    background-image: none !important;
    padding-right: 0.75rem !important;
    box-shadow: none !important;
}

/* Valid — default border always (but never override JS-applied .is-invalid) */
.was-validated .form-control:valid:not(.otp-box):not(.is-invalid),
.form-control.is-valid:not(.otp-box):not(.is-invalid) {
    border: 1px solid #5E5E5E !important;
}

    /* Remove focus glow on valid/invalid */
    .was-validated .form-control:valid:not(.otp-box):not(.is-invalid):focus,
    .form-control.is-valid:not(.otp-box):not(.is-invalid):focus {
        border-color: #5E5E5E !important;
        box-shadow: none !important;
    }

    .was-validated .form-control.is-invalid:not(.otp-box):focus,
    .form-control.is-invalid:not(.otp-box):focus,
    .card-sigin .form-control.is-invalid:not(.otp-box):focus {
        border: 1.5px solid #CB0000 !important;
        box-shadow: none !important;
    }

/* -- Auth Shared Layout ---------------------------------------- */
.auth-form-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 0 16px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.auth-subtitle {
    color: rgba(94, 94, 94, 1);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
    font-size: 16px;
    margin-bottom: 0;
}

.auth-subtitle-sm {
    font-size: 14px;
    line-height: 21px;
}

/* -- Signup-specific ------------------------------------------- */
.signup-logo-wrapper {
    width: 276px;
    height: 136px;
    margin: 0 auto;
}

/* Signup form field labels (Figma spec) */
.form-group > label {
    color: rgba(3, 27, 78, 1);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
}


#frmRegister .form-group > label .text-danger {
    color: var(--Color, rgba(203, 0, 0, 1)) !important;
}

/* Input height per Figma (input itself = 44px; label + input group naturally ˜ 67px) */
.auth-tall-input {
    height: 44px !important;
}

.card-sigin .signup-affiliation {
    width: 100% !important;
    max-width: 420px !important;
    height: 119px !important;
    min-height: 119px !important;
    border: 1px solid rgba(94, 94, 94, 1) !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    resize: vertical !important;
    box-sizing: border-box;
}

.signup-affiliation::placeholder {
    color: rgba(10, 10, 10, 0.5) !important;
    opacity: 1 !important;
}

.signup-affiliation + small {
    color: rgba(94, 94, 94, 1) !important;
    opacity: 1 !important;
}

.signup-affiliation + small.tx-muted {
    color: rgba(94, 94, 94, 1) !important;
}

.auth-success-box {
    border: 1px solid rgba(0, 110, 11, 1);
    padding: 12px 11px;
}

.auth-success-description {
    max-width: 288px;
    font-size: 16px;
    line-height: 24px;
}

/* -- Signup Success View — Figma typography spec ----------------- */

/* "You are all set" — Roboto Medium 16/100% centered */
#successView h2.h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    opacity: 1;
}

/* "Use your Email and Password to access your dashboard" — Roboto Regular 16/24 #5E5E5E */
#successView .auth-success-description {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0;
    text-align: center;
    color: rgba(94, 94, 94, 1) !important;
    opacity: 1;
}

/* "Need to create another account? Create Account" — Roboto Regular 16/24 #5E5E5E */
#successView p.tx-13 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0;
    text-align: center;
    color: rgba(94, 94, 94, 1) !important;
    opacity: 1;
}

/* "Help / Support" and "Privacy & Accessibility" footer links — Figma: rgba(0, 62, 164, 1) */
#successView .text-center > a.tx-13 {
    color: rgba(0, 62, 164, 1) !important;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    text-decoration: none;
}

#successView .text-center > a.tx-13:hover,
#successView .text-center > a.tx-13:focus {
    color: rgba(0, 43, 115, 1) !important;
    text-decoration: underline;
}

/* -- Common Success/Error Message Theme ------------------------- */
:root {
    --app-success-bg: rgba(0, 110, 11, 1);
    --app-error-bg: rgba(203, 0, 0, 1);
}

.alert-success {
    background-color: var(--app-success-bg) !important;
    border-color: var(--app-success-bg) !important;
    color: #fff !important;
}

.alert-danger {
    background-color: var(--app-error-bg) !important;
    border-color: var(--app-error-bg) !important;
    color: #fff !important;
}

/* -- Password toggle icon (position-relative approach) --------- */
.password-input-group .maskingeye {
    position: absolute !important;
    right: 10px;
    top: 12px;
    cursor: pointer;
    background: transparent !important;
    border: none !important;
    z-index: 6;
    color: #808080;
    opacity: 0.85;
    line-height: 1;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    display: block !important;
    flex: none !important;
}

.password-input-group .maskingeye i {
    font-size: 18px;
    width: 18px;
    height: 18px;
    display: block;
    line-height: 1;
}

.password-input-group .form-control {
    border-right: 1px solid #5E5E5E !important;
    padding-right: 40px;
}

/* -- OTP Modal -------------------------------------------------- */
/* Figma spec: 408 × 446, border-radius 4px */
#otpModal .modal-dialog {
    max-width: 408px;
    width: 408px;
}

#otpModal .modal-content {
    width: 408px;
    min-height: 446px;
    border-radius: 4px;
    opacity: 1;
}

/* OTP_error layout (Figma 408 × 398) — modal shrinks when expired */
#otpModal.otp-expired .modal-content {
    min-height: 398px;
}

/* Modal body padding — Figma: icon top = 30px from modal top, side = 30px */
#otpModal .modal-body {
    padding: 30px 30px 24px 30px;
}

/* Icon ? heading spacing — Figma: heading top 285 ? icon bottom 261 = 24px */
#otpModal .otp-icon-wrapper {
    margin-bottom: 24px !important;
}

/* Heading ? subtitle spacing — Figma: subtitle top 319 ? heading bottom 311 = 8px */
#otpModal h2.h5 {
    margin-bottom: 8px !important;
}

/* Subtitle ? OTP boxes spacing — Figma: boxes top 393 ? subtitle bottom 361 = 32px */
#otpModal #otpView > .auth-subtitle.auth-subtitle-sm {
    margin-bottom: 32px !important;
}

/* "Verify Your Email" heading — Figma: Roboto SemiBold 16/100% #0F1724 */
#otpModal h2.h5 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: rgba(15, 23, 36, 1) !important;
    opacity: 1;
}

/* OTP modal subtitle — Figma: Roboto Regular 14/21px #5E5E5E center */
#otpModal .auth-subtitle.auth-subtitle-sm {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0;
    text-align: center;
    color: rgba(94, 94, 94, 1) !important;
    opacity: 1;
}

/* Icon badge — Figma: 48×48, radius 6, bg rgba(0,62,164,1), drop-shadow 0 4 12 0 rgba(0,0,0,0.1) */
.otp-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 6px;
}

#otpModal .otp-icon-wrapper {
    background-color: rgba(0, 62, 164, 1) !important;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
}

/* close button  */
#otpModal .modal-body {
    overflow: visible;
}

/* OTP input boxes */
#otpModal .otp-box {
    width: 48px !important;
    height: 56px !important;
    font-size: 18px;
    border: 1px solid #d0d5dd !important;
    border-radius: 3px !important;
    padding: 0;
    background-color: rgba(248, 250, 252, 1);
}

/* OTP boxes row \u2014 Figma: 348 \u00d7 56 with 12px gap (override Bootstrap gap-2 = 8px) */
#otpModal #otpView > .form-group.d-flex {
    gap: 12px !important;
    width: 348px;
    margin-left: auto;
    margin-right: auto;
}

#otpModal .otp-box:focus {
    border-color: rgba(0, 110, 11, 1) !important;
    box-shadow: none !important;
    outline: none;
}

#otpModal .otp-box.is-valid {
    border: 1px solid rgba(0, 110, 11, 1) !important;
    background-image: none !important;
}

#otpModal .otp-box.is-invalid {
    border-color: #dc3545 !important;
    background-image: none !important;
}

/* OTP_error: boxes greyed-out — Figma border/text/border/subheader */
#otpModal .otp-box.is-expired {
    border: 1px solid rgba(209, 213, 219, 1) !important;
    color: rgba(94, 94, 94, 1);
    background-image: none !important;
}

/* Verify / Try Again buttons */
#otpModal .btn-main-primary {
    border-radius: 6px;
}

/* Verify OTP wrapper — Figma: 348 wide, no border, just spacing */
#otpModal .otp-verify-box {
    width: 348px;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 16px;
}

/* Verify OTP / Request New buttons inside wrapper — Figma: 348×35 */
#otpModal .otp-verify-box #verifyOtpBtn,
#otpModal .otp-verify-box #requestNewOtpBtn {
    height: 35px;
    min-height: 35px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Attempts remaining text */
.auth-attempts-msg {
    color: rgba(94, 94, 94, 1);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0;
}

/* 'OTP expired.' — red */
.otp-error-msg {
    color: rgba(203, 0, 0, 1) !important;
}

/* OTP expiry countdown — Figma spec (red text, no border) */
#otpExpireTimer {
    color: rgba(203, 0, 0, 1) !important;
    border-width: 0;
    border-style: solid;
    border-color: rgba(203, 0, 0, 1);
}

/* OTP status error message ("Invalid OTP. Please try again.") — Figma spec */
#otpStatusMsg.tx-danger,
#otpStatusMsg.otp-error-msg {
    color: rgba(203, 0, 0, 1) !important;
    border-width: 0;
    border-style: solid;
    border-color: rgba(203, 0, 0, 1);
    opacity: 1;
}

#otpStatusMsg.tx-danger .fe-alert-circle,
#otpStatusMsg.otp-error-msg .fe-alert-circle {
    color: rgba(203, 0, 0, 1) !important;
}

/* 'This code has expired...' — dark */
.otp-expired-desc {
    color: rgba(94, 94, 94, 1);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 100%;
}

/* Resend code text */
.otp-resend-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: rgba(94, 94, 94, 1);
}

/* Resend button — disabled: gray text, active: blue text */
.otp-resend-btn {
    color: rgba(209, 213, 219, 1);
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: not-allowed;
    pointer-events: none;
}

.otp-resend-btn.active {
    color: rgba(0, 62, 164, 1);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
}

.otp-resend-btn.active:hover {
    color: rgba(0, 49, 130, 1);
}

#otpBlockedView .btn {
    margin-top: 8px;
}

#otpModal #resendTimer {
    color: #006E0B !important;
    font-weight: 600;
}

#blockedCountdown {
    color: #006E0B !important;
}

/* -- Password-match success message (Figma spec) --------------- */
#lblPasswordMatchMsg.tx-success {
    color: rgba(0, 110, 11, 1) !important;
    padding: 2px 0;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
}

/* -- Auth input text color (Figma spec) ------------------------ */
.card-sigin .form-control {
    color: rgba(1, 1, 1, 1);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -0.31px;
    vertical-align: middle;
}

    .card-sigin .form-control::placeholder {
        color:rgba(107, 114, 128, 1);
       
    }

/* -- Verify Email CTA (Figma spec) ----------------------------- */
#divVerifyEmailCta .verify-email-msg {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.15px;
    vertical-align: middle;
    color: rgba(203, 0, 0, 1) !important;
}

#divVerifyEmailCta .verify-email-link {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    color: rgba(0, 62, 164, 1) !important;
}

.tx-underline{
    text-decoration: underline;
}
/* -- Keyboard focus rings (a11y) ------------------------------- */
.password-input-group .maskingeye:focus-visible,
#divVerifyEmailCta .verify-email-link:focus-visible,
.card-sigin .btn-main-primary:focus-visible,
.card-sigin .btn-outline-primary:focus-visible {
    outline: 2px solid #003EA4 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* -- Color contrast overrides for signup page (WCAG AA = 4.5:1) -- */
/* Valex's .tx-color-03 (#97a3b9 ˜ 2.96:1 on white) fails AA; darken
   it inside the signup card so Lighthouse a11y reaches 90+. */
#formView .tx-color-03,
#successView .tx-color-03,
#passwordStrengthBox .tx-color-03 {
    color: #5E5E5E !important; /* 7.0:1 on white — AAA */
}

/* Affiliation hint already targeted; ensure it passes too */
.signup-affiliation + small,
.signup-affiliation + small.tx-muted {
    color: #5E5E5E !important;
    opacity: 1 !important;
}

/* Auth links (e.g. "Create Account" on success view) — keep primary blue
   in default, :visited and :hover states. Without this the browser's
   default :visited color (purple) overrides Bootstrap's .text-primary. */
a.text-primary,
a.text-primary:visited {
    color: rgba(0, 62, 164, 1) !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: rgba(0, 49, 130, 1) !important;
}


body.modal-open .modal-backdrop.show {
    background-color: #000 !important;
    opacity: 0.5 !important;
}
body.modal-open .modal {
    z-index: 1050;
}

.mdi-alert-circle-outline {
    font-size: 20px !important;
    vertical-align: middle !important;
}

.btn-close {
    margin-right: 8px;
    margin-top: 5px;
}

.verify-email-link {
    margin-block-end: 2rem !important;
}

.btn-danger:focus,
.btn-danger:focus-visible {
    outline: 2px solid #C2410C;
    outline-offset: 2px;
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    outline: 2px solid #003EA4;
    outline-offset: 2px;
}

body.submission-page {
    overflow: unset !important;
}
/* ======================== SHARED SUBMISSION PAGE HEADER ======================== */
.back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #003ea4;
    font-size: 20px;
    text-decoration: none;
    border-radius: 6px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .back-link i {
        font-size: 22px;
        line-height: 1;
    }

    .back-link:hover {
        background-color: #f1f3f5;
        color: #003284;
    }

    .back-link:focus-visible {
        outline: 2px solid #003ea4;
        outline-offset: 2px;
    }

.submission-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.submission-subtitle {
    font-size: 14px;
    color: #6c757d;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.main-header .dropdown-menu:after{
    display:none;
}

.main-header.side-header {
    z-index: 600 !important;
}

.main-profile-menu .dropdown-menu .main-header-profile + .dropdown-item {
    border-block-start: 1px solid #e2eaf9;
}

.main-profile-menu .dropdown-item {
    color: #5e5e5e !important;
    cursor: pointer;
}

/* -- User initials avatar (header) ----------------------------- */
.main-profile-menu a.profile-user {
    text-decoration: none;
}

.user-initials-avatar {
    background-color: #003EA4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 400;
    width: 38px;
    height: 38px;
    font-size: 13px;
}