/* Darker focus ring for keyboard navigation (ADA visibility) - overrides Bootstrap default #c2dbfe-like ring */
:root {
  /* WCAG 1.4.11: default Bootstrap #dee2e6/~1.3:1 on white; #6c757d/~4.7:1 */
  --bs-border-color: #6c757d;

  /* Opaque: an alpha ring composites toward the page behind it and loses the contrast.
     rgba(29, 78, 216, 0.5) over #fff is 2.37:1, under the WCAG 1.4.11 3:1 floor. */
  --bs-focus-ring-color: #1d4ed8;
  --bs-focus-ring-opacity: 1;
}

/* Base .btn focus ring. Bootstrap declares --bs-btn-focus-box-shadow on .btn ITSELF
   (bootstrap.css, .btn block) as rgba(var(--bs-btn-focus-shadow-rgb), .5) with the alpha
   hardcoded, so a :root override is inert - a custom property set on the element beats one
   inherited from :root. It has to be redeclared at the same level. Site.css loads after
   bootstrap, so equal specificity plus later source order wins.
   Covers every stock button: Add row, Remove row, Remove file, Clear signature, Copy, and
   the Cancel/Confirm pair in both VerifyEmailSent modals. The datepicker variants use a
   more specific attribute selector and still win. */
.btn {
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem #1d4ed8;
}

/* Same trap as .btn above: Bootstrap declares each of these INSIDE the component rule
   (.accordion, .btn-close, .pagination), not :root, so a :root override never applies.
   The vendor value is rgba(13, 110, 253, 0.25), which composites to rgb(195, 219, 255)
   = 1.42:1 on white - a pale halo that is effectively no indicator at all. */
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem #1d4ed8;
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem #1d4ed8;
}

.pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem #1d4ed8;
}

/* Nav/pager links: high-contrast keyboard focus (WCAG) - visible on light and dark backgrounds */
.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.9), 0 0 0 0.35rem #1d4ed8;
}

/* Do NOT remove class="navbar-light" from the navbar in _Layout.cshtml. Bootstrap 5.3 dropped the
   class, so it looks like a Bootstrap 4 leftover, but this rule depends on it: it is what swaps the
   white-halo ring above (built for the dark hero) for a plain blue ring on the white navbar. The
   base rule sets outline: 0, so the box-shadow is the only focus indicator there is (WCAG 2.4.7). */
.navbar-light .nav-link:focus-visible {
  box-shadow: 0 0 0 0.2rem #1d4ed8;
}

/* Expanded top nav (lg+): keep each label on one line. Without nowrap, flex
   shrink wraps mid-phrase ("Important"/"Dates", "Submit Distribution"/"Election"). */
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    white-space: nowrap;
  }
}

/* Skip-navigation link: visually hidden until focused (Bootstrap .visually-hidden-focusable),
   then revealed as a strong navy chip so sighted keyboard users can see it (WCAG 2.4.7). */
#skip-to-main-content:focus {
  position: fixed;

  /* Sits BELOW the fixed-top navbar (79px tall) rather than inside it. The header band is
     crowded: the UserWay launcher is fixed at 13px with a 44x44 footprint (right edge 57px)
     and cannot be out-stacked - its wrapper is z-index 2147483647, the max 32-bit int - while
     the brand logo shifts horizontally with viewport width (x=225 at 1765px, x=247 at 889px).
     No fixed left value clears both at every width: the gap between them is 168px and the
     revealed chip is 191px. Dropping below the header removes the horizontal competition
     entirely, so this holds at any breakpoint, and lets the link keep the conventional
     top-left position. */
  top: 5.5rem;
  left: 0.75rem;
  z-index: 1080; /* above the .fixed-top navbar (Bootstrap z-index 1030) */
  width: auto;
  height: auto;
  padding: 0.625rem 1.25rem;
  background-color: #172145; /* navy chrome; white text ≈ 15.7:1 (WCAG 1.4.3) */
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  border-radius: 0.25rem;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8; /* matches nav-link focus ring */
}

/* Form controls: darker focus for inputs, select, radio, checkbox, range (WCAG contrast – overrides Bootstrap #86b7fe) */
.form-control:focus,
.form-select:focus {
  border-color: #1d4ed8;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8; /* matches nav/skip-link ring */
}

/* Invalid controls: MVC applies .input-validation-error to the CONTROL on a server postback and via
   jQuery unobtrusive validation's errorClass. Bootstrap's .is-invalid is added only by some client
   paths, so styling .is-invalid alone leaves most invalid states with no error affordance.
   Target the MVC class so every path renders identically. #dc3545 on white ≈ 3.9:1 (WCAG 1.4.11).
   Note .field-validation-error styles the MESSAGE element, not the control — see below. */
.form-control.input-validation-error,
.form-select.input-validation-error,
.form-check-input.input-validation-error {
  border-color: #dc3545;
}

.form-control.input-validation-error:focus,
.form-select.input-validation-error:focus,
.form-check-input.input-validation-error:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #dc3545; /* #dc3545 on white 3.9:1 */
}

.form-check-input:focus {
  border-color: #1d4ed8;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8;
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231d4ed8'/%3e%3c/svg%3e");

  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8;
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #1d4ed8;
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #1d4ed8;
}

.main-body {
  /* With body.d-flex.flex-column.min-vh-100 + flex-grow-1 on main, this stretches so the
     bottom border sits against the footer instead of floating mid-page at a fixed 49vh. */
  min-height: 0;
}

.bg-darkblue {
  background: linear-gradient(90deg, rgba(64, 92, 142, 1) 0%, rgba(34, 44, 97, 1) 50%, rgba(64, 92, 142, 1) 100%);
  color: white;
}

/* Footer matches darkened hero banner gradient (WCAG contrast work on .site-hero-banner.bg-darkblue). */
.site-footer {
  background: linear-gradient(90deg, rgba(24, 34, 70, 1) 0%, rgba(20, 30, 65, 1) 50%, rgba(24, 34, 70, 1) 100%);
  color: white;
}

.site-footer-columns {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.site-footer-copyright {
  background-color: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.35rem 0.75rem;
}

.site-footer-copyright-text {
  font-size: 0.7rem;
  line-height: 1.2;
}

/* WCAG 1.3.1: replace Layout spacer <br>s (item 1 — header/hero only) */
.site-hero-banner {
  /* was <br /><br /> above hero (measured ~48px to hero top) */
  margin-top: 48px;

  /* was Bootstrap p-5 (3rem) + inner <br /> (~21px) above title */
  padding: 3rem;
  padding-top: calc(3rem + 21px);
}

/* WCAG 1.4.11 + 1.4.3: darker hero so #db1a4f button stays >= 3:1; white label on button stays >= 4.5:1 */
.site-hero-banner.bg-darkblue {
  background: linear-gradient(90deg, rgba(24, 34, 70, 1) 0%, rgba(20, 30, 65, 1) 50%, rgba(24, 34, 70, 1) 100%);
}

.esign-block-summary {
  /* was <br /> between attestation text and signature fields (item 3) */
  margin-bottom: 21px;
}

/* Keep upload error icon on the same line as message text (item 4) */
.multi-file-upload-error-messages {
  flex: 1;
  min-width: 0;
}

.multi-file-upload-error-messages > div + div {
  margin-top: 0.25rem;
}

/* WCAG 1.4.3: Bootstrap secondary #6c757d gives white text only 4.69:1, barely over the
   4.5:1 AA floor. #495057 raises filled and outline secondary buttons to 8.2:1. */
.btn-secondary {
  --bs-btn-bg: #495057;
  --bs-btn-border-color: #495057;
  --bs-btn-hover-bg: #343a40;
  --bs-btn-hover-border-color: #343a40;
  --bs-btn-active-bg: #343a40;
  --bs-btn-active-border-color: #343a40;
  --bs-btn-disabled-bg: #495057;
  --bs-btn-disabled-border-color: #495057;
}

.btn-outline-secondary {
  --bs-btn-color: #495057;
  --bs-btn-border-color: #495057;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #495057;
  --bs-btn-hover-border-color: #495057;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #343a40;
  --bs-btn-active-border-color: #343a40;
  --bs-btn-disabled-color: #495057;
  --bs-btn-disabled-border-color: #495057;
}

.btn-americared {
  background-color: #db1a4f;
  color: white;
  border-color: #db1a4f;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(219, 26, 79, 0.2), 0 1px 2px rgba(219, 26, 79, 0.1);

  /* Subtle elevation for professional look */
}

/* Hover Effect - Color Inversion */
.btn-americared:hover,
.btn-americared:focus {
  background-color: white;
  color: #db1a4f;
  border-color: #db1a4f;
  box-shadow: 0 4px 8px rgba(219, 26, 79, 0.3), 0 2px 4px rgba(219, 26, 79, 0.2);
  transform: translateY(-1px);

  /* Slight lift on hover */
}

/* Focus State (keyboard tab) - Same contrast/reversal as hover + clear focus ring so keyboard matches mouse */
.btn-americared:focus-visible {
  background-color: white;
  color: #db1a4f;
  border-color: #db1a4f;
  outline: 0;
  box-shadow: 0 0 0 0.25rem #db1a4f, 0 4px 8px rgba(219, 26, 79, 0.3);
  transform: translateY(-1px);
}

/* Ripple Effect - CSS Only */

.btn-americared::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out;
  opacity: 0;
  pointer-events: none;
}

/* Active/Click State - Ripple Animation */

.btn-americared:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
  transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
}

/* Active State - Pressed Effect */
.btn-americared:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(219, 26, 79, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);

  /* Pressed down effect */
}

/* Hover Ripple Effect - Subtle glow on hover */

.btn-americared:hover::before,
.btn-americared:focus::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  animation: ripple-hover 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple-hover {
  0% {
    width: 0;
    height: 0;
    opacity: 0.3;
  }

  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

/* Disabled State - Maintains styling */
.btn-americared:disabled,
.btn-americared.disabled {
  background-color: #db1a4f;
  color: white;
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-americared:disabled:hover,
.btn-americared.disabled:hover,
.btn-americared:disabled:focus,
.btn-americared.disabled:focus {
  background-color: #db1a4f;
  color: white;
  transform: none;
  box-shadow: 0 2px 4px rgba(219, 26, 79, 0.2), 0 1px 2px rgba(219, 26, 79, 0.1);
}

/* Mobile Optimizations - Touch-friendly */
@media (max-width: 768px) {
  .btn-americared {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Faster transitions on mobile */
  }

  .btn-americared:active {
    transform: scale(0.98);

    /* Slight scale down on mobile for better touch feedback */
  }

  .btn-americared:active::after {
    width: 400px;
    height: 400px;

    /* Larger ripple on mobile for better visibility */
  }
}

::highlight(search-highlight) {
  background-color: yellow;
}

.signature-canvas {
  border: 1px solid #000;
  width: 100%;
  height: 200px;
  background-color: #f5f5f5;
}

.add-alignment {
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
}

.is-lawful {
  position: absolute;
  z-index: -1;
  background-color: red;
}

.fa-title-size-lg {
  font-size: 36px;
}

.fa-title-size {
  font-size: 28px;
}

.transparentBackground {
  background-color: rgba(0, 0, 0, 0.2);
}

.list-group-item:hover,
.list-group-item:focus {
  background-color: #f5f5f5;
}

/* Focus gets a ring, not just the hover tint: #f5f5f5 on white is ~1.04:1 and conveys
   nothing on its own. CourtDocuments renders its download links as list-group items, so
   this is that page's primary interaction. */
.list-group-item:focus-visible {
  background-color: #f5f5f5;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.35rem #1d4ed8;
}

.w-10 {
  width: 10%;
}

.borderedLeft15 {
  padding-left: 15px;
  padding-right: 15px;
  text-align: left;
  border: 1px solid;
}

.borderedCol25 {
  width: 25%;
  border: 1px solid;
}

.pb-100 {
  padding-bottom: 100px;
}

.formItemFitContent {
  position: relative;
  float: left;
  width: fit-content;
}

.validationFifteenNone {
  position: relative;
  top: 15px;
  display: none;
}

.collapsed:hover,
.collapsed:focus {
  background-color: #f5f5f5;

  /* background-image: linear-gradient(#bd0711, #db1a4f); */
}

.thumbnail {
  position: relative;
  z-index: 0;
}

.move-left {
  width: auto;
  box-shadow: none;
}

.thumbnail:hover,
.thumbnail:focus {
  background-color: transparent;
  z-index: 50;
}

.thumbnail span {
  /* CSS for enlarged image */
  position: absolute;
  background-color: lightyellow;
  padding: 5px;
  left: -1000px;
  border: 1px dashed gray;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail span img {
  /* CSS for enlarged image */
  border-width: 0;
  padding: 2px;
}

.thumbnail:hover span,
.thumbnail:focus span {
  /* CSS for enlarged image on hover */
  visibility: visible;
  top: 0;
  left: -500px; /* position where enlarged image should offset horizontally */
}

.info {
  height: 600px;
  width: 480px;
}

.mark,
mark {
  padding: 0;
  background-color: yellow;
}

@media (max-width: 992px) {
  .w-lg-100 {
    width: 100% !important;
  }
}

.grow {
  -moz-transition: height 0.5s;
  -o-transition: height 0.5s;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
  height: 0;
  overflow: hidden;
}

.settlementTooltip {
  display: inline;
}

.tooltip-inner {
  max-width: 50% !important;
}

.showactivationslipimage {
  width: 20px;
}

.activationslip {
  width: 26vw;
}

.btn-close-activation-slip {
  border: none;
  background-color: none;
}

a.disabled {
  /* Make the disabled links grayish */
  color: gray;

  /* And disable the pointer events */
  pointer-events: none;
}

.form-dropdown {
  width: 100%;
  height: 76%;
}

.ui-tooltip,
.arrow::after {
  background: black;
  border: 2px solid white;
}

.ui-tooltip {
  padding: 10px 20px;
  color: white;
  border-radius: 20px;
  font: bold 14px "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  box-shadow: 0 0 7px black;
}

.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}

.arrow.top {
  top: -16px;
  bottom: auto;
}

.arrow.left {
  left: 20%;
}

.arrow::after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top::after {
  bottom: -20px;
  top: auto;
}

.tooltip > .tooltip-inner {
  border: 1px solid;
  padding: 10px;
  max-width: 450px;
  text-align: left;
  opacity: 1 !important;
}

.tooltip > .tooltip-arrow {
  border-bottom-color: black;
}

.custom-file-upload {
  cursor: pointer;
}

.disabled {
  pointer-events: none; /* No cursor */
  background-color: #eee; /* Gray background */
}

input[readonly] {
  pointer-events: none; /* No cursor */
  background-color: #eee; /* Gray background */
}

form label {
  background-color: transparent;
}

.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
  background-color: transparent !important;
}

/* WCAG 3.3.2 — required-field marker.
   Driven off aria-required, not a hand-applied class, so the visible mark cannot drift out of sync
   with the programmatic required state. The .is-required escape hatch covers label-first layouts
   (radio groups, question headings) where no single input carries the state.
   ::before, deliberately, not ::after: Bootstrap owns .form-floating label::after for the label's
   background chip (see the rule directly above), and a leading mark also survives the label's
   `text-overflow: ellipsis` on narrow columns, where a trailing one is the first thing clipped.
   The asterisk carries the meaning; the colour is emphasis only, never the sole indicator (1.4.1).

   a11y/content-property-no-static-value is disabled below deliberately. That rule guards against
   putting meaning *only* into generated content — here that is exactly the intent: aria-required
   carries the state to assistive tech, the visible legend explains the glyph, and the asterisk must
   stay out of the accessible name so fields are not announced as "First Name star". */
/* stylelint-disable a11y/content-property-no-static-value */
.form-floating > [aria-required="true"] ~ label::before,
label.is-required::before,
.is-required > legend::before {
  content: "* ";
  color: #9b1b30; /* 8.1:1 on #fff */
  font-weight: 700;
}
/* stylelint-enable a11y/content-property-no-static-value */

/* Persistent format instruction shown under a control. Must stay visible at all times — 3.3.2 wants
   the instruction before the mistake, not only in the error message afterwards. */
.field-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #495057; /* 7.5:1 on #fff */
}

/* Explains the asterisk. Sits above the first required control in each form. */
.required-field-legend {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  color: #495057;
}

.legalrights {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 20px;
  text-align: center;
  margin-bottom: 10px;
  text-decoration: none;
  border: 1px solid;
  width: 85%;
}

/* WCAG 1.3.1 - "Your Rights and Options" column headers, hidden on screen but kept for
   assistive tech. The table's meaning is obvious to a sighted reader from the row headers and
   layout, so a second visible header row was not wanted; a screen reader still needs the
   column relationship to announce "Option: Do nothing".

   >>> TOGGLE <<<
   To SHOW the headers on screen, delete this one rule block. Nothing else needs to change -
   the th scope="col" cells are always rendered, and their text lives in Home.resx under
   Title_4_Header_1_Column_1 / _Column_2. Removing the legalrights-hidden-headers class from
   Views/Home/Partials/_InfoBlock.cshtml has the same effect.

   Uses the clip technique, NOT display:none or visibility:hidden - those remove the headers
   from the accessibility tree and would reintroduce the exact defect this fixes.
   Applied to the cells rather than the row so the table's box generation is left alone;
   column widths come from .borderedCol25 on the body cells, not from the header. */
.legalrights-hidden-headers thead th {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.info-card {
  width: 30%;
}

.accordion-header {
  text-indent: 16px;
}

.eCheckBox {
  display: flex; /* Use Flexbox */
  flex-direction: column; /* Stack the items vertically */
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
  width: 300px; /* Specify the width */
  height: 125px; /* Specify the height */
  border: solid 1.5px #eee; /* Add border to the box */
  padding: 10px; /* Add some padding */
  font-size: 0.75rem;
  cursor: pointer;
}

.payButton {
  width: 100%; /* Specify the width */
  height: 40px; /* Specify the height */
  border: 1px solid #fb8f00; /* Add border to the box */
  fill: #fb8f00;
  background-color: #fb8f00;
  color: white;
  padding: 10px; /* Add some padding */
  font-size: 0.875rem;
  font-weight: bold;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.paymentTitle {
  height: 5px;
  color: rgb(119, 119, 119);
  letter-spacing: 0.00938em;
  font-size: 1.2rem;
  font-weight: bold;
}

.mockpaymentbox {
  color: #163f6b;
  font-size: 12pt;
  font-weight: 600;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  padding-inline-start: 2px;
  padding-inline-end: 2px;
}

.mockpaymentmessage {
  font-size: 1rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.00938em;
}

.hiddenPaymentMethodValues {
  display: none;
}

.payButton:hover,
.payButton:focus {
  background-color: #b56516;
  border: 1px solid #b56516;
}

.shortFileUploadBox {
  width: 77%;
}

.spacedul li {
  margin-bottom: 5px;
}

.policy-iframe {
  width: 100%;
  height: 600px;
}

.times-new-roman {
  font-family: 'Times New Roman', Times, serif;
}

.text-indent {
  text-indent: 2em;
}

.float-left {
  position: relative;
  float: left;
}

.inline-field {
  position: relative;
  width: 250px !important; /* Define the width for the fields */
  display: inline-block; /* Ensure fields are inline */
  margin-right: 10px; /* Space between fields */
  float: left;
}

.inline-text {
  position: relative;
  margin-right: 10px; /* Space between text and fields */
  display: inline-block; /* Keep text inline with fields */
  vertical-align: middle; /* Align text with the middle of fields */
  float: left;
  width: max-content;
  white-space: nowrap;
}

@media (max-width: 576px) { /* Target screens smaller than 576px */
  .inline-text {
    white-space: normal; /* Allow word wrap on smaller screens */
    float: none; /* Optional: Remove float for better stacking */
    width: 100%;
  }
}

.row-line {
  display: flex; /* Ensure items are inline */
  align-items: start; /* Vertically align text and fields */
  gap: 10px; /* Add spacing between elements */
  margin-left: 10px;
}

.row-line-indent {
  padding-left: 22px;
}

.indent-adj {
  margin-left: 16px;
  margin-right: 17px;
}

.font-size-xx-large {
  font-size: xx-large;
}

.font-times-new-roman {
  font-family: "Times New Roman", Times, serif !important;
}

.language-flag {
  height: 30px;
}

.height-30 {
  height: 30px;
}

.iframe-pdf {
  height: 100%;
  width: 100%;
}

.iframe-pdf-container {
  height: 5000px;
  width: 100%;
  border: 1px solid #ccc;
}

.field-validation-valid,
.field-validation-error {
  min-height: 1.5em; /* Adjust height to fit your messages */
  display: block; /* Ensure it takes up space */
}

.list-group-item {
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words */
  overflow-wrap: anywhere; /* Ensure text breaks anywhere if necessary */
}

input[type="number"].no-spin {
  -moz-appearance: textfield; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none; /* Modern browsers */
}

/* Optional: Prevent margins from spinner buttons in some browsers */
input[type="number"].no-spin::-webkit-inner-spin-button,
input[type="number"].no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Ensure floating labels are visible when they should be */
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control.has-value ~ label {
  opacity: 1;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Ensure labels are visible for inputs with values on page load */
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: 1;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Loading Overlay - CSS-First Approach (Inspired by PrimeReact ProgressSpinner) */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 58, 64, 0.8); /* 20% transparent dark grey/blue */
  z-index: 9999; /* Below toasts (10001) and dialog (10000), above all other content */
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.loading-overlay.show {
  display: flex;
  opacity: 1;
}

.loading-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

/* ProgressSpinner - Similar to PrimeReact */
.loading-spinner {
  width: 50px;
  height: 50px;
  position: relative;
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
}

.loading-spinner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #87ceeb; /* Baby blue - darker sky blue */
  animation: spinner-rotate 0.6s linear infinite;
}

.loading-text {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  letter-spacing: 0.5px;
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-banner {
  width: 100%;
  padding: 12px;

  /* Match .site-hero-banner.bg-darkblue */
  background: linear-gradient(90deg, rgba(24, 34, 70, 1) 0%, rgba(20, 30, 65, 1) 50%, rgba(24, 34, 70, 1) 100%);
  color: white;
  text-align: center;
  display: none;
}

.loading-banner.visible {
  display: block;
}

/* Reduced motion (WCAG 2.2.2 / 2.3.3). Consolidated and placed LAST so it always wins
   on source order at equal specificity. Motion properties only - never opacity,
   transform, display or height: several of these components are hidden by default and
   revealed by a .show class, so redeclaring layout state here would fight that reveal. */
@media screen and (prefers-reduced-motion: reduce) {
  .btn-americared,
  .btn-americared::after,
  .btn-americared:active::after,
  .grow,
  .loading-overlay {
    transition: none;
  }

  .btn-americared:hover::before,
  .btn-americared:focus::before,
  .loading-spinner::before {
    animation: none;
  }
}