/* -------------------------------------------
   Beacon Funding Partner Portal Stylesheet
   ------------------------------------------- */

/* ============== Fonts ==============  */

/* Lato is self-hosted rather than loaded from fonts.googleapis.com. The Google
   stylesheet was a render-blocking request to a third-party origin (the single
   largest render-blocking entry in Lighthouse), and it delayed font discovery
   behind an extra DNS + TLS handshake. Serving the woff2 files from wwwroot puts
   them on the same connection as the rest of the app.

   The unicode-range splits are copied from the Google stylesheet so browsers
   still only download the subset a page actually needs. font-display: swap keeps
   text visible in the fallback face while the woff2 loads.

   The two normal weights are preloaded in App.razor. Those preloads use the same
   unfingerprinted paths as the url() references below - if you switch one to
   @Assets[...] you must switch both, or the font downloads twice. */

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lato-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lato-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/lato-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/lato-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lato-400-italic-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lato-400-italic-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/lato-700-italic-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/lato-700-italic-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============== Colors ==============  */

:root {
    --bfc-navy: #004762;
    --bfc-gold: #D89016;
    --bfc-green: #258460;
    --bfc-light: #f5f7f8;
    --bfc-teal: #468492;
    --bfc-red: #9D242B;
    --bfc-white-grey: #EBEBEB;
    --bfc-light-grey: #D9D9D9;
    --bfc-grey: #AAA;
    --bfc-charcoal: #444;
    --bfc-blue: #377FBF;
    --bfc-yellow: #F4BE49;
}

p.white,
span.white,
b.white,
a.white,
h1.white,
h2.white,
h3.white,
h4.white,
h5.white,
h6.white,
svg.white {
    color: #FFF;
}

div.white {
    background-color: #FFF;
}

.hover-white:hover {
    color: #FFF;
}

p.navy,
span.navy,
b.navy,
a.navy,
h1.navy,
h2.navy,
h3.navy,
h4.navy,
h5.navy,
h6.navy,
svg.navy,
hr.navy {
    color: var(--bfc-navy);
}

div.navy,
nav.navy {
    background-color: var(--bfc-navy);
}

.hover-navy:hover {
    color: var(--bfc-navy);
}

p.gold,
span.gold,
b.gold,
a.gold,
h1.gold,
h2.gold,
h3.gold,
h4.gold,
h5.gold,
h6.gold,
svg.gold {
    color: var(--bfc-gold);
}

div.gold {
    background-color: var(--bfc-gold);
}

.hover-gold:hover {
    color: var(--bfc-gold);
}

p.green,
span.green,
b.green,
a.green,
h1.green,
h2.green,
h3.green,
h4.green,
h5.green,
h6.green,
svg.green {
    color: var(--bfc-green);
}

div.green {
    background-color: var(--bfc-green);
}

.hover-green:hover {
    color: var(--bfc-green);
}

p.teal,
span.teal,
b.teal,
a.teal,
h1.teal,
h2.teal,
h3.teal,
h4.teal,
h5.teal,
h6.teal,
svg.teal {
    color: var(--bfc-teal);
}

div.teal {
    background-color: var(--bfc-teal);
}

.hover-teal:hover {
    color: var(--bfc-teal);
}

p.red,
span.red,
b.red,
a.red,
h1.red,
h2.red,
h3.red,
h4.red,
h5.red,
h6.red,
svg.red {
    color: var(--bfc-red);
}

div.red {
    background-color: var(--bfc-red);
}

.hover-red:hover {
    color: var(--bfc-red);
}

/* Over-max tooltip raised by js/amount-max.js. Global because Bootstrap appends the
   tooltip to <body>, outside the scoped-CSS attribute of the page that owns the input. */
.amount-max-tooltip .tooltip-inner {
    background-color: var(--bfc-red);
}

.amount-max-tooltip .tooltip-arrow::before {
    border-top-color: var(--bfc-red);
}

p.white-grey,
span.white-grey,
b.white-grey,
a.white-grey,
h1.white-grey,
h2.white-grey,
h3.white-grey,
h4.white-grey,
h5.white-grey,
h6.white-grey,
svg.white-grey {
    color: var(--bfc-white-grey);
}

div.white-grey {
    background-color: var(--bfc-white-grey);
}

.hover-white-grey:hover {
    color: var(--bfc-white-grey);
}

p.light-grey,
span.light-grey,
b.light-grey,
a.light-grey,
h1.light-grey,
h2.light-grey,
h3.light-grey,
h4.light-grey,
h5.light-grey,
h6.light-grey,
svg.light-grey {
    color: var(--bfc-light-grey);
}

div.light-grey {
    background-color: var(--bfc-light-grey);
}

.hover-light-grey:hover {
    color: var(--bfc-light-grey);
}

p.grey,
span.grey,
b.grey,
a.grey,
h1.grey,
h2.grey,
h3.grey,
h4.grey,
h5.grey,
h6.grey,
svg.grey {
    color: var(--bfc-grey);
}

div.grey {
    background-color: var(--bfc-grey);
}

.hover-grey:hover {
    color: var(--bfc-grey);
}

p.charcoal,
span.charcoal,
b.charcoal,
a.charcoal,
h1.charcoal,
h2.charcoal,
h3.charcoal,
h4.charcoal,
h5.charcoal,
h6.charcoal,
svg.charcoal {
    color: var(--bfc-charcoal);
}

div.charcoal {
    background-color: var(--bfc-charcoal);
}

.hover-charcoal:hover {
    color: var(--bfc-charcoal);
}

p.black,
span.black,
b.black,
a.black,
h1.black,
h2.black,
h3.black,
h4.black,
h5.black,
h6.black,
svg.black {
    color: #000;
}

div.black {
    background-color: #000;
}

.hover-black:hover {
    color: #000;
}

p.yellow,
span.yellow,
b.yellow,
a.yellow,
h1.yellow,
h2.yellow,
h3.yellow,
h4.yellow,
h5.yellow,
h6.yellow,
svg.yellow {
    color: var(--bfc-yellow);
}

div.yellow {
    background-color: var(--bfc-yellow);
}

.hover-yellow:hover {
    color: var(--bfc-yellow);
}

a, .btn-link {
    color: var(--bfc-blue);
}

/* ============== General Styles ==============  */

html {
    font-size: 16px;
}

#main {
    background-color: var(--bfc-light-grey);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

/* ============== Typography ============== */


html, body {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.bold {
    font-weight: bold;
}

/* ============== Buttons ============== */

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.bfc-btn {
    border: 1px solid;
    border-radius: 0.3rem;
    font-size: 16px;
    min-height: 45px;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .bfc-btn.small {
        font-size: 14px;
        margin-bottom: 5px;
        min-height: 25px;
        padding: 5px 10px;
    }

    .bfc-btn:hover {
        text-decoration: none;
    }

    .bfc-btn.gold {
        background-color: var(--bfc-gold);
        border-color: var(--bfc-gold);
        color: #FFF;
    }

        .bfc-btn.gold:hover {
            background-color: var(--bfc-green);
            border-color: var(--bfc-green);
        }

    .bfc-btn.green {
        background-color: var(--bfc-green);
        border-color: var(--bfc-green);
        color: #FFF;
    }

        .bfc-btn.green:hover {
            background-color: var(--bfc-blue);
            border-color: var(--bfc-blue);
        }

    .bfc-btn.teal {
        background-color: var(--bfc-teal);
        border-color: var(--bfc-teal);
        color: #FFF;
    }

        .bfc-btn.teal:hover {
            background-color: var(--bfc-teal);
            border-color: var(--bfc-teal);
        }

    .bfc-btn.navy {
        background-color: var(--bfc-navy);
        border-color: var(--bfc-navy);
        color: #FFF;
    }

        .bfc-btn.navy:hover {
            background-color: var(--bfc-green);
            border-color: var(--bfc-green);
        }

    .bfc-btn.ghost {
        background-color: #FFF;
        border-color: var(--bfc-navy);
        color: var(--bfc-navy);
    }

        .bfc-btn.ghost:hover {
            background-color: var(--bfc-blue);
            border-color: var(--bfc-blue);
            color: #FFF;
        }

    .bfc-btn.disabled,
    .bfc-btn[disabled],
    .bfc-btn[aria-disabled="true"] {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none; /* prevent clicks */
        filter: grayscale(10%);
    }

/* ============== Phone Link Styles ============== */

/* Phone numbers rendered as tel: links should read like plain text, not garish
   blue underlined links, while still being tappable on mobile. */
.bfc-phone-link {
    color: inherit;
    text-decoration: none;
}

    .bfc-phone-link:hover,
    .bfc-phone-link:focus {
        color: var(--bfc-navy);
        text-decoration: none;
    }

/* ============== Form Styles ============== */
/* Branded focus state */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--bfc-navy);
    box-shadow: 0 0 0 0.2rem rgba(0, 71, 103, 0.25);
}


/* ============== Card Styles ============== */

.bfc-card {
    background-color: #FFF;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    width: 100%;
    position: relative;
}

.bfc-card.card-auto-height {
    height: auto;
}

.bfc-card-title {
    font-size: 20px;
    font-weight: bold;
}

.bfc-card-sub-title {
    font-size: 1.25rem;
}

/* Home page action link cards (Financing Calculator, Refer a Friend, Request EFC) */
.action-link-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none;
    color: inherit;
}

.action-link-card:hover {
    text-decoration: none;
}

.action-card-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.action-card-text {
    display: flex;
    flex-direction: column;
}

.action-card-title {
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0;
}

.action-card-byline {
    margin: 0.25rem 0 0;
    color: var(--bfc-grey, #6c757d);
}

/* Note shown in the Impersonate modal when the employee's results are territory-scoped. */
#impersonateTerritoryNote {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--bfc-grey, #6c757d);
}

/* Small devices (landscape phones, 576px and up) - sm */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) - md */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) - lg */
@media (min-width: 992px) {
    .bfc-card.card-auto-height {
        height: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) - xl */
@media (min-width: 1200px) {

}

/* Extra Extra large devices (large desktops, 1400px and up) - xxl */
@media (min-width: 1400px) {
}