/* Customer authentication. Brand channels come from the installation's color.php. */
body:has(.bank-login) > .scroll-top { display: none; }
.bank-login {
    --login-accent: hsl(var(--base-h, 214), var(--base-s, 74%), var(--base-l, 33%));
    --login-second: hsl(var(--base-two-h, 214), var(--base-two-s, 48%), var(--base-two-l, 22%));
    --login-tint: hsla(var(--base-h, 214), var(--base-s, 74%), var(--base-l, 33%), .07);
    --login-focus: hsla(var(--base-h, 214), var(--base-s, 74%), var(--base-l, 33%), .18);
    --login-ink: #172230;
    --login-muted: #657180;
    display: grid;
    grid-template-columns: minmax(350px, .9fr) minmax(0, 1.1fr);
    min-height: 100vh;
    min-height: 100svh;
    background: #fff;
    color: var(--login-ink);
    font-size: 14px;
    line-height: 1.5;
}
.bank-login *, .bank-login *::before, .bank-login *::after { box-sizing: border-box; }
.bank-login a { text-decoration: none; }
.bank-login button, .bank-login input { font-family: inherit; }
.bank-login h1, .bank-login h2, .bank-login h3 { font-family: inherit; }
.bank-login__story { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 46px clamp(32px, 4.5vw, 76px) 34px; overflow: hidden; isolation: isolate; background: var(--login-accent); color: var(--login-brand-ink, #fff); border-radius: 0; }
.bank-login__story::before { content: ''; position: absolute; inset: 0 0 auto; height: 8px; background: var(--login-second); }
.bank-login__story::after { content: ''; position: absolute; z-index: -1; inset: auto -120px -260px auto; width: 520px; height: 520px; transform: rotate(38deg); background: var(--login-second); opacity: .16; }
.bank-login__story-brand { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 650; letter-spacing: -.35px; }
.bank-login__brand-symbol { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid currentColor; font-size: 23px; }
.bank-login__story-copy { max-width: 460px; margin-top: clamp(64px, 11vh, 118px); }
.bank-login__eyebrow { margin: 0 0 20px; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; opacity: .78; }
.bank-login__story-copy h1 { max-width: 10ch; margin: 0 0 24px; color: inherit; font-size: clamp(42px, 4.2vw, 66px); font-weight: 500; line-height: 1.06; letter-spacing: -2px; }
.bank-login__story-copy > p:last-child { max-width: 310px; margin: 0; font-size: 14px; line-height: 1.85; opacity: .82; }
.bank-login__art { width: 100%; max-width: 480px; margin: auto 0; padding-block: 28px; color: inherit; }
.bank-login__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.bank-login__art-grid { fill: none; stroke: currentColor; stroke-width: .6; opacity: .13; }
.bank-login__art-block { fill: var(--login-accent); stroke: currentColor; stroke-width: 1.2; }
.bank-login__art-block--back { fill: var(--login-second); stroke: none; opacity: .5; }
.bank-login__art-line { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .75; }
.bank-login__art-accent { fill: none; stroke: currentColor; stroke-width: 2; }
.bank-login__story-services { display: flex; flex-wrap: wrap; border-block: 1px solid currentColor; padding-block: 16px; gap: 10px 24px; font-size: 11px; font-weight: 500; }
.bank-login__story-services span + span::before { content: '/'; margin-right: 24px; opacity: .5; }
.bank-login__story-footer { margin: 20px 0 0; font-size: 10px; opacity: .7; }
.bank-login__panel { display: flex; flex-direction: column; min-width: 0; padding: 42px clamp(28px, 4.5vw, 76px) 26px; }
.bank-login__topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.bank-login__logo { display: inline-flex; align-items: center; max-width: 170px; min-width: 0; }
.bank-login__logo img { max-width: 100%; max-height: 46px; width: auto; object-fit: contain; }
.bank-login .bank-login__home { display: flex; align-items: center; gap: 7px; flex-shrink: 0; color: var(--login-muted); font-size: 11px; font-weight: 500; }
.bank-login__home i { font-size: 16px; }
.bank-login__form-wrap { width: 100%; max-width: 420px; margin: auto; padding: 70px 0 64px; }
.bank-login__heading { margin-bottom: 34px; border-top: 3px solid var(--login-accent); padding-top: 24px; }
.bank-login__heading h2 { margin: 0 0 12px; color: var(--login-ink); font-size: 34px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; }
.bank-login__heading p { margin: 0; color: var(--login-muted); font-size: 13px; line-height: 1.7; }
.bank-login .bank-login__field { margin: 0 0 22px; min-width: 0; }
.bank-login .bank-login__field .form-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--login-ink); }
.bank-login .bank-login__field .form-label.required::after { content: none; }
.bank-login__input-wrap { position: relative; }
.bank-login__input-wrap > i { position: absolute; top: 16px; left: 14px; font-size: 19px; color: #83909d; pointer-events: none; }
.bank-login .bank-login__input-wrap .form--control { display: block; width: 100%; height: 52px; padding: 14px 44px; border: 1px solid #cfd6df; border-radius: 2px; background: #fff; color: var(--login-ink); font-size: 14px; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.bank-login .bank-login__input-wrap .form--control:hover { border-color: #9daab9; }
.bank-login .bank-login__input-wrap .form--control:focus { outline: none; border-color: var(--login-accent); box-shadow: 0 0 0 3px var(--login-focus); }
.bank-login .bank-login__input-wrap .form--control[aria-invalid=true] { border-color: #b93636; }
.bank-login .bank-login__input-wrap .form--control[readonly] { background: #f6f8fa; }
.bank-login .bank-login__password-toggle { position: absolute; display: grid; place-items: center; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--login-muted); font-size: 20px; cursor: pointer; }
.bank-login .bank-login__password-toggle[hidden] { display: none; }
.bank-login .bank-login__password-toggle:hover { background: var(--login-tint); color: var(--login-accent); }
.bank-login__error { margin: 7px 0 0; color: #a82b2b; font-size: 12px; }
.bank-login__captcha:empty { display: none; }
.bank-login__captcha .row { margin-inline: 0; }
.bank-login__captcha .row > * { padding-inline: 0; }
.bank-login__captcha img { max-width: 100%; }
.bank-login .bank-login__captcha .form--control { border: 1px solid #cfd6df; border-radius: 2px; background: #fff; color: var(--login-ink); }
.bank-login .bank-login__captcha .form-label { color: var(--login-ink); font-size: 12px; }
.bank-login__options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 26px; }
.bank-login .bank-login__remember { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--login-muted); font-size: 11px; font-weight: 400; cursor: pointer; }
.bank-login__remember input, .bank-login__agreement input { position: static; appearance: auto; width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--login-accent); cursor: pointer; }
.bank-login .bank-login__options > a { color: var(--login-accent); font-size: 11px; font-weight: 600; }
.bank-login .bank-login__submit { display: flex; align-items: center; justify-content: center; position: relative; gap: 12px; width: 100%; min-height: 52px; padding: 14px 42px; border: 1px solid var(--login-accent); border-radius: 2px; background: var(--login-accent); color: var(--login-brand-ink, #fff); font-size: 13px; font-weight: 600; box-shadow: none; cursor: pointer; transition: filter .15s; }
.bank-login__submit > i { position: absolute; right: 18px; font-size: 21px; }
.bank-login .bank-login__submit:hover { filter: brightness(.93); }
.bank-login .bank-login__submit:disabled { cursor: not-allowed; opacity: .55; }
.bank-login__register { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid #e3e7ec; text-align: center; color: var(--login-muted); font-size: 12px; line-height: 1.8; }
.bank-login .bank-login__register a { margin-left: 4px; color: var(--login-accent); font-weight: 600; }
.bank-login__security { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; color: #737f8e; font-size: 10px; }
.bank-login__security i { font-size: 15px; }
.bank-login a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bank-login a:focus-visible, .bank-login button:focus-visible, .bank-login input[type=checkbox]:focus-visible { outline: 2px solid var(--login-accent); outline-offset: 4px; }
.bank-login .bank-login__social .social_login__wrapper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bank-login .bank-login__social .social_login__link { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 13px; border: 1px solid #cfd6df; border-radius: 2px; background: #fff; color: var(--login-ink); font-size: 12px; line-height: 1.5; }
.bank-login .bank-login__social .social_login__link:hover { background: var(--login-tint); border-color: var(--login-accent); }
.bank-login .bank-login__social .social_login__link span { display: inline-flex; margin: 0; }
.bank-login .bank-login__social .social_login__link img { width: 18px; height: 18px; }
.bank-login .bank-login__social .auth-divide { margin: 24px 0; font-size: 10px; color: var(--login-muted); }
.bank-login .bank-login__social .auth-divide::after { background: #e3e7ec; }
.bank-login .bank-login__social .auth-divide span { padding-inline: 14px; background: #fff; color: var(--login-muted); }
.bank-login--register .bank-login__form-wrap { max-width: 560px; padding-block: 46px; }
.bank-login--register .bank-login__heading { margin-bottom: 26px; }
.bank-login__fieldset { display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
.bank-login__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.bank-login__field--full { grid-column: 1 / -1; }
.bank-login__notice { display: flex; gap: 10px; align-items: center; margin: 0 0 24px; padding: 16px; border-left: 3px solid var(--login-accent); background: var(--login-tint); color: var(--login-ink); font-size: 13px; }
.bank-login__agreement { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 25px; color: var(--login-muted); font-size: 11px; line-height: 1.8; }
.bank-login__agreement input { margin-top: 3px; }
.bank-login__agreement label { margin: 0; font-size: inherit; font-weight: 400; }
.bank-login__agreement a { color: var(--login-accent); text-decoration: underline; text-underline-offset: 2px; }
.bank-login__fieldset:disabled .bank-login__fields { opacity: .65; }
.bank-auth-modal .modal-content { border: 1px solid #dbe1e8; border-radius: 2px; background: #fff; color: #172230; }
.bank-auth-modal .modal-header, .bank-auth-modal .modal-footer { padding: 20px 24px; border-color: #e3e7ec; }
.bank-auth-modal .modal-body { padding: 24px; font-size: 14px; }
.bank-auth-modal .modal-title { font-family: inherit; font-size: 18px; }
.bank-login__dialog-close { padding: 4px; border: 0; border-radius: 0; background: transparent; font-size: 22px; }
.bank-login__dialog-primary, .bank-login__dialog-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 20px; border: 1px solid #cfd6df; border-radius: 2px; color: #172230; background: #fff; font-size: 12px; font-weight: 600; }
.bank-login__dialog-primary { border-color: hsl(var(--base-h), var(--base-s), var(--base-l)); background: hsl(var(--base-h), var(--base-s), var(--base-l)); color: var(--login-brand-ink, #fff); }
@media (min-width: 1600px) { .bank-login__form-wrap { max-width: 440px; } .bank-login__story-copy h1 { font-size: 72px; } }
@media (max-width: 1199px) { .bank-login__story { padding-inline: 32px; } .bank-login__panel { padding-inline: 32px; } .bank-login__story-copy h1 { font-size: 47px; } }
@media (max-width: 991px) { .bank-login { display: block; border-top: 5px solid var(--login-accent); } .bank-login__story { display: none; } .bank-login__panel { min-height: calc(100svh - 5px); padding: 30px 40px 24px; } .bank-login__form-wrap { padding-block: 65px; } }
@media (max-width: 575px) { .bank-login__panel { padding: 26px 22px 22px; } .bank-login__logo { max-width: 140px; } .bank-login__topbar { gap: 12px; } .bank-login .bank-login__home { font-size: 10px; } .bank-login__form-wrap, .bank-login--register .bank-login__form-wrap { padding-block: 48px 40px; } .bank-login__heading h2 { font-size: 31px; } .bank-login__fields { grid-template-columns: minmax(0, 1fr); } .bank-login__heading { margin-bottom: 28px; } .bank-login__options { gap: 8px; } .bank-login .bank-login__remember, .bank-login .bank-login__options > a { font-size: 10px; } }
@media (max-width: 359px) { .bank-login__panel { padding-inline: 18px; } .bank-login__logo { max-width: 120px; } .bank-login .bank-login__home { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .bank-login *, .bank-login *::before, .bank-login *::after { transition: none !important; } }