/* Minification failed. Returning unminified contents.
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,67): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-400'
(27,68): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(29,46): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(31,31): run-time error CSS1039: Token not allowed after unary operator: '-deap-white'
(32,74): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(32,94): run-time error CSS1039: Token not allowed after unary operator: '-deap-primary'
(44,62): run-time error CSS1039: Token not allowed after unary operator: '-deap-primary'
(45,47): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(48,55): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(51,38): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-100'
(51,78): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(51,203): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-800'
(52,35): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(55,45): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(56,36): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-100'
(56,122): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(56,169): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(58,49): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(64,91): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(65,89): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(65,155): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-800'
(65,189): run-time error CSS1039: Token not allowed after unary operator: '-deap-white'
(66,73): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(72,147): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-400'
(73,32): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(77,70): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(78,104): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(78,138): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(80,45): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(81,34): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent-hover'
(83,101): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(84,45): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent-hover'
(87,39): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-300'
(88,89): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(89,32): run-time error CSS1039: Token not allowed after unary operator: '-deap-primary'
(93,75): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-100'
(94,116): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(95,66): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-300'
(96,39): run-time error CSS1039: Token not allowed after unary operator: '-deap-primary'
(97,43): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(102,49): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-100'
(102,78): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-800'
(102,125): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(116,16): run-time error CSS1030: Expected identifier, found '.'
(116,31): run-time error CSS1031: Expected selector, found ')'
(116,31): run-time error CSS1025: Expected comma or open brace, found ')'
(117,16): run-time error CSS1030: Expected identifier, found '.'
(117,31): run-time error CSS1031: Expected selector, found ')'
(117,31): run-time error CSS1025: Expected comma or open brace, found ')'
(122,78): run-time error CSS1039: Token not allowed after unary operator: '-deap-primary'
(155,22): run-time error CSS1039: Token not allowed after unary operator: '-deap-white'
(156,28): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(157,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(159,55): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-100'
(159,84): run-time error CSS1039: Token not allowed after unary operator: '-deap-primary'
(162,22): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(163,28): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(164,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-white'
(166,56): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent-hover'
(166,96): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent-hover'
(170,22): run-time error CSS1039: Token not allowed after unary operator: '-deap-primary'
(171,28): run-time error CSS1039: Token not allowed after unary operator: '-deap-primary'
(172,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-white'
(183,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(193,28): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(197,22): run-time error CSS1039: Token not allowed after unary operator: '-deap-white'
(202,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-800'
(208,24): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(213,22): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-100'
(214,28): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(216,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-800'
(232,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(239,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-800'
(255,28): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(259,22): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-100'
(260,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(275,49): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(279,48): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(298,29): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(312,24): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(319,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-400'
(331,28): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(341,24): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(344,79): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-400'
(361,28): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(362,22): run-time error CSS1039: Token not allowed after unary operator: '-deap-white'
(368,22): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(369,24): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(370,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-white'
(373,28): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(374,22): run-time error CSS1039: Token not allowed after unary operator: '-deap-white'
(375,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(378,79): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-100'
(378,108): run-time error CSS1039: Token not allowed after unary operator: '-deap-primary'
(383,28): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(385,22): run-time error CSS1039: Token not allowed after unary operator: '-deap-white'
(391,24): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-300'
(394,81): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-400'
(400,48): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(421,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-primary'
(427,68): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(428,91): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(431,78): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-800'
(435,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(440,67): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-200'
(451,96): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-600'
(452,94): run-time error CSS1039: Token not allowed after unary operator: '-deap-gray-800'
(456,22): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(457,28): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent'
(458,17): run-time error CSS1039: Token not allowed after unary operator: '-deap-white'
(463,68): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent-hover'
(463,108): run-time error CSS1039: Token not allowed after unary operator: '-deap-accent-hover'
(468,20): run-time error CSS1030: Expected identifier, found '.'
(468,35): run-time error CSS1031: Expected selector, found ')'
(468,35): run-time error CSS1025: Expected comma or open brace, found ')'
 */
/* DEAP Login Redesign (DIMA-2508) */

:root {
    --deap-primary: #3C3C3C;
    --deap-accent: #6BBF2D;
    --deap-accent-hover: #8baf4a;
    --deap-white: #ffffff;
    --deap-gray-100: #EDEDE7;
    --deap-gray-200: #e2e0d8;
    --deap-gray-300: #A7A9AB;
    --deap-gray-400: #8a8d90;
    --deap-gray-600: #58585b;
    --deap-gray-800: #3C3C3C;
    --deap-danger: #C0483A;
}

/* .page-wrapper (flex column, min-height:100vh) is already defined in app.css and loaded here via ~/bundles/css — reused as-is so login and the authenticated app never drift apart */

/* === MAIN === */
/* overflow-y: auto mirrors .main-content in app.css — keeps the footer pinned to the viewport bottom; long content scrolls internally instead of pushing the footer down */
.login-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 20px; overflow-y: auto; }

.login-brand { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 8px; }
.login-brand img { height: 40px; width: auto; }
.login-brand-text { display: flex; flex-direction: column; align-items: center; }
.login-brand-sub { font-size: 10px; font-weight: 500; color: var(--deap-gray-400); letter-spacing: 2px; font-family: Georgia, 'Times New Roman', serif; }
.login-brand-main { font-size: 17px; font-weight: 600; color: var(--deap-gray-600); letter-spacing: 2px; font-family: Georgia, 'Times New Roman', serif; }
.login-brand-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.portal-title { font-size: 12px; color: var(--deap-gray-600); font-weight: 500; }

.auth-card { background: var(--deap-white); width: 100%; max-width: 960px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 10px rgba(0,0,0,0.06); }
.auth-card-accent { height: 4px; background: linear-gradient(90deg, var(--deap-accent), var(--deap-primary)); }
.auth-card-body { padding: 20px 36px 18px; }

/* === RESPONSIVE (mobile/tablet) === */
@media (max-width: 640px) {
    .login-main { padding: 16px 16px; }
    .login-brand { margin-bottom: 14px; }
    .login-brand img { height: 36px; }
    .auth-card-body { padding: 18px 20px 16px; }
    .auth-title { font-size: 18px; }
}

.auth-title { font-size: 21px; font-weight: 700; color: var(--deap-primary); margin-bottom: 4px; }
.auth-subtitle { font-size: 13px; color: var(--deap-gray-600); margin-bottom: 14px; line-height: 1.5; }

/* _PasswordRequirements.cshtml static intro text (rendered directly into the card body) */
.auth-card-body > ul { font-size: 12.5px; color: var(--deap-gray-600); margin: 0 0 14px 18px; line-height: 1.6; }

/* HR/Management-only notice (always visible) */
.hr-notice-banner { background: var(--deap-gray-100); border: 1px solid var(--deap-gray-200); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; font-size: 12px; line-height: 1.5; color: var(--deap-gray-800); }
.hr-notice-banner a { color: var(--deap-accent); }

/* Legal/monitoring notice — always visible, scrollable, never collapsible */
.notice-disclosure { border: 1px solid var(--deap-gray-200); border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.notice-heading { background: var(--deap-gray-100); padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: var(--deap-gray-600); border-bottom: 1px solid var(--deap-gray-200); }
.notice-body { max-height: 220px; overflow-y: auto; }
.notice-body p { font-size: 11.5px; color: var(--deap-gray-600); line-height: 1.6; padding: 10px 14px; }
.notice-body p:first-child { padding-top: 12px; }
.notice-body p:last-child { padding-bottom: 12px; }

/* Scaffolded form fields (DVHT.Common ScaffoldFor/ScaffoldPasswordFor output) */
.auth-card-body .form-group { margin-bottom: 14px; }
.auth-card-body .form-group .input-label { font-size: 12px; font-weight: 600; color: var(--deap-gray-600); text-transform: uppercase; letter-spacing: 0.04em; border: none; }
.auth-card-body .form-control { width: 100%; padding: 11px 14px; border: 1px solid var(--deap-gray-200); border-radius: 8px; font-size: 14px; color: var(--deap-gray-800); background: var(--deap-white); transition: all 0.15s; height: auto; }
.auth-card-body .form-control:focus { outline: none; border-color: var(--deap-accent); box-shadow: 0 0 0 3px rgba(107,191,45,0.15); }
.auth-card-body .field-validation-error { display: block; font-size: 12px; margin-top: 4px; }

/* Password visibility toggle (added client-side by login.js around ScaffoldPasswordFor's input) */
.field-input-wrap { position: relative; }
.field-input-wrap .form-control.pw { padding-right: 42px; }
.pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--deap-gray-400); padding: 4px; display: flex; }
.pw-toggle:hover { color: var(--deap-gray-600); }
.pw-toggle svg { width: 18px; height: 18px; }

.field-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.auth-card-body .custom-control-label { font-size: 13px; color: var(--deap-gray-600); }
.auth-card-body .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--deap-accent); border-color: var(--deap-accent); }

.link-inline { font-size: 13px; color: var(--deap-accent); text-decoration: none; font-weight: 500; }
.link-inline:hover { color: var(--deap-accent-hover); text-decoration: underline; }

.btn-login-primary { width: 100%; padding: 12px; border: none; border-radius: 8px; background: var(--deap-accent); color: white; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s; }
.btn-login-primary:hover { background: var(--deap-accent-hover); color: white; }

.auth-footer-links { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: 13px; }
.auth-footer-links .dot { color: var(--deap-gray-300); }
.back-link { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--deap-gray-600); text-decoration: none; margin-top: 14px; justify-content: center; }
.back-link:hover { color: var(--deap-primary); }
.back-link svg { width: 14px; height: 14px; }

/* Live password requirements checklist (ResetPassword — wired by login.js against the real 5-rule policy) */
.pw-requirements { margin: 0 0 20px; padding: 12px 14px; background: var(--deap-gray-100); border-radius: 8px; }
.pw-requirements li { list-style: none; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--deap-gray-600); padding: 3px 0; }
.pw-requirements li svg { width: 14px; height: 14px; color: var(--deap-gray-300); flex-shrink: 0; }
.pw-requirements li.met { color: var(--deap-primary); }
.pw-requirements li.met svg { color: var(--deap-accent); }

/* reCAPTCHA wrapper (spacing only — the widget itself is Google's real UI) */
.recaptcha-box-wrap { margin-bottom: 18px; }

.auth-card-body .card-header { background: var(--deap-gray-100); color: var(--deap-gray-800); border-bottom: 1px solid var(--deap-gray-200); font-weight: 600; font-size: 14px; }

/* MFA verification code input */
#VerificationCode { letter-spacing: 4px; font-weight: 600; text-align: center; }

/* Member reimbursement request, new look (DIMA-2519) */
/* Scoped under .member-request so nothing here reaches the login, account and MFA screens that share _LoginLayout and login.css */

/* === CARD === */
/* .auth-card lives in _LoginLayout and cannot be reached from a child - overflow stays visible or the card clips the birthday datepicker popup */
.auth-card { overflow: visible; }
.auth-card-accent { border-radius: 12px 12px 0 0; }

/* login.css caps .auth-card at 960px for eleven views, so the width is asked for from inside and only these two screens widen */
.auth-card:has(.member-request) { max-width: 1280px; }
.auth-card:has(.member-request) .auth-card-body { padding: 26px 44px 24px; }

/* === PAGE TITLE === */
/* .page-header is also a .row - the -15px is Bootstrap's gutter; drop it and the title indents one gutter past every field below */
.member-request .page-header { margin: 0 -15px 14px; }
.member-request .page-title { font-size: 23px; font-weight: 700; color: var(--deap-primary); margin: 0; }

/* === ENTRY ROW (Aetna ID, birthday, reimbursement type) === */
/* Two of these three labels are full sentences - uppercasing them wraps each to two lines, so this zone keeps sentence case; wording is untouched */
.member-request .pre-reimbursement-selections .input-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 1.35;
}
.member-request .pre-reimbursement-selections { align-items: flex-start; }

/* Reset and Search share one block - col-1 is 80px in this card and Search does not fit */
.member-request .entry-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }

/* === TYPE SCALE === */
/* One step up from login.css's 12px / 14px baseline, because a 1280px card makes the original sizes read smaller than they did at 960px */
.member-request .input-label,
.member-request .auth-card-body .form-group .input-label { font-size: 13px; }
.member-request .form-control { font-size: 15px; padding: 13px 14px; }

/* === BUTTONS === */
/* btn-load on Reset and Search is a JS spinner hook and is left in place */
.member-request .btn-primary,
.member-request .btn-secondary {
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 600;
    padding: 9px 20px;
    transition: background 0.15s, color 0.15s;
}
.member-request #resetButton,
.member-request #resetButton:not(:disabled):not(.disabled) {
    background: var(--deap-white);
    border: 1px solid var(--deap-gray-200);
    color: var(--deap-gray-600);
}
.member-request #resetButton:hover { background: var(--deap-gray-100); color: var(--deap-primary); }
.member-request #searchButton,
.member-request #searchButton:not(:disabled):not(.disabled) {
    background: var(--deap-accent);
    border: 1px solid var(--deap-accent);
    color: var(--deap-white);
}
.member-request #searchButton:hover { background: var(--deap-accent-hover); border-color: var(--deap-accent-hover); }
.member-request #searchButton:disabled { opacity: 0.55; }
.member-request #submit-btn,
.member-request #submit-btn:not(:disabled):not(.disabled) {
    background: var(--deap-primary);
    border: 1px solid var(--deap-primary);
    color: var(--deap-white);
    padding: 13px 28px;
    font-size: 15px;
}
.member-request #submit-btn:hover { background: #2c2c2c; border-color: #2c2c2c; }

/* === READ-ONLY STATE === */
/* DisableSearchFields() marks both entry inputs readonly and disables the select2 after a successful lookup */
.member-request .form-control[readonly],
.member-request .form-control[disabled] {
    background: #f4f4f0;
    color: var(--deap-gray-600);
    border-color: #e8e6de;
}

/* === SELECT2 === */
/* !important fights the inline width select2 writes for itself: DisableSearchFields() initialises it after the lookup returns, when it measures at almost zero */
.member-request .select2-container { width: 100% !important; }
/* Matched to .form-control, type scale included, or the dropdown sits shorter than its two neighbours on the same row */
.member-request .select2-container--default .select2-selection--single,
.member-request .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--deap-gray-200);
    border-radius: 8px;
    min-height: 50px;
    padding: 5px 8px;
    background: var(--deap-white);
}
.member-request .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    padding-left: 6px;
    color: var(--deap-gray-800);
    font-size: 15px;
}
.member-request .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }
.member-request .select2-container--default.select2-container--focus .select2-selection--single,
.member-request .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--deap-accent);
    box-shadow: 0 0 0 3px rgba(107,191,45,0.15);
}
/* Quarters (Gym Membership) and Months (Weight Watchers) are the only multi-selects */
.member-request .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--deap-gray-100);
    border: 1px solid var(--deap-gray-200);
    border-radius: 6px;
    color: var(--deap-gray-800);
    font-size: 13.5px;
    padding: 3px 9px;
}
.member-request .select2-container--default.select2-container--disabled .select2-selection--single {
    background: #f4f4f0;
    border-color: #e8e6de;
}

/* === READ-ONLY DISPLAY FIELDS (ScaffoldViewFor) === */
/* ScaffoldViewFor is not ScaffoldFor: it emits an unclassed label and a div.data-value, so it inherits none of login.css's field styling */
/* Both sizes are set here rather than in the type-scale block above, which would lose to these rules on source order */
.member-request label:not(.input-label) {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--deap-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
}
.member-request .data-value {
    font-size: 15px;
    color: var(--deap-gray-800);
    margin: 0 0 14px;
    padding: 10px 0 0;
    min-height: 24px;
}

/* === DATE PICKERS === */
/* login.css sets width: 100% on .form-control, which overrides the flex basis Bootstrap input groups need and drops the calendar addon below the field */
.member-request .input-group > .form-control {
    flex: 1 1 auto;
    width: 1%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.member-request .input-group-append .input-group-text,
.member-request .input-group-append .btn {
    border: 1px solid var(--deap-gray-200);
    border-left: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background: var(--deap-gray-100);
    color: var(--deap-gray-600);
}

/* === ALERTS === */
/* The entry hint and the Bicycle Helmet eligible-children banner are alert-info; "no reimbursements left" is alert-warning */
.member-request .alert { border-radius: 8px; font-size: 14px; line-height: 1.5; padding: 12px 15px; margin-bottom: 16px; }
.member-request .alert-info { background: #eef4f8; border: 1px solid #cfe0ea; color: #31607f; }
.member-request .alert-warning { background: #fdf8e8; border: 1px solid #f2e2b5; color: #7a5c12; }
/* The underlined AetnaID carries the insurance-card popover */
.member-request .alert-info u { font-weight: 700; cursor: help; }
.member-request #eligible-children-banner h5 { font-size: 13.5px; font-weight: 700; margin: 0 0 7px; }
.member-request #eligible-children-banner ul { margin: 0; }
.member-request #eligible-children-banner li { padding: 2px 0; }

/* === DIVIDER === */
.member-request hr { border-top: 1px solid var(--deap-gray-200); margin: 18px 0 16px; }

/* === UPLOAD CARD (bootstrap-fileinput 5.5.0, from CDN) === */
/* The vendor stylesheet loads AFTER this file: _LoginLayout renders the bundle before RenderSection("styles"). Source order only breaks ties, so every rule below keeps its .member-request prefix to win on specificity */
.member-request .card { border: 1px solid var(--deap-gray-200); border-radius: 8px; }
.member-request .card-header { padding: 11px 14px; }
.member-request .card-title { font-size: 14px; font-weight: 600; margin: 0; }
.member-request .card-body { padding: 14px; }

/* Stock, fileinput stacks three frames around one field - .file-preview is flattened so the drop zone is the only outline left */
.member-request .file-input .file-preview {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 10px;
}
/* This x clears the whole selection: it shows with zero files loaded and duplicates the Remove button the fileloaded / fileclear handlers already manage */
.member-request .file-input .file-preview > .close.fileinput-remove { display: none; }

/* 260px of empty is cut to 132px; the zone still grows with its thumbnails */
.member-request .file-input .file-drop-zone {
    border: 2px dashed var(--deap-gray-200);
    border-radius: 8px;
    background: #fbfbf9;
    min-height: 132px;
    margin: 0;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
}
/* .highlighted is a real dragover and .clickable is set only when the zone opens the picker - a plain :hover would promise a click target this configuration may not give */
.member-request .file-input .file-drop-zone.highlighted,
.member-request .file-input .file-drop-zone.clickable:hover {
    border-color: var(--deap-accent);
    background: #f6faf1;
}
/* Inline SVG rather than a bootstrap-icons glyph, whose codepoints move between CDN builds */
.member-request .file-input .file-drop-zone .file-drop-zone-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--deap-gray-400);
    padding: 40px 0 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7a9ab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 30px 30px;
}

/* === UPLOAD CAPTION BAR === */
.member-request .file-input .file-caption-main { margin: 0; }
/* Nothing can be typed into .file-caption, so it takes the [readonly] fill; font-size and line-height are pinned because they are half of the height the append buttons match */
.member-request .file-input .file-caption {
    border: 1px solid var(--deap-gray-200);
    border-radius: 8px 0 0 8px;
    background: #f4f4f0;
    padding: 13px 14px;
    height: auto;
    box-shadow: none;
    font-size: 15px;
    line-height: 1.5;
}
.member-request .file-input .file-caption.focus {
    border-color: var(--deap-accent);
    box-shadow: 0 0 0 3px rgba(107,191,45,0.15);
}
.member-request .file-input .file-caption-name { font-size: 15px; color: var(--deap-gray-400); }

/* NEVER set display here: fileinput keeps Remove, Cancel, Pause and Upload in the DOM and hides the unused ones with a class-based display: none that any .member-request rule outweighs */
/* Same box math as .file-caption so both ends of the bar compute to one height - change a value here and change it there too */
.member-request .file-input .input-group-append > .btn {
    border-radius: 0;
    font-size: 15px;
    line-height: 1.5;
    padding: 13px 18px;
    margin: 0;
    height: auto;
    white-space: nowrap;
}
/* The group renders as [Remove][Browse] and Remove is hidden until a file loads, so the right rounding belongs to the last child rather than to .btn-file by name */
.member-request .file-input .input-group-append > .btn:last-child { border-radius: 0 8px 8px 0; }
/* Outline-accent puts Browse in the same family as Search without competing with Submit, which owns --deap-primary */
.member-request .file-input .btn-file {
    border: 1px solid var(--deap-accent);
    background: var(--deap-white);
    color: #4d8a24;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.member-request .file-input .btn-file:hover {
    background: var(--deap-accent);
    border-color: var(--deap-accent);
    color: var(--deap-white);
}
.member-request .file-input .fileinput-remove-button {
    border: 1px solid var(--deap-gray-200);
    background: var(--deap-white);
    color: var(--deap-gray-600);
    font-weight: 600;
}
.member-request .file-input .fileinput-remove-button:hover { background: var(--deap-gray-100); color: var(--deap-primary); }

/* === LOADED FILES === */
/* The fileloaded handler appends a Title input into each frame, and nothing validates that Title, so a preview that loses its shape fails silently */
.member-request .file-input .file-preview-frame {
    border: 1px solid var(--deap-gray-200);
    border-radius: 8px;
    background: var(--deap-white);
    box-shadow: none;
    padding: 8px;
    margin: 6px;
}
.member-request .file-input .file-preview-frame:hover {
    border-color: var(--deap-gray-300);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.member-request .file-input .file-footer-caption { font-size: 11px; color: var(--deap-gray-400); padding-top: 6px; }
.member-request .file-input .file-preview .input-label { font-size: 11.5px; }
.member-request .file-input .file-preview .form-control { padding: 7px 10px; font-size: 13px; }

/* === SPINNER === */
/* Shown while the Reimbursement action is in flight */
.member-request .loading-spinner { color: var(--deap-accent); }

/* === CONFIRMATION SCREEN === */
/* Stays at 960px, unlike the two form screens: this is prose, and at 1280px its paragraphs would run about 1200px per line */
.member-request-confirm .confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f2f8ec;
    border: 2px solid #bcdfa0;
    color: #4d8a24;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px auto 14px;
}
.member-request-confirm .confirm-head {
    font-size: 21px;
    font-weight: 700;
    color: var(--deap-primary);
    margin: 0 0 18px;
    line-height: 1.45;
    text-align: center;
}
/* Left-aligned rather than centred: the live view centres everything, which is hard to read at three paragraphs. Sentences and their order are untouched */
.member-request-confirm .confirm-body { border-top: 1px solid var(--deap-gray-200); padding-top: 14px; margin-bottom: 18px; }
.member-request-confirm .confirm-body p { font-size: 15px; line-height: 1.65; color: var(--deap-gray-600); margin: 0 0 11px; }
.member-request-confirm .confirm-body p:last-child { margin-bottom: 0; }
/* The prose sits at gray-600, so the wrapped values step up in colour as well as weight or the emphasis reads as noise */
.member-request-confirm .confirm-body strong { font-weight: 600; color: var(--deap-gray-800); }
.member-request-confirm .confirm-sec {
    font-size: 13px;
    font-weight: 600;
    color: var(--deap-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 9px;
}
.member-request-confirm .confirm-details { border: 1px solid var(--deap-gray-200); border-radius: 8px; overflow: hidden; }
.member-request-confirm .confirm-details .row-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 11px 14px;
    border-bottom: 1px solid #f2f1ec;
}
.member-request-confirm .confirm-details .row-item:last-child { border-bottom: 0; }
/* The view on dev had these labels in <strong>; the emphasis comes back as hierarchy, with the value carrying the weight and the size */
.member-request-confirm .confirm-details .k { font-size: 13.5px; font-weight: 600; color: var(--deap-gray-600); }
.member-request-confirm .confirm-details .v { font-size: 15px; font-weight: 600; color: var(--deap-gray-800); text-align: right; }
.member-request-confirm .confirm-cta { display: flex; justify-content: center; margin-top: 18px; }
.member-request-confirm .confirm-cta .btn {
    border-radius: 8px;
    background: var(--deap-accent);
    border: 1px solid var(--deap-accent);
    color: var(--deap-white);
    padding: 12px 24px;
    font-size: 14.5px;
    font-weight: 600;
}
.member-request-confirm .confirm-cta .btn:hover { background: var(--deap-accent-hover); border-color: var(--deap-accent-hover); }

/* === RESPONSIVE === */
/* Mirrors the 640px breakpoint login.css already uses. .auth-card is width: 100% below its max-width, so the 1280px cap is already inert here */
@media (max-width: 640px) {
    .auth-card:has(.member-request) .auth-card-body { padding: 18px 20px 16px; }
    .member-request .page-title { font-size: 20px; }
    .member-request .entry-actions { margin-top: 8px; }
    .member-request .entry-actions .btn { flex: 1; }
    .member-request .file-input .file-drop-zone { min-height: 108px; padding: 14px 12px; }
    .member-request-confirm .confirm-head { font-size: 17px; }
    .member-request-confirm .confirm-details .row-item { flex-direction: column; gap: 2px; }
    .member-request-confirm .confirm-details .v { text-align: left; }
}