: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 {
    color: #888888 !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;
}

@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.2;
}

.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: #407BBF;
    --bs-input-color: #407BBF;
    --bg-header-color: white;
    --bg-sub-header-color: #5A6771;
    --bg-footer-color: #102B5D;
    --bg-special-color: #407BBF;
    --bg-page-color: #ffffff;
    --icon-filled-icon-color: #2A71D4;
    --icon-outline-icon-color: black;
    --icon-filled-circle-color: #F2F2F2;
    --icon-outline-circle-color: #407BBF;
    --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);
}

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

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

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