:root {
    --bs-orange: #FF5400;
    --bs-orange-rgb: rgb(255, 84, 0);
    --bg-page-color: #f6f8fa;
}

html, body {
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
    min-height: 100vh;
    overflow-x: hidden;
}

@font-face {
    font-family: font-signature;
    src: url(/fonts/segoesc.ttf);
}

#signature {
    font-family: font-signature !important;
    font-size: 24px;
    color: darkblue;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
    color: red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.bg-success {
    background-color: #28a745 !important;
}

.badge-danger {
    background-color: #E86D86 !important;
}

.btn-outline-primary, .badge-primary,
.border-primary, .btn-outline-primary, .list-group-item-primary, .table-primary, .badge-primary, .bg-primary.rounded-pill {
    background-color: var(--bs-primary) !important;
}

.btn-primary {
    background-color: var(--bs-input-color) !important;
    border: 1px solid var(--bs-input-color) !important;
}
#0069aa

.btn-primary:hover {
    background-color: rgba(var(--color-primary), 0.9) !important;
    border: 1px solid rgba(var(--color-primary), 0.9);
}

/* LOP-644: outlined secondary button paired with a solid .btn-primary (e.g. the
   Call / Edit-My-Loan buttons next to Text / Confirm). Bootstrap's
   .btn-outline-primary can't be used here because the rule above forces it to a
   solid primary background, so this is a dedicated class. Uses the theme's brand
   colour (--bs-input-color) so it matches the solid primary across tenants. */
.btn-outline-secondary-themed {
    background-color: #fff !important;
    border: 1px solid var(--bs-input-color) !important;
    color: var(--bs-input-color) !important;
}

.btn-outline-secondary-themed:hover {
    background-color: var(--bs-input-color) !important;
    color: #fff !important;
}

.text-success {
    color: #28a745 !important;
    background-color: transparent;
}

.text-primary {
    color: var(--bs-input-color) !important;
    background-color: transparent;
}

:root .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bs-primary) !important;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-pills .nav-link.active {
    background-color: var(--bg-nav-link-active);
}

.nav-pills .nav-link {
    color: var(--bg-nav-link-font-color) !important;
    font-weight: var(--bg-nav-link-font-weight);
    background-color: var(--bg-nav-link);
    border-right: 1px solid rgba(108, 117, 125,0.25);
    border-top: 1px solid rgba(108, 117, 125,0.25);
    border-bottom: 1px solid rgba(108, 117, 125,0.25);
    border-radius: 0 0;
}

.nav-pills .nav-link .subtext {
    /* LOP-1018: #888 = 3.16-3.54:1 (fails AA); #616161 passes 4.5:1 on white and the #f2f2f2 panels. */
    color: #616161 !important;
}

/* LOP-1018: Blazorise Black50 (#808080, 3.94:1) fails AA for body text; darken to a compliant muted gray. */
.text-black-50 {
    color: #616161 !important;
}

/* LOP-1018: icon-only edit/cancel actions render as real <button> (keyboard + SR accessible), styled naked to keep the icon look. */
.btn-icon-naked {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    line-height: 1;
    color: inherit !important;
    cursor: pointer;
}

/* LOP-1018: brand-primary text (#2a71d4) fails AA (4.5:1) on the light-blue tinted panels it sits on — the offer monthly-payment card (#eef3f9 → 4.26:1) and the phone-page "information is correct" promo-pill (#dee8f5 → 3.84:1). Darken to #1a5fbf (≥4.9:1 on both) — still clearly brand blue. */
.rmc-payment-amount,
.text-primary-aa {
    color: #1a5fbf !important;
}

.nav-pills .nav-link:first-of-type {
    border-left: 1px solid rgba(108, 117, 125,0.25);
}

/* LOP-785: the workflow progress bar is a status indicator, not navigation.
   The .nav-link gets cursor:pointer on :hover (Blazorise/Bootstrap), which makes
   the steps look clickable; force the default arrow in every interaction state so
   users don't expect to navigate between steps. !important beats the framework's
   higher-specificity :hover rule (same approach as the .nav-pills color rule above). */
.step-indicator__segments .nav-link,
.step-indicator__segments .nav-link:hover,
.step-indicator__segments .nav-link:focus,
.step-indicator__segments .nav-link:active {
    cursor: default !important;
}

/* LOP-785: give the header a bottom border styled like the progress bar's
   top/bottom border, so chrome-less pages (AA, soft landing, email verification,
   OTP) that have no progress bar still get a divider under the header. On pages
   that DO show the progress bar, the segment's own top border would double up
   with this one, so pull the progress bar up 1px to collapse them into a single
   line. */
.navbar-fixed-top {
    border-bottom: 1px solid rgba(108, 117, 125, 0.25);
}

.step-indicator__segments {
    margin-top: -1px;
}

/* On tablet/responsive widths the step descriptions wrap to different line
   counts, so the bordered segment pills end up unequal heights. The .nav (flex,
   justified) already stretches each nav-item to the tallest one; make the
   bordered .nav-link fill that height so every segment matches and the borders
   stay aligned. Scoped to #body-tab-desktop (the multi-segment Regional desktop
   bar) so the single-segment mobile bar and other product flows are untouched. */
#body-tab-desktop .nav-link {
    height: 100%;
}

/* The step icon is a fixed 38px circle, but its Bootstrap col-2 collapses to
   ~25px at tablet widths, so the circle overflows and slides under the label
   (measured at 800px). Give the icon a fixed track wide enough for the circle
   and let the label column take the rest; min-width:0 + nowrap keep the label
   wrapping inside its column instead of dropping under the icon. */
#body-tab-desktop .nav-link .row {
    flex-wrap: nowrap;
}

#body-tab-desktop .nav-link .col-2 {
    flex: 0 0 auto;
    width: 46px;
}

#body-tab-desktop .nav-link .col-10 {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
}

/* Keep the "Verify Code" button label on one line at the narrower tablet/mobile
   column widths instead of wrapping to two lines. */
.verify-code-btn {
    white-space: nowrap;
}


/*:root body {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-body-text-align: start;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: .75rem 0;
    background-color: ghostwhite;
}*/
.legal-holder {
    overflow: hidden;
    background-color: #f7f8f9;
    border: 1px solid #d8d8d8;
    padding: 15px 13px 10px;
    border-radius: 2px;
    margin: 0 0 70px 0;
}

@media only screen and (max-width: 600px) {
    .legal-holder {
        padding: 30px 33px 25px;
    }
}

.legal-holder .heading-area {
    overflow: hidden;
    margin: 0 0 24px;
    color: #595959;
    line-height: 16px;
    font-size: 13px;
    font-style: italic;
}

.legal-holder .heading-area p {
    margin: 0 0 5px;
}

.legal-holder .heading-area h2 {
    color: #006a9b;
    margin: 0 0 2px;
    font-size: 32px;
    font-weight: 600;
    font-style: normal;
}

.legal-holder .legal-scrollable-block {
    padding: 10px 0;
    margin: 0 0 31px;
    color: #595959;
    background: #fff;
    border: 1px solid #c9c9c9;
    font-size: 16px;
    font-weight: 300;
}

.legal-holder h3 {
    margin: 0 0 10px;
    line-height: 19px;
    font-size: 16px;
    font-weight: 300;
}

.legal-holder .legal-text {
    padding: 10px 20px;
}

@media only screen and (max-width: 600px) {
    .legal-holder .legal-text {
        padding: 20px 6px 6px 20px;
    }
}

.legal-holder .legal-text .section-title, .legal-holder .legal-text .section-title-caps {
    font-weight: bold;
    padding-right: .5em;
}

.legal-holder .legal-text .document-field {
    font-weight: bold;
    border-bottom: 2px solid;
    padding: 10px;
}

.legal-holder .legal-text .section-title-caps {
    text-transform: uppercase;
}

.legal-holder .legal-text h2 {
    padding: 10px 0px;
    font-size: 22px;
}

.legal-holder .legal-text ol[type="a"] {
    counter-reset: list;
}

.legal-holder .legal-text ol[type="a"] > li {
    list-style: none;
    position: relative;
}

.legal-holder .legal-text ol[type="a"] > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

.legal-holder .legal-text ol[type="a"].list-alpha-period > li:before {
    content: counter(list, lower-alpha) ". ";
}

.legal-holder .legal-text ol[type="a"].list-upper-alpha > li:before {
    content: counter(list, upper-alpha) ") ";
}

.legal-holder .text-callout {
    margin-top: 20px;
    font-size: 15px;
    font-style: italic;
    font-weight: 600;
}

.legal-holder .text-callout.important {
    color: #fc491c;
}

.left-border-primary {
    border-left: thick solid #0069AA;
}

.bottom-border-primary {
    border-bottom: thick solid orange !important;
}

:root .heading-black {
    color: black !important;
}

:root .heading-secondary {
    color: #6D6D6D !important;
}

.element-no-border-on-focus:focus
{
    outline: none;
}

.layout-background {
    background-color: var(--bg-header-color) !important;
}

.layout-background-SubHeader {
    background-color: var(--bg-sub-header-color) !important;
}

.layout-background-footer {
    background-color: var(--bg-footer-color) !important;
}

.product-legal-footer {
    line-height: 1.35;
}

.product-legal-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-top: 0.95rem;
}

/* LOP-1530 — the CCPA/CPRA opt-out icon that follows the "Your Privacy Choices" label.
   32x16 to match how Regional render it on regionalfinance.com (their footer serves CCPA.svg at that
   size), rather than the asset's natural 24x12 — the ask was for our footer to match their site exactly.
   Fixed pixels, not font-relative: a prescribed compliance mark should not scale with surrounding type.
   Deliberately NO background chip: their footer is the same dark navy (rgb(16, 43, 81)) and they show
   the icon plainly on it, so the blue half reading quietly against the background is their presentation,
   not a defect to correct. Nudged up because the glyph's optical centre sits above the text baseline. */
.privacy-choices-icon {
    width: 32px;
    height: 16px;
    margin-left: 0.35rem;
    vertical-align: -0.15em;
}

@media only screen and (max-width: 961px) {
    .card {
        width: 100% !important;
    }
}
@media only screen and (max-width: 1280px) {
    .card {
        width: 100% !important;
    }
}

.customButton-link {
    display: inline-block;
    color: white;
    background-color: var(--bs-input-color);
    text-decoration: none; /* Remove underline */
    border: 1px solid;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
    padding-y: 0.25rem;
    padding-x: 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.customButton-link:hover {
    background-color: #005E9D; /* Darker blue on hover */
    color: white;
}

.button-as-link:focus {
    outline: 2px solid #005E9D;
}

.input-elements-border {
    border: 1px solid #03416b;
}

.form-check-input:checked {
    background-color: var(--bs-input-color);
    border-color: var(--bs-input-color);
}

.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px #678fc7;
}

/* LOP-735 — compact checkbox disclosures (Regional): tighter line-height,
   left-aligned label, and the checkbox pulled in close to the text. Bootstrap's
   default 1.5em gutter is too wide for the small checkbox, leaving a big gap; we
   narrow it while keeping the float model so the checkbox stays vertically
   centered on the first line of text (via its default margin-top). */
/* LOP-735 — tighter line spacing for Regional checkbox disclosures (no Blazorise line-height attribute; reached via :has() since the Check class lands on the input). */
.form-check:has(> .regional-check) .form-check-label,
.form-check:has(> .regional-check) .form-check-label * {
    line-height: 1.25;
}

/* LOP-735/LOP-860 — lay the compact Regional disclosure checkbox + label out as a flex row. Bootstrap's float model drops the label below the box whenever the label is block/inline-block (e.g. the SSA consent label wraps its text in a d-flex Text), putting the text under the checkbox instead of beside it. Flex with align-items:flex-start keeps the box on the first text line, label beside it. */
.form-check:has(> .regional-check) {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding-left: 0;
}

.form-check > .form-check-input.regional-check {
    float: none;
    margin-left: 0;
}

.form-check:has(> .regional-check) > .form-check-label {
    flex: 1;
}

/* Enlarge the compact Regional disclosure checkbox at all widths — Blazorise Check has no responsive Size. flex:0 0 auto keeps the box square as a flex item (no shrink against the label). */
.form-check > .form-check-input.form-check-input-sm.regional-check {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.30rem;
}

/* Below lg, trim Bootstrap's 1rem inline-radio gap so Yes/No fit on one line in the narrow card column — the trailing margin after the last radio was tipping it onto a second line. */
@media (max-width: 991.98px) {
    .inline-radios-tight .form-check-inline {
        margin-right: 0.5rem;
    }
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px #678fc7;
}

/* Global button corner radius (~10px) per the Regional mockup spec (9.96px).
   Applied to all buttons for every customer. `:not(.rounded-pill)` preserves
   any intentional pill buttons; `!important` overrides Bootstrap's default
   `--bs-btn-border-radius` and the `.rounded` utility (Border.Rounded) some
   buttons still carry. */
.btn:not(.rounded-pill) {
    border-radius: 0.625rem !important;
}

.icon-circle-filled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* circle size */
    height: 30px;
    border-radius: 50%; /* makes it circular */
    background-color: var(--icon-filled-circle-color); /* light blue background */
}

.icon-circle-filled i {
    color: var(--icon-filled-icon-color); /* icon color */
}

.icon-circle-filled-tabs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; /* circle size */
    height: 38px;
    border-radius: 50%; /* makes it circular */
    border: 1px solid var(--icon-outline-circle-color);
}

.icon-circle-filled-tabs i {
    color: var(--icon-filled-icon-tabs-color); /* icon color */
}

.icon-circle-filled-disbursement {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px; /* circle size */
    height: 35px;
    border-radius: 50%; /* makes it circular */
    background-color: var(--icon-filled-circle-color); /* light blue background */
}

.icon-circle-filled-disbursement i {
    color: var(--icon-filled-icon-color); /* icon color */
}

.icon-outline-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; /* circle size */
    height: 38px;
    border-radius: 50%; /* makes it circular */
    border: 1px solid var(--icon-outline-circle-color);
}

.icon-outline-circle i {
    color: var(--icon-outline-icon-color); /* icon color */
}

.icon-outline-circle-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px; /* circle size */
    height: 45px;
    border-radius: 50%; /* makes it circular */
    border: 1px solid var(--icon-outline-circle-color);
}

.icon-outline-circle-mobile i {
    color: var(--icon-outline-icon-color); /* icon color */
}

.black-theme {
    --bs-primary: black;
    --bs-input-color: black;
    --bg-header-color: white;
    --bg-sub-header-color: #393939;
    --bg-footer-color: #393939;
    --bg-special-color: black;
    --icon-filled-icon-color: black;
    --icon-outline-icon-color: black;
    --icon-filled-circle-color: #EBEBEB;
    --icon-outline-circle-color: #EBEBEB;
    --icon-filled-icon-tabs-color: black;
    --icon-filled-circle-tabs-color: black;
    --bg-nav-link: #F8F9FA;
    --bg-nav-link-font-color: black;
    --bg-nav-link-active: #EBEBEB;
    --bg-nav-link-font-weight: bold;
}

.light-blue-theme {
    --bs-primary: #4EC9EE;
    --bs-input-color: #4EC9EE;
    --bg-header-color: #4EC9EE;
    --bg-sub-header-color: #5A6771;
    --bg-footer-color: #4EC9EE;
    --bg-special-color: #4EC9EE;
    --icon-filled-icon-color: #33B5E5;
    --icon-outline-icon-color: #33B5E5;
    --icon-filled-circle-color: #E6F7FF;
    --icon-outline-circle-color: #E6F7FF;
    --icon-filled-icon-tabs-color: white;
    --icon-filled-circle-tabs-color: #4EC9EE;
    --bg-nav-link: #F8F9FA;
    --bg-nav-link-font-color: #4EC9EE;
    --bg-nav-link-active: #4EC9EE;
    --bg-nav-link-font-weight: bold;
}

.blue-theme {
    --bs-primary: #2A71D4;
    --bs-input-color: #2A71D4;
    --bg-header-color: white;
    --bg-sub-header-color: #5A6771;
    --bg-footer-color: #102B5D;
    --bg-special-color: #2A71D4;
    --bg-page-color: #ffffff;
    --icon-filled-icon-color: #2A71D4;
    --icon-outline-icon-color: black;
    --icon-filled-circle-color: #F2F2F2;
    --icon-outline-circle-color: #2A71D4;
    --icon-filled-icon-tabs-color: black;
    --icon-filled-circle-tabs-color: white;
    --bg-nav-link: white;
    --bg-nav-link-font-color: black;
    --bg-nav-link-active: #F2F2F2;
    --bg-nav-link-font-weight: normal;
}

.orange-theme {
    --bs-primary: #EF6A00;
    --bs-input-color: #00397a;
    --bg-header-color: #2D3943;
    --bg-sub-header-color: #5A6771;
    --bg-footer-color: #2D3943;
    --bg-special-color: #005E9D;
    --icon-filled-icon-color: #005E9D;
    --icon-outline-icon-color: #005E9D;
    --icon-filled-circle-color: #EBEBEB;
    --icon-outline-circle-color: #F2F2F2;
    --icon-filled-icon-tabs-color: #FFFFFF;
    --icon-filled-circle-tabs-color: #005E9D;
    --bg-nav-link: #F8F9FA;
    --bg-nav-link-font-color: #00397a;
    --bg-nav-link-active: #EBEBEB;
    --bg-nav-link-font-weight: bold;
}

@media (max-width: 768px) {
    .img-cc-loan-disbursement {
        width: 35% !important;
    }
}

/* Desktop: override to be smaller than Is25 */
@media (min-width: 769px) {
    .img-cc-loan-disbursement {
        width: 18% !important;
    }
}

.logo-img {
    max-height: 35px;
    width: auto;
}

.mastercardlogo-img {
    max-height: 25px;
    width: auto;
}

.visacardlogo-img {
    max-height: 15px;
    width: auto;
}

.page-background {
    background-color: var(--bg-page-color);
}

/* Chrome / Edge / Safari */
.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

/* Firefox */
.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

/* IE (legacy) */
.form-range::-ms-thumb {
    background-color: var(--bs-primary);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--bs-primary) 40%, transparent);
}

.form-range::-webkit-slider-thumb:active {
    background-color: color-mix(in srgb, var(--bs-primary) 80%, white);
}

/* LOP-645: OTP split input — 6 individual digit boxes side by side */
.otp-input-container {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.otp-digit {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 0.625rem;
    padding: 0;
}

.otp-digit:focus {
    outline: none;
    box-shadow: 0 0 0 4px #678fc7;
}

.spinner-page {
    overflow: hidden;
    padding: 1.5rem;
}

.spinner-card {
    max-width: 560px;
    width: 90%;
}

@media (min-width: 768px) {
    .spinner-page {
        padding: 2.5rem;
    }
}

/* LOP-1368 screen 1 - the institution logo box on a "Search and choose your bank" result row.

   Global rather than a YodleeLinkSearchView.razor.css, because CSS isolation is not wired up in Apply.Web:
   _Layout.cshtml never loads the *.styles.css bundle, so a .razor.css file here is silently dead. Same reason
   AdverseActionsView keeps its overrides inline.

   The box is always drawn at a fixed size so the bank names stay aligned whether or not a logo turns up, and
   "flex: 0 0 auto" is what stops a long institution name squeezing it away. */
.yodlee-provider-logo {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .5rem;
    overflow: hidden;
    border-radius: .25rem;
    background-color: #e9ecef;
}

.yodlee-provider-logo-initial {
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    color: #495057;
}

/* Opaque and covering the whole box, so a logo that DOES load hides the initial underneath rather than sitting
   on top of a visible letter. When the img hides itself on error, the initial is simply revealed again. */
.yodlee-provider-logo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #fff;
}