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

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

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

.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.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
    font-size: 0.875rem;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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;
    }

.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."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* Shared claim-form section banner - gray background bar used to divide a claim form
   into labeled sections (e.g. "SECTION 1: CLAIMANT INFORMATION"). Used by multiple
   pages (Claim, Stepper), so it lives here globally instead of in per-page isolated css. */
.section-banner {
    background-color: #d3d3d3;
    font-size: 1.1em;
    font-weight: 600;
    padding: 0.2rem 0;
}

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

.required {
    color: red;
}

/* ═══ Stepper / claim-form "tile" styling (mirrors the NationalRealtors reference UI) ═══ */

/* Shared case caption / claim form title block (matches Login page's header),
   used atop Claim and the Stepper's Introduction step. */
.case-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

/* Simpler per-step header used on each individual Stepper step (matches the
   NCAA "FileNotice" title pattern: italic case caption + bold underlined title). */
.form-main-title {
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
    margin-bottom: 2rem;
}

/* Large bold case name header shown atop each claim/step section */
.case-header-title {
    font-size: 1.8em;
    color: #000000;
    margin-top: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

/* Bordered frame wrapping a section's fields */
.instruction-frame {
    border: 1px solid #bebaba;
    border-radius: 0.25rem;
    padding: 1rem;
}

/* Section title inside an instruction frame, e.g. "SECTION 1: CLAIMANT INFORMATION" */
.instruction-title {
    font-weight: bold;
    font-size: 1.3em;
    text-decoration: underline;
   /* text-align: center;*/
}

/* Roman-numeral subsection title, e.g. "I. GENERAL INSTRUCTIONS" / "IV. SUBMISSION..." */
.subsection-title {
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: underline;
}

/* Gray sub-section divider bar within a section, e.g. "NAME SECTION" */
.panel-heading {
    background-color: #dfdfdf;
    color: black;
    text-align: center;
    padding: 0.5rem;
    margin-top: 1.5rem;
    border-radius: 0.2rem;
}

/* Bold field labels */
.labelBoldWeight {
    font-weight: 600;
}

/* Vertical spacing between field rows within a form */
.rowformat {
    margin-bottom: 1rem;
}

/* Keep input boxes aligned across a row no matter the situation - whether one
   column's label wraps to multiple lines, or one field has a validation error
   (possibly a long one that wraps to several lines, e.g. the zip format message)
   and its row-sibling doesn't.

   These are two independent concerns that must NOT be coupled together:
   1. Label height must be equalized across a row so inputs start at the same Y
      position even when one label wraps and another doesn't. Labels are short,
      known, developer-authored strings, so a generous fixed min-height (~2 lines)
      handles this without needing to know a sibling's actual height.
   2. The validation message comes after the input, so its length/presence must
      never affect the input's position. It stays in normal document flow (so it
      can wrap to any number of lines without overlapping anything) and is simply
      allowed to make its own column - and therefore the whole row - taller. That's
      fine: the row pushing following content down together is expected; what must
      never happen is one column's input misaligning relative to its row-siblings. */
.rowformat .form-group > label {
    display: block;
    min-height: 2.5rem;
}

.rowformat .form-group .validation-message {
    display: block;
    min-height: 1.25rem;
}


/* Table header/row styling for detail/list style tables */
.tableHeaderFormattedText {
    font-weight: bold;
}

.tableRowFormattedText {
    vertical-align: middle;
}

.submit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.submit-overlay-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.submit-overlay-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
}