/* =========================================================================
   App stylesheet — unified design system
   -------------------------------------------------------------------------
   One token contract powers everything: base utilities, custom dropdowns,
   choices.js restyle, and Bootstrap form-control overrides. Load AFTER
   Bootstrap so overrides win.

   Architecture
   ─────────────────────────────────────────────────────────────────────────
     1   Tokens (color, surface, type, radius, shadow, motion, field shape)
     2   Variants — [data-cr-tone], [data-cr-density], [data-cr-slot]
     3   Base elements (html, body, focusable defaults)
     4   Layout primitives (.content, .sidebar, scrollable wrappers)
     5   Pillbox tags, soft badges, status circles, brand-domain colors
     6   Search input, modal/table chrome, navigation arrows
     7   Custom dropdowns (.dropend-*, .ds-dropdown-*)
     8   Dropzone, project card, grid item
     9   HTMX, scrollbars
    10   Animations & keyframes
    11   View switcher
    12   Choices.js — wrapper field + core restyle
    13   Bootstrap form-control / form-select / input-group overrides
    14   Responsive

   Naming
   ─────────────────────────────────────────────────────────────────────────
     --cr-*    public tokens used by every component
     --r-*     radius scale          --sh-*    shadow scale
     --t-*     duration scale        --ease    base curve

   ========================================================================= */

[x-cloak] { display: none !important; }

/* =========================================================================
   1 · TOKENS
   ========================================================================= */
:root {
  /* — Neutrals (cool-default; warm via [data-cr-tone="warm"]) ———————— */
  --cr-bg:            #F2F4F6;
  --cr-surface:       #ffffff;
  --cr-surface-2:     #F2F4F6;
  --cr-surface-3:     #f2f2f3;
  --cr-border:        #e5e8eb;
  --cr-border-2:      #D1D5DB;
  --cr-border-strong: #9CA3AF;

  --cr-text:          #111827;
  --cr-text-2:        #374151;
  --cr-muted:         #6B7280;
  --cr-placeholder:   #9CA3AF;
  --cr-paper:         #f6f1e8;

  /* — Brand ———————————————————————————————————————————————————————— */
  --cr-primary:       #1F2937;
  --cr-primary-deep:  #111827;
  --cr-primary-soft:  rgba(31, 41, 55, 0.08);
  --cr-primary-ink:   #ffffff;

  /* Secondary is a *fill* colour — pale gold, always paired with dark ink.
     --cr-secondary-deep stays the ink/border tone for text on light surfaces. */
  --cr-secondary:     #ffdeb1;
  --cr-secondary-deep:#dba35a;
  --cr-secondary-soft:rgba(255, 222, 177, 0.35);

  --cr-tertiary:      #31316A;

  /* Brand teal — DSM's outward-facing identity (landing page, auth screens,
     transactional email, subscription). The product chrome is slate
     (--cr-primary); this is the mark. --cr-save is the same colour, so a
     palette change moves both together.                                    */
  --cr-brand:         #116E81;

  /* — Semantic ———————————————————————————————————————————————————— */
  --cr-info:          #2361ce;
  --cr-success:       #10B981;
  --cr-warning:       #FBA918;
  --cr-danger:        #E11D48;
  --cr-info-soft:     rgba(35, 97, 206, 0.10);
  --cr-success-soft:  rgba(16, 185, 129, 0.12);
  --cr-warning-soft:  rgba(251, 169, 24, 0.14);
  --cr-danger-soft:   rgba(225, 29, 72, 0.10);

  /* Ink on tint — text that has to stay legible sitting on a --*-soft ground.
     Every one of these was previously a hand-picked hex re-typed at each call
     site (three different ambers were in circulation for "warning"), so they
     are derived here instead: darken the accent until it clears AA on its own
     tint, and a palette change carries through on its own. The mix ratios are
     tuned to land on the literals that were already in use.                 */
  --cr-info-ink:      color-mix(in srgb, var(--cr-info)    80%, #000);
  --cr-success-ink:   color-mix(in srgb, var(--cr-success) 65%, #000);
  --cr-warning-ink:   color-mix(in srgb, var(--cr-warning) 48%, #000);
  --cr-danger-ink:    color-mix(in srgb, var(--cr-danger)  70%, #000);
  --cr-brand-ink:     color-mix(in srgb, var(--cr-brand)   62%, #000);

  /* — Domain (kept for back-compat) ————————————————————————————————— */
  /* Xero's own brand blue, so a "posted to Xero" marker is recognisable as
     Xero at a glance rather than reading as one more app status colour. */
  --cr-xero:          #13B5EA;
  --cr-client:        #30a0c5;
  --cr-supplier:      #d6a330;
  --cr-project:       #1a759f;
  --cr-system:        #184e77;

  /* — Save / positive-action (btn-success + .save_colour) ——————————————
     Deep teal. White ink clears AA (5.9:1); the semantic green --cr-success
     is left alone for status badges, alerts and validation states.        */
  --cr-save:          var(--cr-brand);
  --cr-save-hover:    #0F5C6E;
  --cr-save-active:   #0C4A59;
  --cr-save-ink:      #ffffff;
  --cr-save-ring:     color-mix(in srgb, var(--cr-brand) 40%, transparent);

  /* — Type ————————————————————————————————————————————————————————— */
  --cr-font-sans:     'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cr-font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — Radius scale ————————————————————————————————————————————————— */
  --r-xs:   0.25rem;        /* 4px — soft badges, dots */
  --r-sm:   0.375rem;       /* 6px — chips */
  --r-md:   0.5rem;         /* 8px — fields */
  --r-lg:   0.75rem;        /* 12px — cards, dropdowns */
  --r-xl:   1rem;           /* 16px — large containers */
  --r-pill: 999px;

  /* — Shadow scale ————————————————————————————————————————————————— */
  --sh-xs:  0 1px 2px 0 rgba(17, 24, 39, 0.04);
  --sh-sm:  0 1px 2px 0 rgba(17, 24, 39, 0.07);
  --sh-md:  0 4px 12px -4px rgba(17, 24, 39, 0.10),
            0 2px 4px  -2px rgba(17, 24, 39, 0.06);
  --sh-lg:  0 12px 32px -8px rgba(17, 24, 39, 0.16),
            0 4px 12px  -4px rgba(17, 24, 39, 0.08);
  --sh-pop: 0 16px 48px -12px rgba(17, 24, 39, 0.18),
            0 4px 16px  -4px rgba(17, 24, 39, 0.08),
            0 0 0 1px rgba(17, 24, 39, 0.04);

  /* — Focus ———————————————————————————————————————————————————————— */
  --cr-focus-border:  #4d6689;
  --cr-focus-ring:    0 0 0 3px rgba(31, 41, 55, 0.18);

  /* — Motion ——————————————————————————————————————————————————————— */
  --ease:       cubic-bezier(.2, .7, .2, 1);
  --ease-out:   cubic-bezier(.34, 1.56, .64, 1);
  --t-fast:     120ms;
  --t-base:     180ms;
  --t-slow:     320ms;

  /* — Field shape (shared by choices.js + form-control) —————————————— */
  --cr-radius:        var(--r-md);
  --cr-radius-chip:   var(--r-sm);
  --cr-radius-row:    var(--r-sm);
  --cr-border-w:      1px;
  --cr-pad-y:         0.5rem;
  --cr-pad-x:         0.875rem;
  --cr-row-pad-y:     0.5rem;
  --cr-row-pad-x:     0.75rem;
  --cr-min-h:         2.5rem;
  --cr-chip-pad-y:    0.125rem;
  --cr-chip-pad-x:    0.5rem;
  --cr-font-size:     0.875rem;
  --cr-font-size-sm:  0.75rem;
  --cr-gap:           0.375rem;
  --cr-icon-size:     1rem;
  --cr-icon-gap:      0.625rem;

  /* Field content floors — the minimum a labelled field may shrink to, so the
     value is never the thing squeezed out of a narrow row (see .lbl below).
     Written in `ch` — the advance of a figure in the field's own font — plus
     the field's two paddings, so they follow --cr-font-size instead of being
     pixel constants that rot the next time the type scale moves.
     9ch is "10,000.00"; 14ch is "12 Mar 2027" with slack. A select's value is
     chosen rather than composed and its dropdown opens at full width to read
     the rest, so it floors far lower and hands the slack back to the label.
     Override per field (or per input-group, since custom properties inherit)
     with --fld-min. */
  --cr-fld-min-num:    calc(9ch  + var(--cr-pad-x) * 2);
  --cr-fld-min-text:   calc(14ch + var(--cr-pad-x) * 2);
  --cr-fld-min-select: calc(5ch  + var(--cr-pad-x) * 2);

  /* Aliases the choices.js section still references */
  --cr-anim-dur:      var(--t-base);
  --cr-anim-ease:     var(--ease);
  --cr-anim-from-y:   -6px;
  --cr-anim-from-s:   1;
  --cr-shadow-pop:    var(--sh-pop);

  /* — Legacy (kept; do not extend) —————————————————————————————————— */
  --light-blue-highlight-color: #eaf4f4;
  --light-gray-color:           var(--cr-border);
  --lighter-gray-color:         var(--cr-surface-2);
}

/* =========================================================================
   2 · VARIANTS
   ========================================================================= */
/* Density — affects every cr-* component. Cycled from the profile dropdown
   (#density-switcher), persisted in localStorage['cr-density'] and stamped on
   <html> before first paint. "cosy" is the default, i.e. no attribute. ------ */
[data-cr-density="compact"] {
  --cr-pad-y:      0.3125rem; --cr-pad-x:      0.625rem;
  --cr-row-pad-y:  0.375rem;  --cr-row-pad-x:  0.625rem;
  --cr-min-h:      2rem;      --cr-font-size:  0.8125rem;
  --cr-chip-pad-y: 0.0625rem; --cr-chip-pad-x: 0.5rem;
  --cr-icon-size:  0.9375rem;
}
[data-cr-density="roomy"] {
  --cr-pad-y:      0.6875rem; --cr-pad-x:      1rem;
  --cr-row-pad-y:  0.75rem;   --cr-row-pad-x:  0.875rem;
  --cr-min-h:      3rem;      --cr-font-size:  1rem;
  --cr-chip-pad-y: 0.1875rem; --cr-chip-pad-x: 0.625rem;
  --cr-icon-size:  1.125rem;
}

/* Tone — swap entire neutral palette; brand colors unchanged ----------- */
[data-cr-tone="warm"] {
  --cr-bg:            #f5f1e9;
  --cr-surface:       #ffffff;
  --cr-surface-2:     #f5f2ec;
  --cr-surface-3:     #ebe5d8;
  --cr-border:        #ebe5d8;
  --cr-border-2:      #d6cdbd;
  --cr-border-strong: #b6ac96;
  --cr-text:          #1a1612;
  --cr-text-2:        #2c2620;
  --cr-muted:         #6b6358;
  --cr-placeholder:   #a59c8c;
  --cr-primary-soft:  color-mix(in srgb, var(--cr-primary) 10%, #f5f2ec);
  --cr-focus-border:  color-mix(in srgb, var(--cr-primary) 65%, #6b6358);
  --sh-md:  0 4px 12px -4px rgba(76, 50, 22, 0.10),
            0 2px 4px  -2px rgba(76, 50, 22, 0.06);
  --sh-lg:  0 12px 32px -8px rgba(76, 50, 22, 0.18),
            0 4px 12px  -4px rgba(76, 50, 22, 0.10);
  --sh-pop: 0 16px 48px -12px rgba(76, 50, 22, 0.20),
            0 4px 16px  -4px rgba(76, 50, 22, 0.10),
            0 0 0 1px rgba(76, 50, 22, 0.05);
}

body[data-cr-tone="cool"],
[data-cr-tone="cool"] body {
  background:
    radial-gradient(1200px 600px at 15% -5%, #ffeed6 0%, transparent 55%),
    radial-gradient(700px 400px at 50% 110%, #F9FAFB 0%, transparent 60%),
    var(--cr-bg);
}
body[data-cr-tone="warm"],
[data-cr-tone="warm"] body {
  background:
    radial-gradient(1200px 600px at 15% -5%, #fbe7d2 0%, transparent 55%),
    radial-gradient(700px 400px at 50% 110%, #f3eadb 0%, transparent 60%),
    var(--cr-bg);
  color: var(--cr-text);
}

/* Prepend-slot style — filled (default) / ghost / plain ---------------- */
[data-cr-slot="plain"] .input-group-text {
  background: transparent;
  box-shadow: none !important;
  color: var(--cr-muted);
}
[data-cr-slot="plain"] .input-group > .input-group-text:not(:last-child),
[data-cr-slot="plain"] .input-group > .input-group-text:not(:first-child) {
  box-shadow: none !important;
}
[data-cr-slot="plain"] .input-group > .input-group-text + .form-control,
[data-cr-slot="plain"] .input-group > .input-group-text + .form-select,
[data-cr-slot="plain"] .input-group > .input-group-text + textarea.form-control {
  padding-left: 0;
}
[data-cr-slot="ghost"] .input-group-text {
  background: transparent;
  color: var(--cr-muted);
}

/* =========================================================================
   3 · BASE ELEMENTS
   ========================================================================= */
html {
  font-size: 15px;
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: var(--cr-font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cr-text-2);
  background-color: var(--cr-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bare checkboxes only — .form-check-input keeps Bootstrap's own sizing and
   optical-centering margin (this selector must not outrank it). */
input[type="checkbox"]:not(.form-check-input) {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0;
  vertical-align: middle;
  accent-color: var(--cr-primary);
}

::placeholder {
  color: var(--cr-placeholder) !important;
  opacity: 1;
}

::selection {
  background: color-mix(in srgb, var(--cr-primary) 18%, transparent);
  color: var(--cr-text);
}

/* =========================================================================
   4 · LAYOUT PRIMITIVES
   ========================================================================= */
.cursor-pointer { cursor: pointer; }

.absolutely-centered {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.no-shadow      { box-shadow: none !important; }
.shadow-danger  { box-shadow: 0 0 0 3px var(--cr-danger-soft); }
.shadow-warning { box-shadow: 0 0 0 3px var(--cr-warning-soft); }

.placeholder-text {
  color: var(--cr-placeholder) !important;
  opacity: 1;
}

.fixed-width-input-group { width: 7.5rem; }

.horizontal-line {
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--cr-border);
  display: inline-block;
  margin: 0 0.625rem;
}

.highlighted-container {
  position: relative;
  border: 1px solid var(--cr-border);
  border-radius: var(--r-lg);
  background-color: var(--cr-surface-2);
  min-height: 2.5rem;
  padding: 1.25rem;
  margin: 1.25rem 0;
  width: 100%;
}

.floating-container-label {
  position: absolute;
  top: -0.625rem;
  left: 0.625rem;
  background-color: var(--cr-surface);
  padding: 0 0.625rem;
  border-radius: var(--r-xs);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cr-text);
  letter-spacing: 0.01em;
}

.content {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

#main-content {
  flex: 1 1 auto;
  min-height: 0;
  /* Always leave a little breathing room below page content so the last
     element never sits flush against the viewport bottom — including after
     HTMX boosted swaps, which replace this element and re-apply this rule. */
  padding-bottom: 2rem;
}

.nav-footer {
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
  padding: 0.625rem 0;
}

.button-group {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.button-text-hover {
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: gap var(--t-base) var(--ease);
}
.button-text-hover:hover { gap: 0.375rem; }

.button-text-hover .button-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  transition: max-width var(--t-slow) var(--ease),
              opacity   var(--t-base) var(--ease);
}
.button-text-hover:hover .button-text {
  max-width: 13.75rem;
  opacity: 1;
}

.nav-footer img { transition: opacity var(--t-slow) var(--ease); }
.nav-footer:has(.button-text-hover:hover) img { opacity: 0; }

.parent .show-hover {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0s steps(1, end);
}
.parent:hover .show-hover {
  max-height: 31.25rem;
  transition: max-height var(--t-slow) var(--ease);
}

/* -------------------------------------------------------------------------
   Unstyled button — bare reset for <button>/<a role="button"> wrappers
   ------------------------------------------------------------------------- */
.unstyled-button {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.unstyled-button:focus { outline: none; }
.unstyled-button:focus-visible {
  outline: none;
  box-shadow: var(--cr-focus-ring);
  border-radius: var(--r-sm);
}
.unstyled-button:disabled,
.unstyled-button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* -------------------------------------------------------------------------
   Action toolbar — the icon-button row inside the "Actions" card
   Each wrapper carries data-action to set its semantic tint (or none for
   neutral gray). Tint drives both the icon color and the hover state.
   ------------------------------------------------------------------------- */
#buttons-flex {
  container-type: inline-size;
  gap: 0.375rem;
  align-items: center;
  flex-wrap: nowrap;
}
#buttons-flex .alert.alert-light {
  --action-tint: var(--cr-muted);

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 3.375rem;
  aspect-ratio: 1;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--action-tint);
  transition:
    background-color var(--t-base) var(--ease),
    border-color     var(--t-base) var(--ease),
    transform        var(--t-base) var(--ease),
    box-shadow       var(--t-base) var(--ease);
}
#buttons-flex .alert.alert-light:hover {
  background: color-mix(in srgb, var(--action-tint) 12%, transparent);
  border-color: color-mix(in srgb, var(--action-tint) 28%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--sh-xs);
}
#buttons-flex .alert.alert-light:active {
  transform: translateY(0);
  box-shadow: none;
}
#buttons-flex .alert.alert-light:has(button[disabled]),
#buttons-flex .alert.alert-light:has(.disabled) {
  opacity: 0.4;
  pointer-events: none;
}

#buttons-flex .alert.alert-light .unstyled-button,
#buttons-flex .alert.alert-light .btn.unstyled-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  border-radius: inherit;
}
#buttons-flex .alert.alert-light .unstyled-button:focus-visible,
#buttons-flex .alert.alert-light .btn.unstyled-button:focus-visible {
  box-shadow: none;
}
#buttons-flex .alert.alert-light:focus-within {
  box-shadow: var(--cr-focus-ring);
}

#buttons-flex .button-icon {
  font-size: clamp(0.875rem, 5cqi, 1.40625rem);
  line-height: 1;
  color: inherit;
  transition: transform var(--t-fast) var(--ease);
}
#buttons-flex .alert.alert-light:hover .button-icon { transform: scale(1.08); }

/* Semantic tints ------------------------------------------------------- */
/* Hierarchy here comes from fill, not from fading. Save sits in a tinted
   chip; every other button is a plain icon on bare background, tinted only
   where it carries meaning (delete). Nothing optional is dimmed — reduced
   opacity in this toolbar means disabled, and only that. */
#buttons-flex .alert.alert-light[data-action="delete"]  { --action-tint: var(--cr-danger); }
#buttons-flex .alert.alert-light[data-action="save"]    { --action-tint: var(--cr-save); }
#buttons-flex .alert.alert-light[data-action="upload"]  { margin-left: auto !important; }

/* Save is filled at rest so it carries the weight; delete keeps only its
   red tint and otherwise behaves like every other button in the row. ---- */
#buttons-flex .alert.alert-light[data-action="save"] {
  background: color-mix(in srgb, var(--action-tint) 10%, transparent);
}
#buttons-flex .alert.alert-light[data-action="save"]:hover {
  background: color-mix(in srgb, var(--action-tint) 20%, transparent);
  border-color: color-mix(in srgb, var(--action-tint) 40%, transparent);
}

/* Save button keeps its inline spinner sized to fit the chip, and takes the
   chip's own tint so the two can never drift apart ---------------------- */
#buttons-flex #save-button-spinner {
  width: clamp(1rem, 5cqi, 1.6875rem);
  height: clamp(1rem, 5cqi, 1.6875rem);
  color: var(--action-tint);
}

/* =========================================================================
   5 · TAGS, BADGES, CIRCLES, BRAND DOMAIN COLORS
   ========================================================================= */
.fixed-alerts {
  position: fixed;
  top: 5.625rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  width: 90%;
  max-width: 37.5rem;
  pointer-events: none;
}
.fixed-alerts .alert {
  pointer-events: all;
  margin-bottom: 0.625rem;
}

/* Tag container - for compound tag layouts */
.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag-item {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  background: var(--cr-surface-2);
  color: var(--cr-text-2);
  transition: width var(--t-slow) var(--ease);
}
.tag-name { white-space: nowrap; }
.tag-edit-button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-left: 0.3125rem;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity var(--t-base) var(--ease), width var(--t-base) var(--ease);
  color: var(--cr-muted);
}
.tag-item:hover .tag-edit-button {
  opacity: 1;
  width: auto;
}

/* Pillbox tag — semantic */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--r-xs);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tag-pending {
  color: var(--cr-text-2);
  background-color: var(--cr-surface-2);
  border: 1px solid var(--cr-border-2);
}
.tag-success {
  color: var(--cr-success-ink);
  background-color: var(--cr-success-soft);
  border: 1px solid color-mix(in srgb, var(--cr-success) 40%, transparent);
}
.tag-fail {
  color: var(--cr-danger-ink);
  background-color: var(--cr-danger-soft);
  border: 1px solid color-mix(in srgb, var(--cr-danger) 40%, transparent);
}

/* Soft badges — frosted glass pills, semantic dark text ----------------
   One knob per variant: --badge-accent. Fill, edge and ink are all derived
   from it, so a new variant is a single line and can never drift out of step
   with its own palette. --badge-fill/--badge-edge exist only because pale
   accents (amber, gold) need a heavier mix than saturated ones to tint at
   all — the same reason .alert carries --alert-tint. */
.badge.badge-soft-primary,
.badge.badge-soft-info,
.badge.badge-soft-warning,
.badge.badge-soft-success,
.badge.badge-soft-danger,
.badge.badge-soft-secondary {
  --badge-accent: var(--cr-muted);
  --badge-fill:   16%;
  --badge-edge:   28%;
  --badge-ink:    color-mix(in srgb, var(--badge-accent) 60%, #000);

  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  border: 1px solid color-mix(in srgb, var(--badge-accent) var(--badge-edge), transparent);
  background: color-mix(in srgb, var(--badge-accent) var(--badge-fill), rgba(255, 255, 255, 0.6));
  color: var(--badge-ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--sh-xs);
}
.badge.badge-soft-primary { --badge-accent: var(--cr-info);    --badge-fill: 18%; --badge-edge: 30%; --badge-ink: var(--cr-info-ink); }
.badge.badge-soft-info    { --badge-accent: var(--cr-brand);   --badge-fill: 20%; --badge-edge: 30%; --badge-ink: var(--cr-brand-ink); }
.badge.badge-soft-warning { --badge-accent: var(--cr-warning); --badge-fill: 26%; --badge-edge: 40%; --badge-ink: var(--cr-warning-ink); }
.badge.badge-soft-success { --badge-accent: var(--cr-success); --badge-fill: 20%; --badge-edge: 32%; --badge-ink: var(--cr-success-ink); }
.badge.badge-soft-danger  { --badge-accent: var(--cr-danger);  --badge-fill: 18%; --badge-edge: 32%; --badge-ink: var(--cr-danger-ink); }
.badge.badge-soft-secondary { /* the defaults above */ }

.badge-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
  margin-right: 0.3125rem;
}

/* Brand-domain backgrounds (used in legacy components) */
.client_colour   { background: var(--cr-client) !important; }
.supplier_colour { background: var(--cr-supplier) !important; }
.text-supplier   { color: var(--cr-supplier) !important; }
.text-client     { color: var(--cr-client) !important; }
/* Brand mark on a light ground — the auth screens' page titles. Replaces
   seven copies of style="color:#116E81". The standalone marketing documents
   (landing page, About Us) can't read this token and keep their own --teal. */
.text-brand      { color: var(--cr-brand) !important; }
.shadow-client   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-client) 25%, transparent); }
.shadow-supplier { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-supplier) 25%, transparent); }
.project_colour  { background: var(--cr-project) !important; }
.system_colour   { background: var(--cr-system) !important; }
/* Save action — same treatment as .btn-success, but wins over it when both
   classes sit on the same element (hence the !important). ---------------- */
.save_colour {
  background: var(--cr-save) !important;
  border-color: var(--cr-save) !important;
  color: var(--cr-save-ink) !important;
}
.save_colour:hover {
  background: var(--cr-save-hover) !important;
  border-color: var(--cr-save-hover) !important;
  color: var(--cr-save-ink) !important;
}
.save_colour:active,
.save_colour.active {
  background: var(--cr-save-active) !important;
  border-color: var(--cr-save-active) !important;
}
.save_colour:focus-visible {
  box-shadow: 0 0 0 0.18rem var(--cr-save-ring) !important;
}
.select_colour   { background: var(--cr-muted) !important; color: var(--cr-primary-ink); }
.primary_colour  { background: var(--cr-info) !important; color: var(--cr-primary-ink); }

/* Status circles — minimal ring, no double-shadow ---------------------- */
.circle {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: inline-block;
  margin: 0.5rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent),
              var(--sh-xs);
}
.circle-primary   { background-color: var(--cr-info);      color: var(--cr-info); }
.circle-secondary { background-color: var(--cr-muted);     color: var(--cr-muted); }
.circle-success   { background-color: var(--cr-success);   color: var(--cr-success); }
.circle-danger    { background-color: var(--cr-danger);    color: var(--cr-danger); }
.circle-warning   { background-color: var(--cr-warning);   color: var(--cr-warning); }
.circle-info      { background-color: #17a2b8;             color: #17a2b8; }
.circle-light     { background-color: var(--cr-surface-2); color: var(--cr-border-strong); }
.circle-dark      { background-color: var(--cr-primary);   color: var(--cr-primary); }
.circle-yellow    { background-color: var(--cr-secondary); color: var(--cr-secondary-deep); }
.circle-default   { background-color: var(--cr-brand);      color: var(--cr-brand); }

/* =========================================================================
   6 · SEARCH, MODAL, TABLE, NAV
   ========================================================================= */
.search-group {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 16.875rem;
  line-height: 1.75;
}

.search-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--cr-border-2);
  border-radius: var(--r-md);
  background-color: var(--cr-surface);
  color: var(--cr-text);
  font-size: var(--cr-font-size);
  font-family: inherit;
  outline: none;
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
.search-input::placeholder { color: var(--cr-placeholder); }
.search-input:hover  { border-color: var(--cr-border-strong); }
.search-input:focus  {
  border-color: var(--cr-focus-border);
  box-shadow: var(--cr-focus-ring);
}

.search-icon {
  position: absolute;
  left: 1rem;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  color: var(--cr-placeholder);
  cursor: pointer;
}

.modal-header,
.modal-footer { border: 0; }

/* SweetAlert2 — align popup, buttons, and states to app tokens -------- */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  background: color-mix(in srgb, var(--cr-primary-deep) 34%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.swal2-popup {
  border: 1px solid var(--cr-border);
  border-radius: var(--r-xl);
  background: var(--cr-surface);
  color: var(--cr-text);
  box-shadow: var(--sh-pop);
  padding: 1.25rem;
}

.swal2-title {
  color: var(--cr-text);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
}

.swal2-html-container {
  color: var(--cr-text-2);
  font-size: var(--cr-font-size);
  line-height: 1.5;
}

.swal2-icon {
  margin-top: 0.25rem;
  margin-bottom: 0.375rem;
}
.swal2-icon.swal2-success,
.swal2-icon.swal2-success [class^="swal2-success-line"],
.swal2-icon.swal2-success .swal2-success-ring { color: var(--cr-success) !important; border-color: color-mix(in srgb, var(--cr-success) 45%, transparent) !important; }
.swal2-icon.swal2-error,
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] { color: var(--cr-danger) !important; border-color: color-mix(in srgb, var(--cr-danger) 45%, transparent) !important; }
.swal2-icon.swal2-warning { color: var(--cr-warning) !important; border-color: color-mix(in srgb, var(--cr-warning) 45%, transparent) !important; }
.swal2-icon.swal2-info,
.swal2-icon.swal2-question { color: var(--cr-info) !important; border-color: color-mix(in srgb, var(--cr-info) 45%, transparent) !important; }

.swal2-actions {
  gap: 0.5rem;
  margin-top: 1rem;
}

.swal2-actions .swal2-styled {
  margin: 0;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  padding: 0.5rem 0.875rem;
  min-height: 2.5rem;
  font-family: inherit;
  font-size: var(--cr-font-size);
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-fast) var(--ease);
}
.swal2-actions .swal2-styled:focus,
.swal2-actions .swal2-styled:focus-visible {
  box-shadow: var(--cr-focus-ring) !important;
  outline: 0;
}

.swal2-confirm.swal2-styled {
  background: var(--cr-primary);
  border-color: var(--cr-primary);
  color: var(--cr-primary-ink);
}
.swal2-confirm.swal2-styled:hover {
  background: var(--cr-primary-deep);
  border-color: var(--cr-primary-deep);
  transform: translateY(-1px);
}

/* Destructive confirm — opt in with customClass.confirmButton: 'swal2-danger' */
.swal2-confirm.swal2-styled.swal2-danger {
  background: var(--cr-danger) !important;
  border-color: var(--cr-danger) !important;
  color: var(--cr-primary-ink) !important;
}
.swal2-confirm.swal2-styled.swal2-danger:hover {
  background: color-mix(in srgb, var(--cr-danger) 86%, #000) !important;
  border-color: color-mix(in srgb, var(--cr-danger) 86%, #000) !important;
  transform: translateY(-1px);
}

.swal2-cancel.swal2-styled {
  background: var(--cr-surface-2) !important;
  border-color: var(--cr-border-2) !important;
  color: var(--cr-text) !important;
}
.swal2-cancel.swal2-styled:hover {
  background: var(--cr-surface-3) !important;
  border-color: var(--cr-border-strong) !important;
}

.swal2-deny.swal2-styled {
  background: var(--cr-danger-soft);
  border-color: color-mix(in srgb, var(--cr-danger) 36%, transparent);
  color: var(--cr-danger-ink);
}
.swal2-deny.swal2-styled:hover {
  background: color-mix(in srgb, var(--cr-danger) 18%, var(--cr-surface));
  border-color: color-mix(in srgb, var(--cr-danger) 52%, transparent);
}

.swal2-popup.swal2-toast {
  border-radius: var(--r-lg);
  padding: 0.625rem 0.75rem;
  box-shadow: var(--sh-lg);
}
.swal2-popup.swal2-toast .swal2-title {
  font-size: 0.875rem;
  line-height: 1.4;
}
.swal2-popup.swal2-toast .swal2-html-container {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
}

.thead-total {
  color: var(--cr-text) !important;
  background-color: var(--cr-surface-2) !important;
}

.sidebar .multi-level .nav-link { padding-left: 2.6875rem; }

[aria-expanded] .lucide-chevron-right,
[aria-expanded] .chevron-toggle      { transition: transform var(--t-slow) var(--ease); transform: rotate(0deg); }
[aria-expanded="true"] .lucide-chevron-right,
[aria-expanded="true"] .chevron-toggle { transform: rotate(90deg); }

/* =========================================================================
   COLLAPSE CARD — header + expandable body (invoice / proposal / PO lists)
   -------------------------------------------------------------------------
   Targets the collapsible-card family structurally — any .card whose header
   carries a Bootstrap collapse trigger — so every list partial inherits the
   treatment with no markup change. Soft elevation instead of a hard box, a
   status-tinted left accent driven by the balance figure already in the
   header, and an open state that lifts and reveals a header divider.
   ========================================================================= */
.card:has(> .card-header [data-bs-toggle="collapse"]) {
  border: 1px solid var(--cr-border);
  border-left: 3px solid var(--cr-border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.card:has(> .card-header [data-bs-toggle="collapse"]):hover {
  box-shadow: var(--sh-sm);
}

/* Status accent — mirrors the red/green balance figure, so the cue is never
   carried by colour alone (the number says it too). */
.card:has(> .card-header [data-bs-toggle="collapse"]):has(.card-header .text-danger) {
  border-left-color: var(--cr-danger);
}
.card:has(> .card-header [data-bs-toggle="collapse"]):has(.card-header .text-success) {
  border-left-color: var(--cr-success);
}

/* Explicit PO override for overpaid/negative outstanding cards. */
.card.po-card-accent-success,
.card.proposal-card-accent-success {
  border-left-color: var(--cr-success) !important;
}
.card.po-card-accent-success > .card-header,
.card.proposal-card-accent-success > .card-header {
  background: var(--cr-success-soft);
}

.card.po-card-accent-warning,
.card.proposal-card-accent-warning {
  border-left-color: var(--cr-warning) !important;
}
.card.po-card-accent-warning > .card-header,
.card.proposal-card-accent-warning > .card-header {
  background: var(--cr-warning-soft);
}

/* Open state: lift, and let a divider separate header from body. */
.card:has(> .card-header [data-bs-toggle="collapse"]):has(.collapse.show) {
  box-shadow: var(--sh-md);
}
.card:has(> .card-header [data-bs-toggle="collapse"]) > .card-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease);
}
.card:has(> .card-header [data-bs-toggle="collapse"]):has(.collapse.show) > .card-header {
  border-bottom-color: var(--cr-border);
}

/* Header trigger reads as a heading, not a link — but leave anchors that
   carry their own .text-* utility (supplier mismatch, decorative client). */
.card:has(> .card-header [data-bs-toggle="collapse"]) .card-header a[data-bs-toggle="collapse"] {
  text-decoration: none;
  font-weight: 600;
}
.card:has(> .card-header [data-bs-toggle="collapse"]) .card-header a[data-bs-toggle="collapse"]:not([class*="text-"]) {
  color: var(--cr-text);
}
.card:has(> .card-header [data-bs-toggle="collapse"]) .card-header a[data-bs-toggle="collapse"]:hover:not([class*="text-"]) {
  color: var(--cr-primary-deep);
}
.card:has(> .card-header [data-bs-toggle="collapse"]) .card-header a[data-bs-toggle="collapse"] .lucide-chevron-right {
  color: var(--cr-muted);
  margin-right: 0.25rem;
}

/* Body: calmer padding and real list markers instead of browser bullets. */
.card:has(> .card-header [data-bs-toggle="collapse"]) .card-body {
  padding: 1rem 1.25rem;
}
.card:has(> .card-header [data-bs-toggle="collapse"]) .card-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.card:has(> .card-header [data-bs-toggle="collapse"]) .card-body ul > li {
  position: relative;
  padding-left: 1.1rem;
}
.card:has(> .card-header [data-bs-toggle="collapse"]) .card-body ul > li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cr-border-strong);
}

/* A row's own action (remove from proposal, remove from PO) only earns its
   space when the row is in play — the same reveal the inline lists use. */
.card-row__action--reveal {
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
tr:hover .card-row__action--reveal,
tr:focus-within .card-row__action--reveal {
  opacity: 1;
}

/* A card header's type badge is a classification, not a status, so it stays
   out of the way until the card is in play — the same reveal as above.
   It fades rather than unmounts, so the header line never shifts. */
.card-badge--reveal {
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.card-header:hover .card-badge--reveal,
.card-header:focus-within .card-badge--reveal {
  opacity: 1;
}

/* The header cell holding a group's action button keeps that button's height
   even when the group no longer offers it, so header rows stay level down the
   card. 2.1875rem is the .btn-sm box: 21px line + 12px padding + 2px border. */
.card-row__actions-head {
  min-height: 2.1875rem;
}

/* Totals row closing a list card's body (proposals, purchase orders, client
   and supplier invoices). A tone-aware band — surface-2 so it follows the
   cool/warm neutral swap — kept short so it reads as a footer, not a section.
   Label recedes; the figure carries the weight. */
.card-total-row {
  background: var(--cr-surface-2);
  border-radius: var(--r-md);
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.card-total-row .card-total__label {
  color: var(--cr-muted);
}
.card-total-row .card-total__value {
  font-weight: 700;
  color: var(--cr-text);
}

/* Inline dot separator for card-header meta (replaces literal "|"). */
.hdr-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 0.45rem;
  border-radius: 50%;
  background: var(--cr-border-strong);
  vertical-align: middle;
}

.dropdown-menu-center {
  left: 50%;
  transform: translateX(-60%) !important;
}

/* =========================================================================
   7 · CUSTOM DROPDOWNS
   -------------------------------------------------------------------------
   Two flavors carried over from the existing app: classic .dropend-* and
   the newer .ds-dropdown-*. Both rebound to the same shadow / radius /
   color tokens so they look like one family.
   ========================================================================= */
.custom-dropend { position: relative; display: inline-block; }

.status-text {
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: background-color var(--t-fast) var(--ease);
}
.status-text:hover { background-color: var(--cr-surface-2); }

.dropend-menu {
  position: absolute;
  top: 0; left: 100%;
  margin-left: 0.625rem;
  min-width: 10rem;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  display: none;
  z-index: 1000;
  padding: 0.25rem;
}

.dropend-menu.show { display: block; }

.dropend-item {
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--cr-text-2);
  white-space: nowrap;
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dropend-item:hover {
  background-color: var(--cr-surface-2);
  color: var(--cr-text);
}
.dropend-item.active { color: var(--cr-placeholder); }


/* DS-dropdown — newer pattern */
.ds-dropdown { position: relative; display: inline-block; }

.ds-dropdown-menu {
  position: absolute;
  top: 0; left: 100%;
  margin-left: 0.625rem;
  min-width: max-content;
  max-width: 21.875rem;
  white-space: nowrap;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  display: none;
  z-index: 1000;
  padding: 0.375rem;
  font-size: var(--cr-font-size);
}
.ds-dropdown-menu.ds-dropdown-menu-left {
  left: auto !important;
  right: 100%;
  margin-left: 0;
  margin-right: 0.625rem;
}
.ds-dropdown-menu.ds-dropdown-expand-upward { top: auto; bottom: 0; }
.ds-dropdown-menu.ds-dropdown-show { display: block; }

.ds-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  color: var(--cr-text);
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.8125rem;
  white-space: nowrap;
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ds-dropdown-item:hover,
.ds-dropdown-item:focus {
  background: var(--cr-primary-soft);
  color: var(--cr-primary-deep);
  outline: 0;
}

.ds-dropdown-item .ds-dropdown-icon {
  min-width: 1.125rem;
  text-align: center;
  color: var(--cr-muted);
  font-size: 1em;
}
.ds-dropdown-item:hover .ds-dropdown-icon,
.ds-dropdown-item:focus .ds-dropdown-icon { color: var(--cr-primary); }
.ds-dropdown-item.ds-dropdown-item-active { color: var(--cr-placeholder); }

.ds-dropdown-item.ds-dropdown-has-submenu {
  position: relative;
  justify-content: space-between;
  cursor: pointer;
}
.ds-dropdown-item.ds-dropdown-has-submenu::after {
  content: "›";
  margin-left: 0.5rem;
  font-size: 0.875rem;
  font-weight: bold;
  color: var(--cr-muted);
}
.ds-dropdown-submenu {
  position: absolute;
  top: 0; left: 100%;
  min-width: 11.25rem;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  padding: 0.375rem;
  z-index: 1001;
  display: none;
  max-height: 15.625rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.ds-dropdown-item.ds-dropdown-has-submenu:hover .ds-dropdown-submenu,
.ds-dropdown-submenu.ds-dropdown-show { display: block; }

@media print {
  .ds-dropdown-menu, .ds-dropdown-submenu,
  .dropend-menu, .dropend-submenu { display: none !important; }
}

/* =========================================================================
   8 · DROPZONE, PROJECT CARD, GRID
   ========================================================================= */
.dropzone {
  background-color: var(--cr-surface-2);
  border: 2px dashed var(--cr-border-2);
  border-radius: var(--r-md);
  padding: 2rem;
  text-align: center;
  min-height: 9.375rem;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color var(--t-base) var(--ease),
              border-color    var(--t-base) var(--ease);
}
/* Hover softens toward primary; an actual drag commits to it. Same two-step
   as .cr-file-drop, so every drop target in the app reads the same way.
   `dz-drag-hover` is the class Dropzone.js sets — `dragover` is kept for the
   hand-rolled zones that toggle it themselves. */
.dropzone:hover {
  background-color: var(--cr-primary-soft);
  border-color: var(--cr-focus-border);
  cursor: pointer;
}
.dropzone.dragover,
.dropzone.dz-drag-hover {
  background-color: var(--cr-primary-soft);
  border-color: var(--cr-primary);
  border-style: solid;
}
.dz-message {
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--cr-muted);
  transition: color var(--t-base) var(--ease);
}
.dropzone:hover .dz-message,
.dropzone.dragover .dz-message,
.dropzone.dz-drag-hover .dz-message { color: var(--cr-text-2); }

.project-card {
  width: calc(16.666% - 1rem);
  margin: 0.5rem;
  border-radius: var(--r-lg);
  background: var(--cr-surface);
  transition: box-shadow var(--t-base) var(--ease);
}
.project-card.large { width: calc(20% - 1rem); }
.project-card-top {
  background-color: var(--cr-surface-2);
  border-radius: var(--r-md);
  margin: 0.625rem;
  height: 9.375rem;
}
.project-card img {
  height: 9.375rem;
  object-fit: cover;
  border-radius: var(--r-md);
}
.project-card:hover { box-shadow: var(--sh-md); }

.grid-item,
.grid-item-wip {
  width: calc(16.666% - 1rem);
  margin: 0.5rem;
}

/* =========================================================================
   9 · HTMX, SCROLLBAR
   ========================================================================= */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: block; }
.htmx-request .btn-icon-normal { display: none; }

/* Scrollbars — refined: thin, muted, hover-emphasized ----------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--cr-border-strong) transparent;
}
::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
::-webkit-scrollbar-track {
  background: transparent;
  margin: 0.375rem 0;
}
::-webkit-scrollbar-thumb {
  background: var(--cr-border-2);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--t-base) var(--ease);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--cr-border-strong); }
::-webkit-scrollbar-corner      { background: transparent; }
::-webkit-scrollbar-button      { display: none; width: 0; height: 0; }

/* =========================================================================
   10 · ANIMATIONS
   ========================================================================= */
.scale-up-center  { animation: scale-up-center  var(--t-slow) cubic-bezier(0.39, 0.575, 0.565, 1) both; }
.scale-out-center { animation: scale-out-center var(--t-slow) cubic-bezier(0.55, 0.085, 0.68, 0.53) both; }
.fade-in-fwd      { animation: fade-in-fwd      var(--t-slow) cubic-bezier(0.39, 0.575, 0.565, 1) both; }

@keyframes scale-up-center  { from { transform: scale(0.5); }                  to { transform: scale(1); } }
@keyframes scale-out-center { from { transform: scale(1);   opacity: 1; }      to { transform: scale(0); opacity: 1; } }
@keyframes fade-in-fwd      { from { transform: translateZ(-80px); opacity: 0; } to { transform: translateZ(0); opacity: 1; } }

/* =========================================================================
   11 · VIEW SWITCHER
   ========================================================================= */
.view-switcher {
  display: inline-flex;
  flex-wrap: wrap;
  background-color: var(--cr-surface-2);
  border-radius: var(--r-md);
  padding: 0.25rem;
  position: relative;
  border: 1px solid var(--cr-border);
}
.active-indicator {
  position: absolute;
  top: 0.25rem;
  left: 0;
  height: auto;
  background-color: var(--cr-surface);
  border-radius: calc(var(--r-md) - 2px);
  box-shadow: var(--sh-sm);
  z-index: 0;
  transition: transform var(--t-slow) cubic-bezier(0.45, 0, 0.2, 1),
              width     var(--t-slow) cubic-bezier(0.45, 0, 0.2, 1),
              top       var(--t-slow) cubic-bezier(0.45, 0, 0.2, 1),
              height    var(--t-slow) cubic-bezier(0.45, 0, 0.2, 1);
}
.switcher-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 0;
  background-color: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cr-muted);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: color var(--t-slow) var(--ease);
}
.switcher-button.active { color: var(--cr-text); }
.switcher-button:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -2px; top: 25%;
  height: 50%; width: 1px;
  background-color: var(--cr-border);
  transition: background-color var(--t-slow) var(--ease);
}
.switcher-button.active + .switcher-button::after,
.switcher-button:has(+ .switcher-button.active)::after {
  background-color: transparent;
}
.switcher-button svg { width: 1rem; height: 1rem; }

@supports not (scrollbar-gutter: stable) {
  .content { overflow-y: scroll; }
}

#boost-spinner {
  display: none;
  align-items: center;
  pointer-events: none;
}
#boost-spinner.active { display: inline-flex; }
#boost-spinner img { height: 1rem; width: auto; }

/* =========================================================================
   12 · CHOICES.JS
   -------------------------------------------------------------------------
   .cr-field    optional wrapper that adds an icon prepend slot
   .choices     all sizing, color, and motion rebound to design tokens
   ========================================================================= */
.cr-field { position: relative; display: block; }

.cr-field__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cr-muted);
  margin: 0 0 0.375rem 0.125rem;
  text-transform: none;
}
.cr-field__hint {
  font-size: 0.75rem;
  color: var(--cr-muted);
  margin: 0.375rem 0 0 0.125rem;
}
.cr-field.is-invalid .cr-field__hint { color: var(--cr-danger); }

.cr-field.has-icon .cr-field__inner-wrap {
  display: flex;
  align-items: center;
  gap: var(--cr-icon-gap);
}
.cr-field.has-icon .cr-field__inner-wrap > .choices { flex: 1 1 auto; min-width: 0; }

.cr-field__icon {
  flex: 0 0 auto;
  width: var(--cr-icon-size);
  height: var(--cr-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cr-muted);
  line-height: 1;
  transition: color var(--t-base) var(--ease);
}
.cr-field.has-icon.is-focused .cr-field__icon { color: var(--cr-primary); }

/* Layout reset of choices.js defaults --------------------------------- */
.choices:not([data-type*="select-multiple"]) .choices__inner,
.choices:not([data-type*="select-multiple"]) {
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.choices[data-type*="select-multiple"] .choices__list--multiple { display: contents; }

select[data-choice="active"] { display: none !important; }

.choices:not([data-type*="select-multiple"]) .choices__input--cloned {
  width: 100% !important;
  min-width: 100%;
}
.choices[data-type*="select-multiple"] .choices__input--cloned {
  width: auto !important;
  min-width: 0;
}

.choices__item.choices__item--selectable:not(.choices__item--choice) {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.input-group .choices { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; }
.input-group .choices__inner {
  max-width: 100%;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  height: auto;
  align-self: stretch;
  display: inline-block;
  align-items: center;
  flex-wrap: nowrap;
  line-height: 1.5;
}
.input-group .choices__list--single {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 0;
  padding: 0;
}
.input-group .choices__list--single .choices__item {
  line-height: 1.5;
}
.input-group > .choices:last-child .choices__inner {
  border-top-right-radius:    calc(var(--cr-radius) - var(--cr-border-w));
  border-bottom-right-radius: calc(var(--cr-radius) - var(--cr-border-w));
}
.input-group > .choices:first-child .choices__inner {
  border-top-left-radius:    calc(var(--cr-radius) - var(--cr-border-w));
  border-bottom-left-radius: calc(var(--cr-radius) - var(--cr-border-w));
}
.input-group .choices:hover .choices__inner,
.input-group .choices.is-focused .choices__inner,
.input-group .choices.is-open .choices__inner {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.input-group:has(.choices.is-focused),
.input-group:has(.choices.is-open) {
  border-color: var(--cr-focus-border);
  box-shadow: var(--cr-focus-ring);
}
/* Server-side validation errors: inputs keep their is-invalid class (selects
   sit inside the Choices.js wrapper), so surface the red border on the
   input-group that visually is the field */
.input-group:has(.is-invalid) {
  border-color: var(--cr-danger);
}
.input-group .input-group-text:has(.lucide, .icon) { min-width: 2.5rem; }

/* Keep a prepended icon vertically centred inside an input-group, even when a
   Choices.js multi-select wraps onto several lines and stretches the row. The
   addon still fills the full height (align-self: stretch), and the icon is
   centred within it. */
.input-group > .input-group-text {
  align-self: stretch;
  align-items: center;
  justify-content: center;
}
/* When `.icon` is put on the addon itself, drop its fixed height (2rem) so the
   addon fills the row instead of being pinned to the top of a taller select. */
.input-group > .input-group-text.icon {
  height: auto;
}
.input-group > .input-group-text > .icon,
.input-group > .input-group-text > .lucide,
.input-group > .input-group-text > i {
  align-self: center;
  line-height: 1;
}

.choices__item { align-items: center; }
.choices[data-type*=select-one] > .choices__list > .choices__list > .choices__item--selectable { padding-right: 0; }
.choices[data-type*=select-one] > .choices__list > .choices__list > .choices__item--selectable::after { display: none; }

.is-active.choices__list--dropdown,
.is-active.choices__list[aria-expanded] { z-index: 9999; }

.choices {
  position: relative;
  margin-bottom: 0;
  font-size: var(--cr-font-size);
  color: var(--cr-text);
  font-family: inherit;
}
.choices:focus { outline: 0; }
.choices.is-open { overflow: visible; z-index: 1080; }
.choices[hidden] { display: none !important; }
.choices [hidden] { position: absolute; inset: 0; pointer-events: none; opacity: 0; }

/* Trigger box --------------------------------------------------------- */
.choices__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cr-gap);
  width: 100%;
  min-height: var(--cr-min-h);
  padding: var(--cr-pad-y) calc(var(--cr-pad-x) + 1.75rem) var(--cr-pad-y) var(--cr-pad-x);
  background: var(--cr-surface);
  border: var(--cr-border-w) solid var(--cr-border-2);
  border-radius: var(--cr-radius);
  font-size: var(--cr-font-size);
  line-height: 1.5;
  box-shadow: var(--sh-xs);
  cursor: pointer;
  overflow: visible;
  transition: border-color var(--t-base) var(--ease),
              box-shadow   var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
/* Pin single-select height so inner cloned input padding can't push it
   above var(--cr-min-h) — keeps it flush with .form-control / .form-select.
   Multi-select keeps min-height so chips can wrap.
   `:where()` keeps specificity at (0,1,0) so the .input-group rule above
   (which sets height:auto) still wins inside input-group. */
:where(.choices:not([data-type*="select-multiple"])) .choices__inner {
  height: var(--cr-min-h);
}
.choices:hover .choices__inner { border-color: var(--cr-border-strong); }

.is-focused .choices__inner,
.is-open    .choices__inner {
  border-color: var(--cr-focus-border);
  box-shadow: var(--cr-focus-ring);
  background: var(--cr-surface);
}
.is-open .choices__inner {
  border-bottom-left-radius: var(--cr-radius);
  border-bottom-right-radius: var(--cr-radius);
}

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background: var(--cr-surface-3);
  color: var(--cr-muted);
  cursor: not-allowed !important;
  user-select: none;
  box-shadow: none;
}
.choices.is-disabled { opacity: 0.85; }

.is-invalid .choices__inner,
.cr-field.is-invalid .choices__inner {
  border-color: var(--cr-danger);
  background: var(--cr-danger-soft);
}
.is-invalid.is-focused .choices__inner,
.cr-field.is-invalid.is-focused .choices__inner {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-danger) 22%, transparent);
}

/* Chevron — soft pill + smooth rotation ------------------------------- */
.choices[data-type*="select-one"]::before {
  content: "";
  position: absolute;
  right: 0.375rem;
  top: 50%;
  width: 1.625rem;
  height: 1.625rem;
  transform: translateY(-50%) scale(0.6);
  background: var(--cr-surface-2);
  border-radius: var(--r-md);
  opacity: 0;
  transition:
    opacity 140ms var(--ease),
    transform 180ms var(--ease-out),
    background-color 140ms var(--ease);
  pointer-events: none;
}
.choices[data-type*="select-one"]:hover::before,
.choices[data-type*="select-one"].is-open::before,
.is-focused .choices[data-type*="select-one"]::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.choices[data-type*="select-one"].is-open::before,
.is-focused .choices[data-type*="select-one"]::before {
  background: var(--cr-primary-soft);
}

.choices[data-type*="select-one"]::after {
  content: "";
  position: absolute;
  right: 0.625rem;
  top: calc(50% - 0.5625rem);
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--cr-muted);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3.5 5.75 8 10.25 12.5 5.75' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / 0.875rem 0.875rem no-repeat;
          mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3.5 5.75 8 10.25 12.5 5.75' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / 0.875rem 0.875rem no-repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
  transform-origin: center center;
  transform: rotate(0deg);
  transition:
    transform 220ms var(--ease-out),
    background-color 160ms var(--ease);
  pointer-events: none;
  border: 0;
  margin: 0!important;
}
.choices[data-type*="select-one"]:hover::after { background-color: var(--cr-text); }
.choices[data-type*="select-one"].is-open::after {
  transform: rotate(-180deg);
  background-color: var(--cr-primary);
}
.choices[data-type*="select-one"][dir="rtl"]::before,
.choices[data-type*="select-one"][dir="rtl"]::after { right: auto; left: 0.375rem; }
.choices[data-type*="select-one"][dir="rtl"]::after { left: 0.625rem; }

/* Single-select clear button ------------------------------------------ */
.choices[data-type*="select-one"] .choices__button {
  background: none;
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 1rem; height: 1rem;
  margin: -0.5rem 0 0 0;
  padding: 0;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
  text-indent: -9999px;
  transition: opacity var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.choices[data-type*="select-one"] .choices__button::before,
.choices[data-type*="select-one"] .choices__button::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0.5625rem; height: 1.6px; background: var(--cr-muted);
  transform: translate(-50%,-50%) rotate(45deg);
  border-radius: 1px;
}
.choices[data-type*="select-one"] .choices__button::after { transform: translate(-50%,-50%) rotate(-45deg); }
.choices[data-type*="select-one"]:hover .choices__button { opacity: 1; }
.choices[data-type*="select-one"] .choices__button:hover { background: var(--cr-surface-2); }
.choices[data-type*="select-one"] .choices__button:hover::before,
.choices[data-type*="select-one"] .choices__button:hover::after { background: var(--cr-text); }
.choices[data-type*="select-one"] .choices__item[data-placeholder] .choices__button { display: none; }

/* Single value --------------------------------------------------------- */
.choices__list { margin: 0; padding-left: 0; list-style: none; }
.choices__list--single {
  display: inline-flex;
  align-items: center;
  padding: 0;
  width: 100%;
  min-width: 0;
}
.choices__list--single .choices__item {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cr-text);
}

.choices__list--single .choices__item[data-placeholder],
.choices__placeholder {
  color: var(--cr-placeholder);
  font-weight: 400;
  opacity: 1;
}

/* Multi-select chips --------------------------------------------------- */
.choices__list--multiple { display: contents; }
.choices__list--multiple .choices__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: var(--cr-chip-pad-y) var(--cr-chip-pad-x);
  background: var(--cr-primary);
  color: var(--cr-primary-ink);
  border: 1px solid color-mix(in srgb, var(--cr-primary) 90%, black);
  border-radius: var(--cr-radius-chip);
  font-size: var(--cr-font-size-sm);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  margin-right: 4px;
  margin-bottom: 4px;
  word-break: break-word;
  transition: background-color var(--t-base) var(--ease);
}
.choices__list--multiple .choices__item[data-deletable] { padding-right: 0.25rem; }
.choices__list--multiple .choices__item.is-highlighted { background: var(--cr-primary-deep); }
.is-disabled .choices__list--multiple .choices__item {
  background: var(--cr-surface-2);
  color: var(--cr-muted);
  border-color: var(--cr-border-2);
}

/* Chip X button -------------------------------------------------------- */
.choices:is([data-type*="select-multiple"],[data-type*="text"]) .choices__button {
  position: relative;
  width: 0.875rem; height: 0.875rem;
  margin: 0 0 0 0.125rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cr-primary-ink);
  border-radius: 50%;
  opacity: 0.85;
  cursor: pointer;
  text-indent: -9999px;
  flex: 0 0 auto;
  transition: background-color var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.choices:is([data-type*="select-multiple"],[data-type*="text"]) .choices__button::before,
.choices:is([data-type*="select-multiple"],[data-type*="text"]) .choices__button::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0.5rem; height: 1.6px;
  background: var(--cr-primary-ink);
  transform: translate(-50%,-50%) rotate(45deg);
  border-radius: 1px;
}
.choices:is([data-type*="select-multiple"],[data-type*="text"]) .choices__button::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.choices:is([data-type*="select-multiple"],[data-type*="text"]) .choices__button:hover {
  background: color-mix(in srgb, var(--cr-primary-ink) 22%, transparent);
  opacity: 1;
}

/* Inline input --------------------------------------------------------- */
select.choices__input { display: none !important; }

input.choices__input {
  display: inline-flex;
  align-items: center;
  background: transparent;
  font-size: var(--cr-font-size);
  font-family: inherit;
  color: var(--cr-text);
  margin: 0;
  border: 0;
  border-radius: 0;
  min-width: 4ch;
  flex: 1 1 60px;
  padding: 2px 0;
}
input.choices__input[hidden] { display: none !important; }
.choices__input::placeholder { color: var(--cr-placeholder); }
.choices__input:focus { outline: 0; }
.choices__input::-webkit-search-cancel-button,
.choices__input::-webkit-search-decoration,
.choices__input::-webkit-search-results-button,
.choices__input::-webkit-search-results-decoration { display: none; }

.choices[data-type*="select-one"] .choices__input {
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem 0 2.25rem;
  line-height: calc(2.5rem - 1px);
  border-bottom: 1px solid var(--cr-border);
  background: var(--cr-surface);
  margin: 0;
  position: relative;
}
.choices[data-type*="select-one"] .choices__list--dropdown:has(input.choices__input)::before,
.choices[data-type*="select-one"] .choices__list[aria-expanded]:has(input.choices__input)::before {
  content: "";
  position: absolute;
  top: 1.2rem; left: 0.75rem;
  width: 1rem; height: 1rem;
  background-color: var(--cr-placeholder);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* Dropdown panel ------------------------------------------------------- */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0; right: 0;
  width: 100%;
  z-index: 50;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  overflow: hidden;
  margin: 0;
  padding: 0.375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--cr-anim-from-y)) scale(var(--cr-anim-from-s));
  transform-origin: top center;
  word-break: break-word;
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    visibility 0s linear var(--t-base);
}
.is-active.choices__list--dropdown,
.is-active.choices__list[aria-expanded] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    visibility 0s linear 0s;
}
.is-flipped .choices__list--dropdown,
.is-flipped .choices__list[aria-expanded] {
  top: auto;
  bottom: calc(100% + 0.375rem);
  transform-origin: bottom center;
  transform: translateY(calc(var(--cr-anim-from-y) * -1)) scale(var(--cr-anim-from-s));
}
/* .is-flipped lands on the .choices wrapper, .is-active on the dropdown itself -
   so this has to be a descendant selector. Written as `.is-flipped.is-active` it
   asked for one element carrying both and matched nothing, leaving every flipped
   panel resting at its from-state offset instead of animating to 0. */
.is-flipped .is-active.choices__list--dropdown,
.is-flipped .is-active.choices__list[aria-expanded] { transform: translateY(0) scale(1); }

/* Always-up dropdowns (Choices `position: 'top'`).
   Choices drops .is-flipped in the same requestAnimationFrame that starts the
   close animation, so the panel loses its `bottom` anchoring while it is still
   visible and snaps back under the field to fade out there - a flick downwards
   on every close. A select that is pinned upward gets .cr-choices-up on its
   wrapper instead, which nothing ever removes, so the panel closes where it
   opened. Geometry is identical to .is-flipped, so the two can coexist. */
.cr-choices-up .choices__list--dropdown,
.cr-choices-up .choices__list[aria-expanded] {
  top: auto;
  bottom: calc(100% + 0.375rem);
  transform-origin: bottom center;
  transform: translateY(calc(var(--cr-anim-from-y) * -1)) scale(var(--cr-anim-from-s));
}
.cr-choices-up .is-active.choices__list--dropdown,
.cr-choices-up .is-active.choices__list[aria-expanded] { transform: translateY(0) scale(1); }

.choices[data-type*="select-one"] .choices__list--dropdown {
  padding-top: 0.5rem;
  overflow: hidden;
}
.choices[data-type*="select-one"] .choices__list--dropdown .choices__input {
  margin: 0 -0.375rem 0.5rem -0.375rem;
  width: calc(100% + 0.75rem);
  border-radius: 0;
  border-bottom: 1px solid var(--cr-border);
}

.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
  position: relative;
  max-height: 17.5rem;
  overflow: auto;
  padding: 2px;
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  position: relative;
  padding: var(--cr-row-pad-y) var(--cr-row-pad-x);
  font-size: var(--cr-font-size);
  color: var(--cr-text);
  border-radius: var(--cr-radius-row);
  margin: 1px 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 90ms var(--ease), color 90ms var(--ease);
}
.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable { cursor: pointer; }

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: var(--cr-primary-soft);
  color: var(--cr-text);
}
.choices__list--dropdown .choices__item--selectable.is-selected,
.choices__list[aria-expanded] .choices__item--selectable.is-selected {
  background: transparent;
  color: var(--cr-primary);
  font-weight: 600;
}
.choices__list--dropdown .choices__item--selectable.is-selected::before,
.choices__list[aria-expanded] .choices__item--selectable.is-selected::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 0.875rem;
  border-radius: 50%;
  background-color: var(--cr-primary);
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / 0.75rem 0.75rem no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / 0.75rem 0.75rem no-repeat;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}
.choices__list--dropdown .choices__item--selectable.is-selected.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-selected.is-highlighted {
  background: var(--cr-primary-soft);
}
.choices__list--dropdown .choices__item--disabled,
.choices__list[aria-expanded] .choices__item--disabled {
  cursor: not-allowed;
  user-select: none;
  opacity: 0.45;
}
/* Hide blank/placeholder rows inside the open dropdown (still present
   in the DOM, just never visible as a selectable row) */
.choices__list--dropdown .choices__item.choices__placeholder,
.choices__list[aria-expanded] .choices__item.choices__placeholder { display: none; }

@media (min-width: 640px) {
  .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after,
  .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after {
    content: attr(data-select-text);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cr-primary);
    margin-left: auto;
    padding-left: 0.75rem;
    white-space: nowrap;
  }
  .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text],
  .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text] {
    padding-right: var(--cr-row-pad-x);
  }
  .choices__list--dropdown .choices__item--selectable.is-selected.is-highlighted[data-select-text]::after,
  .choices__list[aria-expanded] .choices__item--selectable.is-selected.is-highlighted[data-select-text]::after {
    content: none;
  }
}

.choices__heading {
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.625rem 0.625rem 0.375rem;
  border: 0;
  color: var(--cr-muted);
  margin-top: 0.25rem;
}
.choices__list--dropdown .choices__group:first-child .choices__heading,
.choices__list[aria-expanded] .choices__group:first-child .choices__heading { margin-top: 0; }

.choices__list--dropdown .has-no-results,
.choices__list[aria-expanded] .has-no-results,
.choices__list--dropdown .has-no-choices,
.choices__list[aria-expanded] .has-no-choices {
  padding: 0.875rem 0.75rem;
  text-align: center;
  color: var(--cr-muted);
  font-size: var(--cr-font-size-sm);
  font-style: italic;
}

.choices__button { -webkit-appearance: none; appearance: none; background: transparent; border: 0; cursor: pointer; }
.choices__button:focus { outline: 0; box-shadow: var(--cr-focus-ring); }

@media (prefers-reduced-motion: reduce) {
  .choices__inner,
  .choices__list--dropdown,
  .choices__list[aria-expanded],
  .choices__item,
  .choices[data-type*="select-one"]::after { transition: none !important; }
}

/* Rich-row helper (descriptions/roles next to a name) ----------------- */
.cr-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; }
.cr-row__name { font-weight: 500; color: var(--cr-text); }
.cr-row__role { font-size: 0.6875rem; color: var(--cr-muted); font-weight: 500; letter-spacing: 0.02em; }
.choices__item--selectable.is-selected .cr-row__name { color: var(--cr-primary-deep); font-weight: 600; }

/* Inactive-entity rows (still selectable, visually de-emphasised) ----- */
.choices__item .cr-choice-inactive {
  color: var(--cr-muted);
}

/* =========================================================================
   13 · BOOTSTRAP form-control / form-select / input-group
   ========================================================================= */
.form-control,
.form-select,
textarea.form-control {
  display: block;
  width: 100%;
  height: var(--cr-min-h);
  min-height: var(--cr-min-h);
  padding: var(--cr-pad-y) var(--cr-pad-x);
  font-family: inherit;
  font-size: var(--cr-font-size);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cr-text);
  background-color: var(--cr-surface);
  background-clip: padding-box;
  border: var(--cr-border-w) solid var(--cr-border-2);
  border-radius: var(--cr-radius);
  box-shadow: var(--sh-xs);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-base) var(--ease),
              box-shadow   var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
textarea.form-control {
  height: auto;
  min-height: calc(var(--cr-min-h) * 2.4);
  resize: vertical;
  line-height: 1.55;
}

.form-control[type="number"],
.form-control[inputmode="decimal"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.form-control::placeholder,
.form-select::placeholder {
  color: var(--cr-placeholder);
  opacity: 1;
}

.form-control:hover,
.form-select:hover { border-color: var(--cr-border-strong); }

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  outline: 0;
  border-color: var(--cr-focus-border);
  box-shadow: var(--cr-focus-ring);
  background-color: var(--cr-surface);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--cr-surface-3);
  color: var(--cr-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.form-select {
  padding-right: calc(var(--cr-pad-x) + 1.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M3.5 6 8 10.5 12.5 6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 0.875rem 0.875rem;
}

/* File input — pill-button + filename, sized to match other fields ----- */
.form-control[type="file"] {
  padding: 0 var(--cr-pad-x) 0 0;
  overflow: hidden;
  cursor: pointer;
  line-height: calc(var(--cr-min-h) - var(--cr-border-w) * 2);
  color: var(--cr-text-2);
}
.form-control[type="file"]::file-selector-button,
.form-control[type="file"]::-webkit-file-upload-button {
  height: calc(var(--cr-min-h) - var(--cr-border-w) * 2);
  margin: 0 var(--cr-pad-x) 0 0;
  padding: 0 calc(var(--cr-pad-x) + 0.125rem);
  font-family: inherit;
  font-size: var(--cr-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cr-text-2);
  background: var(--cr-surface-2);
  border: 0;
  border-right: var(--cr-border-w) solid var(--cr-border);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.form-control[type="file"]:hover::file-selector-button,
.form-control[type="file"]:focus::file-selector-button,
.form-control[type="file"]:hover::-webkit-file-upload-button,
.form-control[type="file"]:focus::-webkit-file-upload-button {
  background: var(--cr-surface-3);
  color: var(--cr-text);
}
.form-control[type="file"]:disabled,
.form-control[type="file"][readonly] { cursor: not-allowed; }
.form-control[type="file"]:disabled::file-selector-button,
.form-control[type="file"][readonly]::file-selector-button,
.form-control[type="file"]:disabled::-webkit-file-upload-button,
.form-control[type="file"][readonly]::-webkit-file-upload-button {
  background: var(--cr-surface-3);
  color: var(--cr-muted);
  cursor: not-allowed;
}
.form-control[type="file"].is-invalid::file-selector-button,
.was-validated .form-control[type="file"]:invalid::file-selector-button,
.form-control[type="file"].is-invalid::-webkit-file-upload-button,
.was-validated .form-control[type="file"]:invalid::-webkit-file-upload-button {
  background: var(--cr-danger);
}
.input-group > .form-control[type="file"] { padding-right: 0; }

/* Bare input[type="file"] — same treatment when not wrapped in .form-control */
input[type="file"]:not(.form-control):not([class*="dropzone"]):not(.logo-file-input) {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: var(--cr-min-h);
  padding: 0 var(--cr-pad-x) 0 0;
  font-size: var(--cr-font-size);
  color: var(--cr-text-2);
  background: var(--cr-surface);
  border: var(--cr-border-w) solid var(--cr-border-2);
  border-radius: var(--cr-radius);
  box-shadow: var(--sh-xs);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease),
              box-shadow   var(--t-base) var(--ease);
}
input[type="file"]:not(.form-control):not([class*="dropzone"]):not(.logo-file-input):hover {
  border-color: var(--cr-border-strong);
}
input[type="file"]:not(.form-control):not([class*="dropzone"]):not(.logo-file-input):focus {
  outline: 0;
  border-color: var(--cr-focus-border);
  box-shadow: var(--cr-focus-ring);
}
input[type="file"]:not(.form-control):not([class*="dropzone"]):not(.logo-file-input)::file-selector-button,
input[type="file"]:not(.form-control):not([class*="dropzone"]):not(.logo-file-input)::-webkit-file-upload-button {
  height: calc(var(--cr-min-h) - var(--cr-border-w) * 2);
  margin: 0 var(--cr-pad-x) 0 0;
  padding: 0 calc(var(--cr-pad-x) + 0.125rem);
  font-family: inherit;
  font-size: var(--cr-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cr-text-2);
  background: var(--cr-surface-2);
  border: 0;
  border-right: var(--cr-border-w) solid var(--cr-border);
  border-top-left-radius: calc(var(--cr-radius) - var(--cr-border-w));
  border-bottom-left-radius: calc(var(--cr-radius) - var(--cr-border-w));
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
input[type="file"]:not(.form-control):not([class*="dropzone"]):not(.logo-file-input):hover::file-selector-button,
input[type="file"]:not(.form-control):not([class*="dropzone"]):not(.logo-file-input):hover::-webkit-file-upload-button {
  background: var(--cr-surface-3);
  color: var(--cr-text);
}

/* Drop-zone variant — opt-in pill for richer upload UIs ---------------- */
.cr-file-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 1.25rem 1rem;
  text-align: center;
  background: var(--cr-surface);
  border: 1.5px dashed var(--cr-border-2);
  border-radius: var(--r-lg);
  color: var(--cr-muted);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.cr-file-drop:hover,
.cr-file-drop:focus-within {
  border-color: var(--cr-focus-border);
  background: var(--cr-primary-soft);
  color: var(--cr-text-2);
}
.cr-file-drop.is-dragover {
  border-color: var(--cr-primary);
  border-style: solid;
  background: var(--cr-primary-soft);
  color: var(--cr-primary-deep);
}
.cr-file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.cr-file-drop__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-pill);
  background: var(--cr-surface-2);
  color: var(--cr-text-2);
}
.cr-file-drop:hover .cr-file-drop__icon,
.cr-file-drop:focus-within .cr-file-drop__icon,
.cr-file-drop.is-dragover .cr-file-drop__icon {
  background: var(--cr-primary);
  color: var(--cr-primary-ink);
}
.cr-file-drop__title {
  font-size: var(--cr-font-size);
  font-weight: 600;
  color: var(--cr-text);
}
.cr-file-drop__hint {
  font-size: var(--cr-font-size-sm);
  color: var(--cr-muted);
}
.cr-file-drop__hint strong {
  font-weight: 600;
  color: var(--cr-primary);
}

.form-label {
  display: inline-block;
  margin: 0 0 0.375rem 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cr-muted);
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--cr-danger);
  background-color: var(--cr-danger-soft);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-danger) 22%, transparent);
}
.invalid-feedback {
  display: block;
  font-size: 0.75rem;
  color: var(--cr-danger);
  margin: 0.375rem 0 0 0.125rem;
}
.form-text {
  display: block;
  font-size: 0.75rem;
  color: var(--cr-muted);
  margin: 0.375rem 0 0 0.125rem;
}
.form-control.is-valid,
.form-select.is-valid {
  border-color: color-mix(in srgb, var(--cr-success) 80%, var(--cr-border-2));
}

/* Checkbox component — components/checkbox.html ---------------------- */
.dsm-cb-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  gap: 0.5rem;
  margin-bottom: 0;
  min-height: var(--cr-min-h);
  min-width: 0;
  padding: var(--cr-pad-y) var(--cr-pad-x);
  font-size: var(--cr-font-size);
  line-height: 1.5;
  border-radius: var(--cr-radius);
  border: 1px solid var(--cr-border);
  background: var(--cr-surface);
  color: var(--cr-muted);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
/* The caption stays on one line and ellipsises, the same way .lbl does on an
   input-group: a long label ("Tax on Commission Only") shortens the control
   rather than making it two rows tall and knocking the row out of alignment.
   .dsm-cb-box is flex: none, so the text is the only item that can give — and
   the component puts the full text on title for a truncated one. */
.dsm-cb-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dsm-cb-label:hover { background: var(--cr-surface-2); }
.dsm-cb-label:hover .dsm-cb-box { border-color: var(--cr-border-strong); }
.dsm-cb-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.dsm-cb-box {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 0.3125rem;
  border: 1.5px solid var(--cr-border-2);
  background: var(--cr-surface);
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.dsm-cb-mark {
  stroke-dashoffset: 18;
  transition: stroke-dashoffset .26s cubic-bezier(.34, 1.56, .64, 1);
}
.dsm-cb-input:checked ~ .dsm-cb-box {
  background: var(--cr-primary);
  border-color: var(--cr-primary);
}
.dsm-cb-input:checked ~ .dsm-cb-box .dsm-cb-mark { stroke-dashoffset: 0; }
.dsm-cb-input:checked ~ .dsm-cb-text { color: var(--cr-text); }
.dsm-cb-input:focus-visible ~ .dsm-cb-box {
  border-color: var(--cr-focus-border);
  box-shadow: var(--cr-focus-ring);
}
.dsm-cb-label:has(.dsm-cb-input:checked) {
  border-color: var(--cr-primary);
  background: var(--cr-primary-soft);
}
.dsm-cb-label:has(.dsm-cb-input:checked):hover {
  background: color-mix(in srgb, var(--cr-primary) 14%, transparent);
}
.dsm-cb-label:has(.dsm-cb-input:disabled) {
  cursor: not-allowed;
  opacity: .6;
}
.dsm-cb-label:has(.dsm-cb-input:disabled):hover {
  background: var(--cr-surface);
}
.dsm-cb-label:has(.dsm-cb-input:checked):has(.dsm-cb-input:disabled):hover {
  background: var(--cr-primary-soft);
}
.dsm-cb-label:has(.dsm-cb-input:disabled):hover .dsm-cb-box {
  border-color: var(--cr-border-2);
}

/* Input group — single rounded shell with prepended/appended slot ----- */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  background: var(--cr-surface);
  border: var(--cr-border-w) solid var(--cr-border-2);
  border-radius: var(--cr-radius);
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-base) var(--ease),
              box-shadow   var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
.input-group:hover { border-color: var(--cr-border-strong); }
.input-group:focus-within {
  border-color: var(--cr-focus-border);
  box-shadow: var(--cr-focus-ring);
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > textarea.form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  height: calc(var(--cr-min-h) - var(--cr-border-w) * 2);
  min-height: calc(var(--cr-min-h) - var(--cr-border-w) * 2);
}
.input-group > textarea.form-control {
  height: auto;
  min-height: calc(var(--cr-min-h) * 2.4 - var(--cr-border-w) * 2);
}
.input-group > .form-control:focus,
.input-group > .form-select:focus { background: transparent; }

/* A .btn-icon is a fixed square, so the shell's `align-items: stretch` cannot
   size it — it keeps its own height and pins to the top of the taller row.
   Centre it so an icon button dropped between two fields sits on the row. */
.input-group > .btn.btn-icon { align-self: center; }

.input-group-text {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  padding: var(--cr-pad-y) var(--cr-pad-x);
  font-size: var(--cr-font-size-sm);
  color: var(--cr-muted);
  background: var(--cr-surface-2);
  border: 0;
  white-space: nowrap;
  text-align: center;
  user-select: none;
  transition: color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
.input-group > :first-child {
  border-top-left-radius:     calc(var(--cr-radius) - var(--cr-border-w));
  border-bottom-left-radius:  calc(var(--cr-radius) - var(--cr-border-w));
}
.input-group > :last-child {
  border-top-right-radius:    calc(var(--cr-radius) - var(--cr-border-w));
  border-bottom-right-radius: calc(var(--cr-radius) - var(--cr-border-w));
}

.input-group:focus-within > .input-group-text { color: var(--cr-primary); }

.input-group-text > svg,
.input-group-text > i {
  width: var(--cr-icon-size);
  height: var(--cr-icon-size);
  flex: 0 0 auto;
  color: currentColor;
}
/* A .form-check-input dropped into a prepend cell is flex-centered by the
   cell itself — Bootstrap's optical margin would push it below centre. */
.input-group-text > .form-check-input {
  margin-top: 0;
}
.input-group-text:has(> svg:only-child),
.input-group-text:has(> i:only-child) {
  padding-left: calc(var(--cr-pad-x) + 0.125rem);
  padding-right: calc(var(--cr-pad-x) + 0.125rem);
}

.input-group:has(> .form-control:disabled),
.input-group:has(> .form-select:disabled),
.input-group:has(> .form-control[readonly]) {
  background: var(--cr-surface-3);
  color: var(--cr-muted);
  cursor: not-allowed;
}
.input-group:has(> .form-control:disabled) .input-group-text,
.input-group:has(> .form-select:disabled)  .input-group-text {
  background: transparent;
  color: var(--cr-muted);
}

.input-group:has(> .is-invalid),
.input-group.is-invalid {
  border-color: var(--cr-danger);
  background: var(--cr-danger-soft);
}
.input-group:has(> .is-invalid) > .input-group-text,
.input-group.is-invalid > .input-group-text {
  background: color-mix(in srgb, var(--cr-danger-soft) 75%, transparent);
  color: var(--cr-danger);
}
.input-group:has(> .is-invalid):focus-within,
.input-group.is-invalid:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-danger) 22%, transparent);
}

/* Size modifiers — retune the field shape vars in scope ---------------- */
.input-group-sm, .form-control-sm, .form-select-sm {
  --cr-min-h:  1.875rem;
  --cr-pad-y:  0.25rem;
  --cr-pad-x:  0.625rem;
  --cr-font-size:    0.8125rem;
  --cr-font-size-sm: 0.6875rem;
  --cr-icon-size:    0.875rem;
}
.input-group-lg, .form-control-lg, .form-select-lg {
  --cr-min-h:  3rem;
  --cr-pad-y:  0.625rem;
  --cr-pad-x:  1rem;
  --cr-font-size:    1rem;
  --cr-font-size-sm: 0.8125rem;
  --cr-icon-size:    1.25rem;
}

/* =========================================================================
   14 · RESPONSIVE
   ========================================================================= */
@media screen and (max-width: 1450px) {
  #sidebarMenu { display: none !important; }
  .content {
    height: calc(100vh - 3.75rem);
    height: calc(100dvh - 3.75rem);
    margin-left: 0 !important;
    width: 100% !important;
  }
  .mobile-alert { display: inline !important; }
}

@media (min-width: 576px)  { html { font-size: 13px; } }
@media (min-width: 768px)  { html { font-size: 14px; } }
@media (min-width: 992px)  { html { font-size: 15px; } }
@media (min-width: 1900px) { html { font-size: 16px; } }
@media (min-width: 2560px) { html { font-size: 17px; } }
@media (min-width: 3840px) { html { font-size: 19px; } }

@media screen and (min-width: 2048px) {
  .grid-item, .grid-item-wip { width: calc(14.285% - 1rem); }
  .project-card              { width: calc(12.5% - 1rem); }
  .project-card.large        { width: calc(16.666% - 1rem); }
}
@media screen and (min-width: 3840px) {
  .grid-item, .grid-item-wip { width: calc(12.5% - 1rem); }
  .project-card              { width: calc(10% - 1rem); }
  .project-card.large        { width: calc(12.5% - 1rem); }
}
@media screen and (max-width: 1024px) {
  .grid-item, .grid-item-wip { width: calc(20% - 1rem); }
  .project-card              { width: calc(20% - 1rem); }
  .project-card.large        { width: calc(25% - 1rem); }
}
@media screen and (max-width: 768px) {
  .grid-item, .grid-item-wip { width: calc(50% - 1rem); }
  .project-card              { width: calc(50% - 1rem); }
  .project-card.large        { width: calc(100% - 1rem); }
}


/* =========================================================================
   15 · VOLT CSS
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth; } }

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25; }

hr:not([size]) {
  height: 0.0625rem; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cr-primary-deep); }

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw); }
  @media (min-width: 1200px) {
    h1, .h1 {
      font-size: 2.5rem; } }

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw); }
  @media (min-width: 1200px) {
    h2, .h2 {
      font-size: 2rem; } }

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw); }
  @media (min-width: 1200px) {
    h3, .h3 {
      font-size: 1.75rem; } }

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw); }
  @media (min-width: 1200px) {
    h4, .h4 {
      font-size: 1.5rem; } }

h5, .h5 {
  font-size: 1.25rem; }

h6, .h6 {
  font-size: 1rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem; }

abbr[title],
abbr[data-bs-original-title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none; }

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit; }

ol,
ul {
  padding-left: 2rem; }

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem; }

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0; }

dt {
  font-weight: 500; }

dd {
  margin-bottom: .5rem;
  margin-left: 0; }

blockquote {
  margin: 0 0 1rem; }

b,
strong {
  font-weight: 600; }

small, .small {
  font-size: 0.875em; }

/* mark, .mark {
  padding: 0.2em;
  background-color: #fcf8e3; } */

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

a {
  color: var(--cr-primary);
  text-decoration: none; }
  a:hover {
    color: black;
    text-decoration: none; }

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none; }

pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
  direction: ltr /* rtl:ignore */;
  unicode-bidi: bidi-override; }

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em; }
  pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal; }

code {
  font-size: 0.875em;
  color: #EF4683;
  word-wrap: break-word; }
  a > code {
    color: inherit; }

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 0.875em;
  color: var(--cr-primary-ink);
  background-color: var(--cr-primary-deep);
  border-radius: 0.35rem; }
  kbd kbd {
    padding: 0;
    font-size: 1em;
    font-weight: 500; }

figure {
  margin: 0 0 1rem; }

img,
svg {
  vertical-align: middle; }

table {
  caption-side: bottom;
  border-collapse: collapse; }

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #58677d;
  text-align: left; }

th {
  text-align: inherit;
  text-align: -webkit-match-parent; }

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0; }

label {
  display: inline-block; }

button {
  border-radius: 0; }

button:focus:not(:focus-visible) {
  outline: 0; }

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

button,
select {
  text-transform: none; }

[role="button"] {
  cursor: pointer; }

select {
  word-wrap: normal; }
  select:disabled {
    opacity: 1; }

[list]::-webkit-calendar-picker-indicator {
  display: none; }

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }
  button:not(:disabled),
  [type="button"]:not(:disabled),
  [type="reset"]:not(:disabled),
  [type="submit"]:not(:disabled) {
    cursor: pointer; }

::-moz-focus-inner {
  padding: 0;
  border-style: none; }

textarea {
  resize: vertical; }

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0; }

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit; }
  @media (min-width: 1200px) {
    legend {
      font-size: 1.5rem; } }
  legend + * {
    clear: left; }

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0; }

::-webkit-inner-spin-button {
  height: auto; }

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: textfield; }

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-color-swatch-wrapper {
  padding: 0; }

::file-selector-button {
  font: inherit; }

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button; }

output {
  display: inline-block; }

iframe {
  border: 0; }

summary {
  display: list-item;
  cursor: pointer; }

progress {
  vertical-align: baseline; }

[hidden] {
  display: none !important; }

.lead {
  font-size: 1.25rem;
  font-weight: 300; }

.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 500;
  line-height: 1.3; }
  @media (min-width: 1200px) {
    .display-1 {
      font-size: 5rem; } }

.display-2 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 500;
  line-height: 1.3; }
  @media (min-width: 1200px) {
    .display-2 {
      font-size: 3.5rem; } }

.display-3 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 500;
  line-height: 1.3; }
  @media (min-width: 1200px) {
    .display-3 {
      font-size: 2.5rem; } }

.display-4 {
  font-size: calc(1.3125rem + 0.75vw);
  font-weight: 500;
  line-height: 1.3; }
  @media (min-width: 1200px) {
    .display-4 {
      font-size: 1.875rem; } }

.display-5 {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3; }

.display-6 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3; }

.list-unstyled {
  padding-left: 0;
  list-style: none; }

.list-inline {
  padding-left: 0;
  list-style: none; }

.list-inline-item {
  display: inline-block; }
  .list-inline-item:not(:last-child) {
    margin-right: 0.5rem; }

/* .initialism {
  font-size: 0.875em;
  text-transform: uppercase; } */

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem; }
  .blockquote > :last-child {
    margin-bottom: 0; }

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #4B5563; }
  .blockquote-footer::before {
    content: "\2014\00A0"; }

.img-fluid {
  max-width: 100%;
  height: auto; }

.img-thumbnail {
  padding: 0.25rem;
  background-color: var(--cr-surface-2);
  border: 0.0625rem solid var(--cr-border-2);
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px rgba(140, 152, 164, 0.2);
  max-width: 100%;
  height: auto; }

.figure {
  display: inline-block; }

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: var(--bs-gutter-x, 1rem);
  padding-left: var(--bs-gutter-x, 1rem);
  margin-right: auto;
  margin-left: auto; }

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px; } }

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px; } }

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px; } }

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px; } }

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2); }
  .row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y); }

.col {
  flex: 1 0 0%; }

.col-auto {
  flex: 0 0 auto;
  width: auto; }

.col-1 {
  flex: 0 0 auto;
  width: 8.33333%; }

.col-2 {
  flex: 0 0 auto;
  width: 16.66667%; }

.col-3 {
  flex: 0 0 auto;
  width: 25%; }

.col-4 {
  flex: 0 0 auto;
  width: 33.33333%; }

.col-5 {
  flex: 0 0 auto;
  width: 41.66667%; }

.col-6 {
  flex: 0 0 auto;
  width: 50%; }

.col-7 {
  flex: 0 0 auto;
  width: 58.33333%; }

.col-8 {
  flex: 0 0 auto;
  width: 66.66667%; }

.col-9 {
  flex: 0 0 auto;
  width: 75%; }

.col-10 {
  flex: 0 0 auto;
  width: 83.33333%; }

.col-11 {
  flex: 0 0 auto;
  width: 91.66667%; }

.col-12 {
  flex: 0 0 auto;
  width: 100%; }

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem; }

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem; }

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem; }

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem; }

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem; }

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem; }

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem; }

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem; }

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem; }

.g-6,
.gx-6 {
  --bs-gutter-x: 5rem; }

.g-6,
.gy-6 {
  --bs-gutter-y: 5rem; }

.g-7,
.gx-7 {
  --bs-gutter-x: 8rem; }

.g-7,
.gy-7 {
  --bs-gutter-y: 8rem; }

.g-8,
.gx-8 {
  --bs-gutter-x: 10rem; }

.g-8,
.gy-8 {
  --bs-gutter-y: 10rem; }

.g-9,
.gx-9 {
  --bs-gutter-x: 11rem; }

.g-9,
.gy-9 {
  --bs-gutter-y: 11rem; }

.g-10,
.gx-10 {
  --bs-gutter-x: 14rem; }

.g-10,
.gy-10 {
  --bs-gutter-y: 14rem; }

.g-11,
.gx-11 {
  --bs-gutter-x: 16rem; }

.g-11,
.gy-11 {
  --bs-gutter-y: 16rem; }

.g-12,
.gx-12 {
  --bs-gutter-x: 20rem; }

.g-12,
.gy-12 {
  --bs-gutter-y: 20rem; }

.g-sm,
.gx-sm {
  --bs-gutter-x: 1rem; }

.g-sm,
.gy-sm {
  --bs-gutter-y: 1rem; }

.g-md,
.gx-md {
  --bs-gutter-x: 2rem; }

.g-md,
.gy-md {
  --bs-gutter-y: 2rem; }

.g-lg,
.gx-lg {
  --bs-gutter-x: 4rem; }

.g-lg,
.gy-lg {
  --bs-gutter-y: 4rem; }

.g-xl,
.gx-xl {
  --bs-gutter-x: 8rem; }

.g-xl,
.gy-xl {
  --bs-gutter-y: 8rem; }

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%; }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333%; }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66667%; }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%; }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333%; }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66667%; }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%; }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333%; }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66667%; }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%; }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333%; }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66667%; }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%; }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333%; }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66667%; }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%; }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333%; }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66667%; }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%; }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333%; }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66667%; }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%; }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333%; }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66667%; }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%; }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333%; }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66667%; }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%; }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333%; }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66667%; }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%; }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333%; }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66667%; }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%; }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333%; }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66667%; }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%; }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333%; }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66667%; }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%; }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333%; }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66667%; }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%; }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333%; }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66667%; }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%; }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333%; }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66667%; }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%; }

.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--cr-text-2);
  --bs-table-striped-bg: rgba(17, 24, 39, 0.05);
  --bs-table-active-color: var(--cr-text-2);
  --bs-table-active-bg: rgba(17, 24, 39, 0.1);
  --bs-table-hover-color: var(--cr-text-2);
  --bs-table-hover-bg: rgba(17, 24, 39, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: var(--cr-text-2);
  vertical-align: top;
  border-color: var(--cr-border); }
  .table > :not(caption) > * > * {
    padding: 0.75rem 0.5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 0.0625rem;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); }
  .table > tbody {
    vertical-align: inherit; }
  .table > thead {
    vertical-align: middle; }
  .table > :not(:last-child) > :last-child > * {
    border-bottom-color: currentColor; }

/* .caption-top {
  caption-side: top; }
 */
.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem; }

.table-bordered > :not(caption) > * {
  border-width: 0.0625rem 0; }
  .table-bordered > :not(caption) > * > * {
    border-width: 0 0.0625rem; }

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0; }

.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color); }

/* .table-active {
  --bs-table-accent-bg: var(--bs-table-active-bg);
  color: var(--bs-table-active-color); } */

.table-hover > tbody > tr:hover {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color); }

.table-primary {
  --bs-table-bg: #d2d4d7;
  --bs-table-striped-bg: #c9cbcf;
  --bs-table-striped-color: var(--cr-primary);
  --bs-table-active-bg: #c0c3c7;
  --bs-table-active-color: var(--cr-primary);
  --bs-table-hover-bg: #c5c7cb;
  --bs-table-hover-color: var(--cr-primary);
  color: var(--cr-primary);
  border-color: #c0c3c7; }

.table-secondary {
  --bs-table-bg: #fcf2e3;
  --bs-table-striped-bg: #f1e8da;
  --bs-table-striped-color: var(--cr-primary);
  --bs-table-active-bg: #e6ded2;
  --bs-table-active-color: var(--cr-primary);
  --bs-table-hover-bg: #ebe3d6;
  --bs-table-hover-color: var(--cr-primary);
  color: var(--cr-primary);
  border-color: #e6ded2; }

.table-success {
  --bs-table-bg: #cff1e6;
  --bs-table-striped-bg: #c6e7dd;
  --bs-table-striped-color: var(--cr-primary);
  --bs-table-active-bg: #bdddd5;
  --bs-table-active-color: var(--cr-primary);
  --bs-table-hover-bg: #c2e2d9;
  --bs-table-hover-color: var(--cr-primary);
  color: var(--cr-primary);
  border-color: #bdddd5; }

.table-info {
  --bs-table-bg: #d3dff5;
  --bs-table-striped-bg: #cad6ec;
  --bs-table-striped-color: var(--cr-primary);
  --bs-table-active-bg: #c1cde2;
  --bs-table-active-color: var(--cr-primary);
  --bs-table-hover-bg: #c6d1e7;
  --bs-table-hover-color: var(--cr-primary);
  color: var(--cr-primary);
  border-color: #c1cde2; }

.table-warning {
  --bs-table-bg: #feeed1;
  --bs-table-striped-bg: #f3e4c9;
  --bs-table-striped-color: var(--cr-primary);
  --bs-table-active-bg: #e8dac2;
  --bs-table-active-color: var(--cr-primary);
  --bs-table-hover-bg: #eddfc5;
  --bs-table-hover-color: var(--cr-primary);
  color: var(--cr-primary);
  border-color: #e8dac2; }

.table-danger {
  --bs-table-bg: #f9d2da;
  --bs-table-striped-bg: #eecad2;
  --bs-table-striped-color: var(--cr-primary);
  --bs-table-active-bg: #e3c1ca;
  --bs-table-active-color: var(--cr-primary);
  --bs-table-hover-bg: #e9c5ce;
  --bs-table-hover-color: var(--cr-primary);
  color: var(--cr-primary);
  border-color: #e3c1ca; }

.table-light {
  --bs-table-bg: var(--cr-border-strong);
  --bs-table-striped-bg: #969da9;
  --bs-table-striped-color: var(--cr-primary);
  --bs-table-active-bg: #9097a3;
  --bs-table-active-color: var(--cr-primary);
  --bs-table-hover-bg: #939aa6;
  --bs-table-hover-color: var(--cr-primary);
  color: var(--cr-primary);
  border-color: #9097a3; }

.table-dark {
  --bs-table-bg: var(--cr-primary);
  --bs-table-striped-bg: #2a3441;
  --bs-table-striped-color: #ffffff;
  --bs-table-active-bg: #353e4b;
  --bs-table-active-color: #ffffff;
  --bs-table-hover-bg: #303946;
  --bs-table-hover-color: #ffffff;
  color: var(--cr-primary-ink);
  border-color: #353e4b; }

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; }

.form-label {
  margin-bottom: 0.5rem; }

.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #58677d; }

.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.625em;
  margin-bottom: 0.125rem; }
  .form-check .form-check-input {
    float: left;
    margin-left: -1.625em; }

.form-check-input {
  width: 1.5em;
  height: 1.5em;
  margin-top: 0.1875em;
  vertical-align: top;
  background-color: var(--cr-surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid var(--cr-border-2);
  -webkit-appearance: none;
          appearance: none;
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
  transition: background-color 0.2s ease-in-out, background-position 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .form-check-input {
      transition: none; } }
  .form-check-input[type="checkbox"] {
    border-radius: 0.25em; }
  .form-check-input[type="radio"] {
    border-radius: 50%;
    height: 1.125em;
    width: 1.125em;
  }
  .form-check-input:active {
    filter: brightness(90%); }
  .form-check-input:focus {
    border-color: var(--cr-focus-border);
    outline: 0;
    box-shadow: var(--cr-focus-ring); }
  .form-check-input:checked {
    background-color: var(--cr-primary);
    border-color: var(--cr-primary); }
    .form-check-input:checked[type="checkbox"] {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); }
    .form-check-input:checked[type="radio"] {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e"); }
  .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--cr-primary);
    border-color: var(--cr-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); }
  .form-check-input:disabled {
    pointer-events: none;
    filter: none;
    opacity: 0.5; }
  .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
    opacity: 0.5; }

.form-switch {
  /* Flex row so the toggle and its label are perfectly centered against each
     other, instead of Bootstrap's float + margin-top hack which leaves the
     switch sitting slightly below the label's optical centre. */
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-left: 0; }
  .form-switch .form-check-input {
    width: 2.25em;
    /* Undo the float/offset used for block-flow checkboxes; flex centres it. */
    float: none;
    flex-shrink: 0;
    margin-top: 0;
    margin-left: 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%234B5563'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2.25em;
    transition: background-position 0.15s ease-in-out; }
  .form-switch .form-check-label {
    margin-bottom: 0; }
    @media (prefers-reduced-motion: reduce) {
      .form-switch .form-check-input {
        transition: none; } }
    .form-switch .form-check-input:focus {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%234d6689'/%3e%3c/svg%3e"); }
    .form-switch .form-check-input:checked {
      background-position: right center;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); }

.form-check-inline {
  display: inline-block;
  margin-right: 1rem; }

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none; }
  .btn-check[disabled] + .btn, .btn-check:disabled + .btn {
    pointer-events: none;
    filter: none;
    opacity: 0.65; }

.form-range {
  width: 100%;
  height: 1.36rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
          appearance: none; }
  .form-range:focus {
    outline: 0; }
    .form-range:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 1px var(--cr-surface-2), 0 0 0 0.18rem rgba(31, 41, 55, 0.25); }
    .form-range:focus::-moz-range-thumb {
      box-shadow: 0 0 0 1px var(--cr-surface-2), 0 0 0 0.18rem rgba(31, 41, 55, 0.25); }
  .form-range::-moz-focus-outer {
    border: 0; }
  .form-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: var(--cr-primary);
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 0.1rem 0.25rem rgba(17, 24, 39, 0.1);
    -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
            appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .form-range::-webkit-slider-thumb {
        -webkit-transition: none;
        transition: none; } }
    .form-range::-webkit-slider-thumb:active {
      background-color: #627fa7; }
  .form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--cr-border-2);
    border-color: transparent;
    border-radius: 1rem;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.0125); }
  .form-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: var(--cr-primary);
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 0.1rem 0.25rem rgba(17, 24, 39, 0.1);
    -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .form-range::-moz-range-thumb {
        -moz-transition: none;
        transition: none; } }
    .form-range::-moz-range-thumb:active {
      background-color: #627fa7; }
  .form-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--cr-border-2);
    border-color: transparent;
    border-radius: 1rem;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.0125); }
  .form-range:disabled {
    pointer-events: none; }
    .form-range:disabled::-webkit-slider-thumb {
      background-color: var(--cr-muted); }
    .form-range:disabled::-moz-range-thumb {
      background-color: var(--cr-muted); }

.form-floating {
  position: relative; }
  .form-floating > .form-control,
  .form-floating > .form-select {
    height: 3.625rem;
    padding: 1rem 1rem; }
  .form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 1rem;
    pointer-events: none;
    border: 0.0625rem solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; }
    @media (prefers-reduced-motion: reduce) {
      .form-floating > label {
        transition: none; } }
  .form-floating > .form-control::placeholder {
    color: transparent; }
  .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem; }
  .form-floating > .form-control:-webkit-autofill {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem; }
  .form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem; }
  .form-floating > .form-control:focus ~ label,
  .form-floating > .form-control:not(:placeholder-shown) ~ label,
  .form-floating > .form-select ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); }
  .form-floating > .form-control:-webkit-autofill ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); }

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--cr-success); }

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
  display: block; }

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: var(--cr-success);
  padding-right: calc(1.5em + 1rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310B981' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.25rem) center;
  background-size: calc(0.75em + 0.5rem) calc(0.75em + 0.5rem); }
  .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
    border-color: var(--cr-success);
    box-shadow: 0 0 0 0.18rem rgba(16, 185, 129, 0.25); }

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.5em + 1rem);
  background-position: top calc(0.375em + 0.25rem) right calc(0.375em + 0.25rem); }

.was-validated .form-select:valid, .form-select.is-valid {
  border-color: var(--cr-success); }
  .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
    padding-right: 3.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231F2937' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310B981' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-position: right 1rem center, center right 2rem;
    background-size: 16px 12px, calc(0.75em + 0.5rem) calc(0.75em + 0.5rem); }
  .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
    border-color: var(--cr-success);
    box-shadow: 0 0 0 0.18rem rgba(16, 185, 129, 0.25); }

.was-validated .form-check-input:valid, .form-check-input.is-valid {
  border-color: var(--cr-success); }
  .was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
    background-color: var(--cr-success); }
  .was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
    box-shadow: 0 0 0 0.18rem rgba(16, 185, 129, 0.25); }
  .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
    color: var(--cr-success); }

.form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: .5em; }

.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid, .was-validated
.input-group .form-select:valid,
.input-group .form-select.is-valid {
  z-index: 1; }
  .was-validated .input-group .form-control:valid:focus, .input-group .form-control.is-valid:focus, .was-validated
  .input-group .form-select:valid:focus,
  .input-group .form-select.is-valid:focus {
    z-index: 3; }

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--cr-danger); }

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block; }

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: var(--cr-danger);
  padding-right: calc(1.5em + 1rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23E11D48' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23E11D48' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.25rem) center;
  background-size: calc(0.75em + 0.5rem) calc(0.75em + 0.5rem); }
  .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
    border-color: var(--cr-danger);
    box-shadow: 0 0 0 0.18rem rgba(225, 29, 72, 0.25); }

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 1rem);
  background-position: top calc(0.375em + 0.25rem) right calc(0.375em + 0.25rem); }

.was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: var(--cr-danger); }
  .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
    padding-right: 3.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231F2937' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23E11D48' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23E11D48' stroke='none'/%3e%3c/svg%3e");
    background-position: right 1rem center, center right 2rem;
    background-size: 16px 12px, calc(0.75em + 0.5rem) calc(0.75em + 0.5rem); }
  .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
    border-color: var(--cr-danger);
    box-shadow: 0 0 0 0.18rem rgba(225, 29, 72, 0.25); }

.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
  border-color: var(--cr-danger); }
  .was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
    background-color: var(--cr-danger); }
  .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
    box-shadow: 0 0 0 0.18rem rgba(225, 29, 72, 0.25); }
  .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
    color: var(--cr-danger); }

.form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: .5em; }

.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid, .was-validated
.input-group .form-select:invalid,
.input-group .form-select.is-invalid {
  z-index: 2; }
  .was-validated .input-group .form-control:invalid:focus, .input-group .form-control.is-invalid:focus, .was-validated
  .input-group .form-select:invalid:focus,
  .input-group .form-select.is-invalid:focus {
    z-index: 3; }

.btn {
  display: inline-block;
  font-weight: 500;
  line-height: 1.5;
  color: var(--cr-text-2);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  background-color: transparent;
  border: 0.0625rem solid transparent;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: none; } }
  .btn:hover {
    color: var(--cr-text-2); }
  .btn-check:focus + .btn, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.18rem rgba(31, 41, 55, 0.25); }
  .btn-check:checked + .btn,
  .btn-check:active + .btn, .btn:active, .btn.active {
    box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125); }
    .btn-check:checked + .btn:focus,
    .btn-check:active + .btn:focus, .btn:active:focus, .btn.active:focus {
      box-shadow: 0 0 0 0.18rem rgba(31, 41, 55, 0.25), inset 0 3px 5px rgba(17, 24, 39, 0.125); }
  .btn:disabled, .btn.disabled,
  fieldset:disabled .btn {
    pointer-events: none;
    opacity: 0.65;
    box-shadow: none; }

.btn-primary {
  color: var(--cr-primary-ink);
  background-color: var(--cr-primary);
  border-color: var(--cr-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-primary:hover {
    color: var(--cr-primary-ink);
    background-color: #1a232f;
    border-color: #19212c; }
  .btn-check:focus + .btn-primary, .btn-primary:focus {
    color: var(--cr-primary-ink);
    background-color: #1a232f;
    border-color: #19212c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(65, 73, 85, 0.5); }
  .btn-check:checked + .btn-primary,
  .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active,
  .show > .btn-primary.dropdown-toggle {
    color: var(--cr-primary-ink);
    background-color: #19212c;
    border-color: #171f29; }
    .btn-check:checked + .btn-primary:focus,
    .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus,
    .show > .btn-primary.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(65, 73, 85, 0.5); }
  .btn-primary:disabled, .btn-primary.disabled {
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary);
    border-color: var(--cr-primary); }

.btn-secondary {
  color: var(--cr-primary);
  background-color: var(--cr-secondary);
  border-color: #f0bc74;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-secondary:hover {
    color: var(--cr-primary);
    background-color: #fbd4a0;
    border-color: #f2c382; }
  .btn-check:focus + .btn-secondary, .btn-secondary:focus {
    color: var(--cr-primary);
    background-color: #fbd4a0;
    border-color: #f2c382;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(209, 166, 107, 0.5); }
  .btn-check:checked + .btn-secondary,
  .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active,
  .show > .btn-secondary.dropdown-toggle {
    color: var(--cr-primary);
    background-color: #f7c98f;
    border-color: #f2c382; }
    .btn-check:checked + .btn-secondary:focus,
    .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus,
    .show > .btn-secondary.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(209, 166, 107, 0.5); }
  .btn-secondary:disabled, .btn-secondary.disabled {
    color: var(--cr-primary);
    background-color: var(--cr-secondary);
    border-color: #f0bc74; }

.btn-tertiary {
  color: var(--cr-primary-ink);
  background-color: var(--cr-tertiary);
  border-color: var(--cr-tertiary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-tertiary:hover {
    color: var(--cr-primary-ink);
    background-color: #2a2a5a;
    border-color: #272755; }
  .btn-check:focus + .btn-tertiary, .btn-tertiary:focus {
    color: var(--cr-primary-ink);
    background-color: #2a2a5a;
    border-color: #272755;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(80, 80, 128, 0.5); }
  .btn-check:checked + .btn-tertiary,
  .btn-check:active + .btn-tertiary, .btn-tertiary:active, .btn-tertiary.active,
  .show > .btn-tertiary.dropdown-toggle {
    color: var(--cr-primary-ink);
    background-color: #272755;
    border-color: #252550; }
    .btn-check:checked + .btn-tertiary:focus,
    .btn-check:active + .btn-tertiary:focus, .btn-tertiary:active:focus, .btn-tertiary.active:focus,
    .show > .btn-tertiary.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(80, 80, 128, 0.5); }
  .btn-tertiary:disabled, .btn-tertiary.disabled {
    color: var(--cr-primary-ink);
    background-color: var(--cr-tertiary);
    border-color: var(--cr-tertiary); }

.btn-success {
  color: var(--cr-save-ink);
  background-color: var(--cr-save);
  border-color: var(--cr-save);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-success:hover {
    color: var(--cr-save-ink);
    background-color: var(--cr-save-hover);
    border-color: var(--cr-save-hover); }
  .btn-check:focus + .btn-success, .btn-success:focus {
    color: var(--cr-save-ink);
    background-color: var(--cr-save-hover);
    border-color: var(--cr-save-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem var(--cr-save-ring); }
  .btn-check:checked + .btn-success,
  .btn-check:active + .btn-success, .btn-success:active, .btn-success.active,
  .show > .btn-success.dropdown-toggle {
    color: var(--cr-save-ink);
    background-color: var(--cr-save-active);
    border-color: var(--cr-save-active); }
    .btn-check:checked + .btn-success:focus,
    .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus,
    .show > .btn-success.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem var(--cr-save-ring); }
  .btn-success:disabled, .btn-success.disabled {
    color: var(--cr-save-ink);
    background-color: var(--cr-save);
    border-color: var(--cr-save); }

.btn-info {
  color: var(--cr-primary-ink);
  background-color: var(--cr-info);
  border-color: var(--cr-info);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-info:hover {
    color: var(--cr-primary-ink);
    background-color: #1e52af;
    border-color: #1c4ea5; }
  .btn-check:focus + .btn-info, .btn-info:focus {
    color: var(--cr-primary-ink);
    background-color: #1e52af;
    border-color: #1c4ea5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(68, 121, 213, 0.5); }
  .btn-check:checked + .btn-info,
  .btn-check:active + .btn-info, .btn-info:active, .btn-info.active,
  .show > .btn-info.dropdown-toggle {
    color: var(--cr-primary-ink);
    background-color: #1c4ea5;
    border-color: #1a499b; }
    .btn-check:checked + .btn-info:focus,
    .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus,
    .show > .btn-info.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(68, 121, 213, 0.5); }
  .btn-info:disabled, .btn-info.disabled {
    color: var(--cr-primary-ink);
    background-color: var(--cr-info);
    border-color: var(--cr-info); }

.btn-warning {
  color: var(--cr-primary);
  background-color: var(--cr-warning);
  border-color: var(--cr-warning);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-warning:hover {
    color: var(--cr-primary);
    background-color: #fcb63b;
    border-color: #fbb22f; }
  .btn-check:focus + .btn-warning, .btn-warning:focus {
    color: var(--cr-primary);
    background-color: #fcb63b;
    border-color: #fbb22f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(218, 150, 29, 0.5); }
  .btn-check:checked + .btn-warning,
  .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active,
  .show > .btn-warning.dropdown-toggle {
    color: var(--cr-primary);
    background-color: #fcba46;
    border-color: #fbb22f; }
    .btn-check:checked + .btn-warning:focus,
    .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus,
    .show > .btn-warning.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(218, 150, 29, 0.5); }
  .btn-warning:disabled, .btn-warning.disabled {
    color: var(--cr-primary);
    background-color: var(--cr-warning);
    border-color: var(--cr-warning); }

.btn-danger {
  color: var(--cr-primary-ink);
  background-color: var(--cr-danger);
  border-color: var(--cr-danger);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-danger:hover {
    color: var(--cr-primary-ink);
    background-color: #bf193d;
    border-color: #b4173a; }
  .btn-check:focus + .btn-danger, .btn-danger:focus {
    color: var(--cr-primary-ink);
    background-color: #bf193d;
    border-color: #b4173a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(230, 63, 99, 0.5); }
  .btn-check:checked + .btn-danger,
  .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active,
  .show > .btn-danger.dropdown-toggle {
    color: var(--cr-primary-ink);
    background-color: #b4173a;
    border-color: #a91636; }
    .btn-check:checked + .btn-danger:focus,
    .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus,
    .show > .btn-danger.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(230, 63, 99, 0.5); }
  .btn-danger:disabled, .btn-danger.disabled {
    color: var(--cr-primary-ink);
    background-color: var(--cr-danger);
    border-color: var(--cr-danger); }

.btn-white {
  color: var(--cr-primary);
  background-color: var(--cr-surface);
  border-color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-white:hover {
    color: var(--cr-primary);
    background-color: white;
    border-color: white; }
  .btn-check:focus + .btn-white, .btn-white:focus {
    color: var(--cr-primary);
    background-color: white;
    border-color: white;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(221, 223, 225, 0.5); }
  .btn-check:checked + .btn-white,
  .btn-check:active + .btn-white, .btn-white:active, .btn-white.active,
  .show > .btn-white.dropdown-toggle {
    color: var(--cr-primary);
    background-color: white;
    border-color: white; }
    .btn-check:checked + .btn-white:focus,
    .btn-check:active + .btn-white:focus, .btn-white:active:focus, .btn-white.active:focus,
    .show > .btn-white.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(221, 223, 225, 0.5); }
  .btn-white:disabled, .btn-white.disabled {
    color: var(--cr-primary);
    background-color: var(--cr-surface);
    border-color: #ffffff; }

.btn-indigo {
  color: var(--cr-primary-ink);
  background-color: #4F46E5;
  border-color: #4F46E5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-indigo:hover {
    color: var(--cr-primary-ink);
    background-color: #433cc3;
    border-color: #3f38b7; }
  .btn-check:focus + .btn-indigo, .btn-indigo:focus {
    color: var(--cr-primary-ink);
    background-color: #433cc3;
    border-color: #3f38b7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(105, 98, 233, 0.5); }
  .btn-check:checked + .btn-indigo,
  .btn-check:active + .btn-indigo, .btn-indigo:active, .btn-indigo.active,
  .show > .btn-indigo.dropdown-toggle {
    color: var(--cr-primary-ink);
    background-color: #3f38b7;
    border-color: #3b35ac; }
    .btn-check:checked + .btn-indigo:focus,
    .btn-check:active + .btn-indigo:focus, .btn-indigo:active:focus, .btn-indigo.active:focus,
    .show > .btn-indigo.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(105, 98, 233, 0.5); }
  .btn-indigo:disabled, .btn-indigo.disabled {
    color: var(--cr-primary-ink);
    background-color: #4F46E5;
    border-color: #4F46E5; }

.btn-purple {
  color: var(--cr-primary-ink);
  background-color: #7C3AED;
  border-color: #7C3AED;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-purple:hover {
    color: var(--cr-primary-ink);
    background-color: #6931c9;
    border-color: #632ebe; }
  .btn-check:focus + .btn-purple, .btn-purple:focus {
    color: var(--cr-primary-ink);
    background-color: #6931c9;
    border-color: #632ebe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(144, 88, 240, 0.5); }
  .btn-check:checked + .btn-purple,
  .btn-check:active + .btn-purple, .btn-purple:active, .btn-purple.active,
  .show > .btn-purple.dropdown-toggle {
    color: var(--cr-primary-ink);
    background-color: #632ebe;
    border-color: #5d2cb2; }
    .btn-check:checked + .btn-purple:focus,
    .btn-check:active + .btn-purple:focus, .btn-purple:active:focus, .btn-purple.active:focus,
    .show > .btn-purple.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(144, 88, 240, 0.5); }
  .btn-purple:disabled, .btn-purple.disabled {
    color: var(--cr-primary-ink);
    background-color: #7C3AED;
    border-color: #7C3AED; }

.btn-yellow-100 {
  color: var(--cr-primary);
  background-color: #ffeed6;
  border-color: #ffeed6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-yellow-100:hover {
    color: var(--cr-primary);
    background-color: #fff1dc;
    border-color: #fff0da; }
  .btn-check:focus + .btn-yellow-100, .btn-yellow-100:focus {
    color: var(--cr-primary);
    background-color: #fff1dc;
    border-color: #fff0da;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(221, 208, 190, 0.5); }
  .btn-check:checked + .btn-yellow-100,
  .btn-check:active + .btn-yellow-100, .btn-yellow-100:active, .btn-yellow-100.active,
  .show > .btn-yellow-100.dropdown-toggle {
    color: var(--cr-primary);
    background-color: #fff1de;
    border-color: #fff0da; }
    .btn-check:checked + .btn-yellow-100:focus,
    .btn-check:active + .btn-yellow-100:focus, .btn-yellow-100:active:focus, .btn-yellow-100.active:focus,
    .show > .btn-yellow-100.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(221, 208, 190, 0.5); }
  .btn-yellow-100:disabled, .btn-yellow-100.disabled {
    color: var(--cr-primary);
    background-color: #ffeed6;
    border-color: #ffeed6; }

.btn-yellow-200 {
  color: var(--cr-primary);
  background-color: #f5dbb8;
  border-color: #f5dbb8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-yellow-200:hover {
    color: var(--cr-primary);
    background-color: #f7e0c3;
    border-color: #f6dfbf; }
  .btn-check:focus + .btn-yellow-200, .btn-yellow-200:focus {
    color: var(--cr-primary);
    background-color: #f7e0c3;
    border-color: #f6dfbf;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(213, 192, 165, 0.5); }
  .btn-check:checked + .btn-yellow-200,
  .btn-check:active + .btn-yellow-200, .btn-yellow-200:active, .btn-yellow-200.active,
  .show > .btn-yellow-200.dropdown-toggle {
    color: var(--cr-primary);
    background-color: #f7e2c6;
    border-color: #f6dfbf; }
    .btn-check:checked + .btn-yellow-200:focus,
    .btn-check:active + .btn-yellow-200:focus, .btn-yellow-200:active:focus, .btn-yellow-200.active:focus,
    .show > .btn-yellow-200.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(213, 192, 165, 0.5); }
  .btn-yellow-200:disabled, .btn-yellow-200.disabled {
    color: var(--cr-primary);
    background-color: #f5dbb8;
    border-color: #f5dbb8; }

.btn-gray-50 {
  color: var(--cr-primary);
  background-color: #F9FAFB;
  border-color: #F9FAFB;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-gray-50:hover {
    color: var(--cr-primary);
    background-color: #fafbfc;
    border-color: #fafbfb; }
  .btn-check:focus + .btn-gray-50, .btn-gray-50:focus {
    color: var(--cr-primary);
    background-color: #fafbfc;
    border-color: #fafbfb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(216, 219, 222, 0.5); }
  .btn-check:checked + .btn-gray-50,
  .btn-check:active + .btn-gray-50, .btn-gray-50:active, .btn-gray-50.active,
  .show > .btn-gray-50.dropdown-toggle {
    color: var(--cr-primary);
    background-color: #fafbfc;
    border-color: #fafbfb; }
    .btn-check:checked + .btn-gray-50:focus,
    .btn-check:active + .btn-gray-50:focus, .btn-gray-50:active:focus, .btn-gray-50.active:focus,
    .show > .btn-gray-50.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(216, 219, 222, 0.5); }
  .btn-gray-50:disabled, .btn-gray-50.disabled {
    color: var(--cr-primary);
    background-color: #F9FAFB;
    border-color: #F9FAFB; }

.btn-gray-100 {
  color: var(--cr-primary);
  background-color: var(--cr-surface-2);
  border-color: var(--cr-surface-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-gray-100:hover {
    color: var(--cr-primary);
    background-color: #f4f6f7;
    border-color: #f3f5f7; }
  .btn-check:focus + .btn-gray-100, .btn-gray-100:focus {
    color: var(--cr-primary);
    background-color: #f4f6f7;
    border-color: #f3f5f7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(210, 214, 217, 0.5); }
  .btn-check:checked + .btn-gray-100,
  .btn-check:active + .btn-gray-100, .btn-gray-100:active, .btn-gray-100.active,
  .show > .btn-gray-100.dropdown-toggle {
    color: var(--cr-primary);
    background-color: #f5f6f8;
    border-color: #f3f5f7; }
    .btn-check:checked + .btn-gray-100:focus,
    .btn-check:active + .btn-gray-100:focus, .btn-gray-100:active:focus, .btn-gray-100.active:focus,
    .show > .btn-gray-100.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(210, 214, 217, 0.5); }
  .btn-gray-100:disabled, .btn-gray-100.disabled {
    color: var(--cr-primary);
    background-color: var(--cr-surface-2);
    border-color: var(--cr-surface-2); }

.btn-gray-200 {
  color: var(--cr-primary);
  background-color: var(--cr-border);
  border-color: var(--cr-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-gray-200:hover {
    color: var(--cr-primary);
    background-color: #e9ebee;
    border-color: #e8e9ed; }
  .btn-check:focus + .btn-gray-200, .btn-gray-200:focus {
    color: var(--cr-primary);
    background-color: #e9ebee;
    border-color: #e8e9ed;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(199, 203, 208, 0.5); }
  .btn-check:checked + .btn-gray-200,
  .btn-check:active + .btn-gray-200, .btn-gray-200:active, .btn-gray-200.active,
  .show > .btn-gray-200.dropdown-toggle {
    color: var(--cr-primary);
    background-color: #eaecef;
    border-color: #e8e9ed; }
    .btn-check:checked + .btn-gray-200:focus,
    .btn-check:active + .btn-gray-200:focus, .btn-gray-200:active:focus, .btn-gray-200.active:focus,
    .show > .btn-gray-200.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(199, 203, 208, 0.5); }
  .btn-gray-200:disabled, .btn-gray-200.disabled {
    color: var(--cr-primary);
    background-color: var(--cr-border);
    border-color: var(--cr-border); }

/* Warm tone — gray buttons track the neutral palette via the tone switcher */
[data-cr-tone="warm"] .btn-gray-100,
[data-cr-tone="warm"] .btn-gray-100:disabled,
[data-cr-tone="warm"] .btn-gray-100.disabled {
  color: var(--cr-primary);
  background-color: var(--cr-surface-2);
  border-color: var(--cr-surface-2); }
[data-cr-tone="warm"] .btn-gray-100:hover,
[data-cr-tone="warm"] .btn-check:focus + .btn-gray-100,
[data-cr-tone="warm"] .btn-gray-100:focus {
  color: var(--cr-primary);
  background-color: var(--cr-surface-3);
  border-color: var(--cr-surface-3); }

[data-cr-tone="warm"] .btn-gray-200,
[data-cr-tone="warm"] .btn-gray-200:disabled,
[data-cr-tone="warm"] .btn-gray-200.disabled {
  color: var(--cr-primary);
  background-color: var(--cr-surface-3);
  border-color: var(--cr-surface-3); }
[data-cr-tone="warm"] .btn-gray-200:hover,
[data-cr-tone="warm"] .btn-check:focus + .btn-gray-200,
[data-cr-tone="warm"] .btn-gray-200:focus {
  color: var(--cr-primary);
  background-color: var(--cr-border-2);
  border-color: var(--cr-border-2); }

.btn-gray-300 {
  color: var(--cr-primary);
  background-color: var(--cr-border-2);
  border-color: var(--cr-border-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-gray-300:hover {
    color: var(--cr-primary);
    background-color: #d8dbe0;
    border-color: #d6d9df; }
  .btn-check:focus + .btn-gray-300, .btn-gray-300:focus {
    color: var(--cr-primary);
    background-color: #d8dbe0;
    border-color: #d6d9df;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(182, 187, 194, 0.5); }
  .btn-check:checked + .btn-gray-300,
  .btn-check:active + .btn-gray-300, .btn-gray-300:active, .btn-gray-300.active,
  .show > .btn-gray-300.dropdown-toggle {
    color: var(--cr-primary);
    background-color: #dadde2;
    border-color: #d6d9df; }
    .btn-check:checked + .btn-gray-300:focus,
    .btn-check:active + .btn-gray-300:focus, .btn-gray-300:active:focus, .btn-gray-300.active:focus,
    .show > .btn-gray-300.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(182, 187, 194, 0.5); }
  .btn-gray-300:disabled, .btn-gray-300.disabled {
    color: var(--cr-primary);
    background-color: var(--cr-border-2);
    border-color: var(--cr-border-2); }

.btn-gray-400 {
  color: var(--cr-primary);
  background-color: var(--cr-border-strong);
  border-color: var(--cr-border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-gray-400:hover {
    color: var(--cr-primary);
    background-color: #abb1bb;
    border-color: #a6acb7; }
  .btn-check:focus + .btn-gray-400, .btn-gray-400:focus {
    color: var(--cr-primary);
    background-color: #abb1bb;
    border-color: #a6acb7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(137, 145, 157, 0.5); }
  .btn-check:checked + .btn-gray-400,
  .btn-check:active + .btn-gray-400, .btn-gray-400:active, .btn-gray-400.active,
  .show > .btn-gray-400.dropdown-toggle {
    color: var(--cr-primary);
    background-color: #b0b5bf;
    border-color: #a6acb7; }
    .btn-check:checked + .btn-gray-400:focus,
    .btn-check:active + .btn-gray-400:focus, .btn-gray-400:active:focus, .btn-gray-400.active:focus,
    .show > .btn-gray-400.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(137, 145, 157, 0.5); }
  .btn-gray-400:disabled, .btn-gray-400.disabled {
    color: var(--cr-primary);
    background-color: var(--cr-border-strong);
    border-color: var(--cr-border-strong); }

.btn-gray-500 {
  color: var(--cr-primary-ink);
  background-color: var(--cr-muted);
  border-color: var(--cr-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-gray-500:hover {
    color: var(--cr-primary-ink);
    background-color: #5b616d;
    border-color: #565b66; }
  .btn-check:focus + .btn-gray-500, .btn-gray-500:focus {
    color: var(--cr-primary-ink);
    background-color: #5b616d;
    border-color: #565b66;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(129, 135, 147, 0.5); }
  .btn-check:checked + .btn-gray-500,
  .btn-check:active + .btn-gray-500, .btn-gray-500:active, .btn-gray-500.active,
  .show > .btn-gray-500.dropdown-toggle {
    color: var(--cr-primary-ink);
    background-color: #565b66;
    border-color: #505660; }
    .btn-check:checked + .btn-gray-500:focus,
    .btn-check:active + .btn-gray-500:focus, .btn-gray-500:active:focus, .btn-gray-500.active:focus,
    .show > .btn-gray-500.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(129, 135, 147, 0.5); }
  .btn-gray-500:disabled, .btn-gray-500.disabled {
    color: var(--cr-primary-ink);
    background-color: var(--cr-muted);
    border-color: var(--cr-muted); }

.btn-gray-600 {
  color: var(--cr-primary-ink);
  background-color: #4B5563;
  border-color: #4B5563;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-gray-600:hover {
    color: var(--cr-primary-ink);
    background-color: #404854;
    border-color: #3c444f; }
  .btn-check:focus + .btn-gray-600, .btn-gray-600:focus {
    color: var(--cr-primary-ink);
    background-color: #404854;
    border-color: #3c444f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(102, 111, 122, 0.5); }
  .btn-check:checked + .btn-gray-600,
  .btn-check:active + .btn-gray-600, .btn-gray-600:active, .btn-gray-600.active,
  .show > .btn-gray-600.dropdown-toggle {
    color: var(--cr-primary-ink);
    background-color: #3c444f;
    border-color: #38404a; }
    .btn-check:checked + .btn-gray-600:focus,
    .btn-check:active + .btn-gray-600:focus, .btn-gray-600:active:focus, .btn-gray-600.active:focus,
    .show > .btn-gray-600.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(102, 111, 122, 0.5); }
  .btn-gray-600:disabled, .btn-gray-600.disabled {
    color: var(--cr-primary-ink);
    background-color: #4B5563;
    border-color: #4B5563; }

.btn-gray-700 {
  color: var(--cr-primary-ink);
  background-color: var(--cr-text-2);
  border-color: var(--cr-text-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-gray-700:hover {
    color: var(--cr-primary-ink);
    background-color: #2f3745;
    border-color: #2c3441; }
  .btn-check:focus + .btn-gray-700, .btn-gray-700:focus {
    color: var(--cr-primary-ink);
    background-color: #2f3745;
    border-color: #2c3441;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(85, 94, 107, 0.5); }
  .btn-check:checked + .btn-gray-700,
  .btn-check:active + .btn-gray-700, .btn-gray-700:active, .btn-gray-700.active,
  .show > .btn-gray-700.dropdown-toggle {
    color: var(--cr-primary-ink);
    background-color: #2c3441;
    border-color: #29313d; }
    .btn-check:checked + .btn-gray-700:focus,
    .btn-check:active + .btn-gray-700:focus, .btn-gray-700:active:focus, .btn-gray-700.active:focus,
    .show > .btn-gray-700.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(85, 94, 107, 0.5); }
  .btn-gray-700:disabled, .btn-gray-700.disabled {
    color: var(--cr-primary-ink);
    background-color: var(--cr-text-2);
    border-color: var(--cr-text-2); }

.btn-gray-800 {
  color: var(--cr-primary-ink);
  background-color: var(--cr-primary);
  border-color: var(--cr-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-gray-800:hover {
    color: var(--cr-primary-ink);
    background-color: #1a232f;
    border-color: #19212c; }
  .btn-check:focus + .btn-gray-800, .btn-gray-800:focus {
    color: var(--cr-primary-ink);
    background-color: #1a232f;
    border-color: #19212c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(65, 73, 85, 0.5); }
  .btn-check:checked + .btn-gray-800,
  .btn-check:active + .btn-gray-800, .btn-gray-800:active, .btn-gray-800.active,
  .show > .btn-gray-800.dropdown-toggle {
    color: var(--cr-primary-ink);
    background-color: #19212c;
    border-color: #171f29; }
    .btn-check:checked + .btn-gray-800:focus,
    .btn-check:active + .btn-gray-800:focus, .btn-gray-800:active:focus, .btn-gray-800.active:focus,
    .show > .btn-gray-800.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(65, 73, 85, 0.5); }
  .btn-gray-800:disabled, .btn-gray-800.disabled {
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary);
    border-color: var(--cr-primary); }

.btn-gray-900 {
  color: var(--cr-primary-ink);
  background-color: var(--cr-primary-deep);
  border-color: var(--cr-primary-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075); }
  .btn-gray-900:hover {
    color: var(--cr-primary-ink);
    background-color: #0e1421;
    border-color: #0e131f; }
  .btn-check:focus + .btn-gray-900, .btn-gray-900:focus {
    color: var(--cr-primary-ink);
    background-color: #0e1421;
    border-color: #0e131f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(53, 59, 71, 0.5); }
  .btn-check:checked + .btn-gray-900,
  .btn-check:active + .btn-gray-900, .btn-gray-900:active, .btn-gray-900.active,
  .show > .btn-gray-900.dropdown-toggle {
    color: var(--cr-primary-ink);
    background-color: #0e131f;
    border-color: #0d121d; }
    .btn-check:checked + .btn-gray-900:focus,
    .btn-check:active + .btn-gray-900:focus, .btn-gray-900:active:focus, .btn-gray-900.active:focus,
    .show > .btn-gray-900.dropdown-toggle:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(53, 59, 71, 0.5); }
  .btn-gray-900:disabled, .btn-gray-900.disabled {
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary-deep);
    border-color: var(--cr-primary-deep); }

.btn-outline-primary {
  color: var(--cr-primary);
  border-color: var(--cr-primary); }
  .btn-outline-primary:hover {
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary);
    border-color: var(--cr-primary); }
  .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    box-shadow: 0 0 0 0.18rem rgba(31, 41, 55, 0.5); }
  .btn-check:checked + .btn-outline-primary,
  .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary);
    border-color: var(--cr-primary); }
    .btn-check:checked + .btn-outline-primary:focus,
    .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(31, 41, 55, 0.5); }
  .btn-outline-primary:disabled, .btn-outline-primary.disabled {
    color: var(--cr-primary);
    background-color: transparent; }

.btn-outline-secondary {
  color: #f0bc74;
  border-color: #f0bc74; }
  .btn-outline-secondary:hover {
    color: var(--cr-primary);
    background-color: var(--cr-secondary);
    border-color: #f0bc74; }
  .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
    box-shadow: 0 0 0 0.18rem rgba(240, 188, 116, 0.5); }
  .btn-check:checked + .btn-outline-secondary,
  .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
    color: var(--cr-primary);
    background-color: var(--cr-secondary);
    border-color: #f0bc74; }
    .btn-check:checked + .btn-outline-secondary:focus,
    .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(240, 188, 116, 0.5); }
  .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
    color: #f0bc74;
    background-color: transparent; }

.btn-outline-tertiary {
  color: var(--cr-tertiary);
  border-color: var(--cr-tertiary); }
  .btn-outline-tertiary:hover {
    color: var(--cr-primary-ink);
    background-color: var(--cr-tertiary);
    border-color: var(--cr-tertiary); }
  .btn-check:focus + .btn-outline-tertiary, .btn-outline-tertiary:focus {
    box-shadow: 0 0 0 0.18rem rgba(49, 49, 106, 0.5); }
  .btn-check:checked + .btn-outline-tertiary,
  .btn-check:active + .btn-outline-tertiary, .btn-outline-tertiary:active, .btn-outline-tertiary.active, .btn-outline-tertiary.dropdown-toggle.show {
    color: var(--cr-primary-ink);
    background-color: var(--cr-tertiary);
    border-color: var(--cr-tertiary); }
    .btn-check:checked + .btn-outline-tertiary:focus,
    .btn-check:active + .btn-outline-tertiary:focus, .btn-outline-tertiary:active:focus, .btn-outline-tertiary.active:focus, .btn-outline-tertiary.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(49, 49, 106, 0.5); }
  .btn-outline-tertiary:disabled, .btn-outline-tertiary.disabled {
    color: var(--cr-tertiary);
    background-color: transparent; }

.btn-outline-success {
  color: var(--cr-save);
  border-color: var(--cr-save); }
  .btn-outline-success:hover {
    color: var(--cr-save-ink);
    background-color: var(--cr-save);
    border-color: var(--cr-save); }
  .btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
    box-shadow: 0 0 0 0.18rem var(--cr-save-ring); }
  .btn-check:checked + .btn-outline-success,
  .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
    color: var(--cr-save-ink);
    background-color: var(--cr-save-active);
    border-color: var(--cr-save-active); }
    .btn-check:checked + .btn-outline-success:focus,
    .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem var(--cr-save-ring); }
  .btn-outline-success:disabled, .btn-outline-success.disabled {
    color: var(--cr-save);
    background-color: transparent; }

.btn-outline-info {
  color: var(--cr-info);
  border-color: var(--cr-info); }
  .btn-outline-info:hover {
    color: var(--cr-primary-ink);
    background-color: var(--cr-info);
    border-color: var(--cr-info); }
  .btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
    box-shadow: 0 0 0 0.18rem rgba(35, 97, 206, 0.5); }
  .btn-check:checked + .btn-outline-info,
  .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
    color: var(--cr-primary-ink);
    background-color: var(--cr-info);
    border-color: var(--cr-info); }
    .btn-check:checked + .btn-outline-info:focus,
    .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(35, 97, 206, 0.5); }
  .btn-outline-info:disabled, .btn-outline-info.disabled {
    color: var(--cr-info);
    background-color: transparent; }

.btn-outline-warning {
  color: var(--cr-warning);
  border-color: var(--cr-warning); }
  .btn-outline-warning:hover {
    color: var(--cr-primary);
    background-color: var(--cr-warning);
    border-color: var(--cr-warning); }
  .btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
    box-shadow: 0 0 0 0.18rem rgba(251, 169, 24, 0.5); }
  .btn-check:checked + .btn-outline-warning,
  .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
    color: var(--cr-primary);
    background-color: var(--cr-warning);
    border-color: var(--cr-warning); }
    .btn-check:checked + .btn-outline-warning:focus,
    .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(251, 169, 24, 0.5); }
  .btn-outline-warning:disabled, .btn-outline-warning.disabled {
    color: var(--cr-warning);
    background-color: transparent; }

.btn-outline-danger {
  color: var(--cr-danger);
  border-color: var(--cr-danger); }
  .btn-outline-danger:hover {
    color: var(--cr-primary-ink);
    background-color: var(--cr-danger);
    border-color: var(--cr-danger); }
  .btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
    box-shadow: 0 0 0 0.18rem rgba(225, 29, 72, 0.5); }
  .btn-check:checked + .btn-outline-danger,
  .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show {
    color: var(--cr-primary-ink);
    background-color: var(--cr-danger);
    border-color: var(--cr-danger); }
    .btn-check:checked + .btn-outline-danger:focus,
    .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(225, 29, 72, 0.5); }
  .btn-outline-danger:disabled, .btn-outline-danger.disabled {
    color: var(--cr-danger);
    background-color: transparent; }

.btn-outline-white {
  color: var(--cr-primary-ink);
  border-color: #ffffff; }
  .btn-outline-white:hover {
    color: var(--cr-primary);
    background-color: var(--cr-surface);
    border-color: #ffffff; }
  .btn-check:focus + .btn-outline-white, .btn-outline-white:focus {
    box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.5); }
  .btn-check:checked + .btn-outline-white,
  .btn-check:active + .btn-outline-white, .btn-outline-white:active, .btn-outline-white.active, .btn-outline-white.dropdown-toggle.show {
    color: var(--cr-primary);
    background-color: var(--cr-surface);
    border-color: #ffffff; }
    .btn-check:checked + .btn-outline-white:focus,
    .btn-check:active + .btn-outline-white:focus, .btn-outline-white:active:focus, .btn-outline-white.active:focus, .btn-outline-white.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(255, 255, 255, 0.5); }
  .btn-outline-white:disabled, .btn-outline-white.disabled {
    color: var(--cr-primary-ink);
    background-color: transparent; }

.btn-outline-indigo {
  color: #4F46E5;
  border-color: #4F46E5; }
  .btn-outline-indigo:hover {
    color: var(--cr-primary-ink);
    background-color: #4F46E5;
    border-color: #4F46E5; }
  .btn-check:focus + .btn-outline-indigo, .btn-outline-indigo:focus {
    box-shadow: 0 0 0 0.18rem rgba(79, 70, 229, 0.5); }
  .btn-check:checked + .btn-outline-indigo,
  .btn-check:active + .btn-outline-indigo, .btn-outline-indigo:active, .btn-outline-indigo.active, .btn-outline-indigo.dropdown-toggle.show {
    color: var(--cr-primary-ink);
    background-color: #4F46E5;
    border-color: #4F46E5; }
    .btn-check:checked + .btn-outline-indigo:focus,
    .btn-check:active + .btn-outline-indigo:focus, .btn-outline-indigo:active:focus, .btn-outline-indigo.active:focus, .btn-outline-indigo.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(79, 70, 229, 0.5); }
  .btn-outline-indigo:disabled, .btn-outline-indigo.disabled {
    color: #4F46E5;
    background-color: transparent; }

.btn-outline-purple {
  color: #7C3AED;
  border-color: #7C3AED; }
  .btn-outline-purple:hover {
    color: var(--cr-primary-ink);
    background-color: #7C3AED;
    border-color: #7C3AED; }
  .btn-check:focus + .btn-outline-purple, .btn-outline-purple:focus {
    box-shadow: 0 0 0 0.18rem rgba(124, 58, 237, 0.5); }
  .btn-check:checked + .btn-outline-purple,
  .btn-check:active + .btn-outline-purple, .btn-outline-purple:active, .btn-outline-purple.active, .btn-outline-purple.dropdown-toggle.show {
    color: var(--cr-primary-ink);
    background-color: #7C3AED;
    border-color: #7C3AED; }
    .btn-check:checked + .btn-outline-purple:focus,
    .btn-check:active + .btn-outline-purple:focus, .btn-outline-purple:active:focus, .btn-outline-purple.active:focus, .btn-outline-purple.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(124, 58, 237, 0.5); }
  .btn-outline-purple:disabled, .btn-outline-purple.disabled {
    color: #7C3AED;
    background-color: transparent; }

.btn-outline-yellow-100 {
  color: #ffeed6;
  border-color: #ffeed6; }
  .btn-outline-yellow-100:hover {
    color: var(--cr-primary);
    background-color: #ffeed6;
    border-color: #ffeed6; }
  .btn-check:focus + .btn-outline-yellow-100, .btn-outline-yellow-100:focus {
    box-shadow: 0 0 0 0.18rem rgba(255, 238, 214, 0.5); }
  .btn-check:checked + .btn-outline-yellow-100,
  .btn-check:active + .btn-outline-yellow-100, .btn-outline-yellow-100:active, .btn-outline-yellow-100.active, .btn-outline-yellow-100.dropdown-toggle.show {
    color: var(--cr-primary);
    background-color: #ffeed6;
    border-color: #ffeed6; }
    .btn-check:checked + .btn-outline-yellow-100:focus,
    .btn-check:active + .btn-outline-yellow-100:focus, .btn-outline-yellow-100:active:focus, .btn-outline-yellow-100.active:focus, .btn-outline-yellow-100.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(255, 238, 214, 0.5); }
  .btn-outline-yellow-100:disabled, .btn-outline-yellow-100.disabled {
    color: #ffeed6;
    background-color: transparent; }

.btn-outline-yellow-200 {
  color: #f5dbb8;
  border-color: #f5dbb8; }
  .btn-outline-yellow-200:hover {
    color: var(--cr-primary);
    background-color: #f5dbb8;
    border-color: #f5dbb8; }
  .btn-check:focus + .btn-outline-yellow-200, .btn-outline-yellow-200:focus {
    box-shadow: 0 0 0 0.18rem rgba(245, 219, 184, 0.5); }
  .btn-check:checked + .btn-outline-yellow-200,
  .btn-check:active + .btn-outline-yellow-200, .btn-outline-yellow-200:active, .btn-outline-yellow-200.active, .btn-outline-yellow-200.dropdown-toggle.show {
    color: var(--cr-primary);
    background-color: #f5dbb8;
    border-color: #f5dbb8; }
    .btn-check:checked + .btn-outline-yellow-200:focus,
    .btn-check:active + .btn-outline-yellow-200:focus, .btn-outline-yellow-200:active:focus, .btn-outline-yellow-200.active:focus, .btn-outline-yellow-200.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(245, 219, 184, 0.5); }
  .btn-outline-yellow-200:disabled, .btn-outline-yellow-200.disabled {
    color: #f5dbb8;
    background-color: transparent; }

.btn-outline-gray-50 {
  color: #F9FAFB;
  border-color: #F9FAFB; }
  .btn-outline-gray-50:hover {
    color: var(--cr-primary);
    background-color: #F9FAFB;
    border-color: #F9FAFB; }
  .btn-check:focus + .btn-outline-gray-50, .btn-outline-gray-50:focus {
    box-shadow: 0 0 0 0.18rem rgba(249, 250, 251, 0.5); }
  .btn-check:checked + .btn-outline-gray-50,
  .btn-check:active + .btn-outline-gray-50, .btn-outline-gray-50:active, .btn-outline-gray-50.active, .btn-outline-gray-50.dropdown-toggle.show {
    color: var(--cr-primary);
    background-color: #F9FAFB;
    border-color: #F9FAFB; }
    .btn-check:checked + .btn-outline-gray-50:focus,
    .btn-check:active + .btn-outline-gray-50:focus, .btn-outline-gray-50:active:focus, .btn-outline-gray-50.active:focus, .btn-outline-gray-50.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(249, 250, 251, 0.5); }
  .btn-outline-gray-50:disabled, .btn-outline-gray-50.disabled {
    color: #F9FAFB;
    background-color: transparent; }

.btn-outline-gray-100 {
  color: var(--cr-surface-2);
  border-color: var(--cr-surface-2); }
  .btn-outline-gray-100:hover {
    color: var(--cr-primary);
    background-color: var(--cr-surface-2);
    border-color: var(--cr-surface-2); }
  .btn-check:focus + .btn-outline-gray-100, .btn-outline-gray-100:focus {
    box-shadow: 0 0 0 0.18rem rgba(242, 244, 246, 0.5); }
  .btn-check:checked + .btn-outline-gray-100,
  .btn-check:active + .btn-outline-gray-100, .btn-outline-gray-100:active, .btn-outline-gray-100.active, .btn-outline-gray-100.dropdown-toggle.show {
    color: var(--cr-primary);
    background-color: var(--cr-surface-2);
    border-color: var(--cr-surface-2); }
    .btn-check:checked + .btn-outline-gray-100:focus,
    .btn-check:active + .btn-outline-gray-100:focus, .btn-outline-gray-100:active:focus, .btn-outline-gray-100.active:focus, .btn-outline-gray-100.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(242, 244, 246, 0.5); }
  .btn-outline-gray-100:disabled, .btn-outline-gray-100.disabled {
    color: var(--cr-surface-2);
    background-color: transparent; }

.btn-outline-gray-200 {
  color: var(--cr-border);
  border-color: var(--cr-border); }
  .btn-outline-gray-200:hover {
    color: var(--cr-primary);
    background-color: var(--cr-border);
    border-color: var(--cr-border); }
  .btn-check:focus + .btn-outline-gray-200, .btn-outline-gray-200:focus {
    box-shadow: 0 0 0 0.18rem rgba(229, 231, 235, 0.5); }
  .btn-check:checked + .btn-outline-gray-200,
  .btn-check:active + .btn-outline-gray-200, .btn-outline-gray-200:active, .btn-outline-gray-200.active, .btn-outline-gray-200.dropdown-toggle.show {
    color: var(--cr-primary);
    background-color: var(--cr-border);
    border-color: var(--cr-border); }
    .btn-check:checked + .btn-outline-gray-200:focus,
    .btn-check:active + .btn-outline-gray-200:focus, .btn-outline-gray-200:active:focus, .btn-outline-gray-200.active:focus, .btn-outline-gray-200.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(229, 231, 235, 0.5); }
  .btn-outline-gray-200:disabled, .btn-outline-gray-200.disabled {
    color: var(--cr-border);
    background-color: transparent; }

.btn-outline-gray-300 {
  color: var(--cr-border-2);
  border-color: var(--cr-border-2); }
  .btn-outline-gray-300:hover {
    color: var(--cr-primary);
    background-color: var(--cr-border-2);
    border-color: var(--cr-border-2); }
  .btn-check:focus + .btn-outline-gray-300, .btn-outline-gray-300:focus {
    box-shadow: 0 0 0 0.18rem rgba(209, 213, 219, 0.5); }
  .btn-check:checked + .btn-outline-gray-300,
  .btn-check:active + .btn-outline-gray-300, .btn-outline-gray-300:active, .btn-outline-gray-300.active, .btn-outline-gray-300.dropdown-toggle.show {
    color: var(--cr-primary);
    background-color: var(--cr-border-2);
    border-color: var(--cr-border-2); }
    .btn-check:checked + .btn-outline-gray-300:focus,
    .btn-check:active + .btn-outline-gray-300:focus, .btn-outline-gray-300:active:focus, .btn-outline-gray-300.active:focus, .btn-outline-gray-300.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(209, 213, 219, 0.5); }
  .btn-outline-gray-300:disabled, .btn-outline-gray-300.disabled {
    color: var(--cr-border-2);
    background-color: transparent; }

.btn-outline-gray-400 {
  color: var(--cr-border-strong);
  border-color: var(--cr-border-strong); }
  .btn-outline-gray-400:hover {
    color: var(--cr-primary);
    background-color: var(--cr-border-strong);
    border-color: var(--cr-border-strong); }
  .btn-check:focus + .btn-outline-gray-400, .btn-outline-gray-400:focus {
    box-shadow: 0 0 0 0.18rem rgba(156, 163, 175, 0.5); }
  .btn-check:checked + .btn-outline-gray-400,
  .btn-check:active + .btn-outline-gray-400, .btn-outline-gray-400:active, .btn-outline-gray-400.active, .btn-outline-gray-400.dropdown-toggle.show {
    color: var(--cr-primary);
    background-color: var(--cr-border-strong);
    border-color: var(--cr-border-strong); }
    .btn-check:checked + .btn-outline-gray-400:focus,
    .btn-check:active + .btn-outline-gray-400:focus, .btn-outline-gray-400:active:focus, .btn-outline-gray-400.active:focus, .btn-outline-gray-400.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(156, 163, 175, 0.5); }
  .btn-outline-gray-400:disabled, .btn-outline-gray-400.disabled {
    color: var(--cr-border-strong);
    background-color: transparent; }

.btn-outline-gray-500 {
  color: var(--cr-muted);
  border-color: var(--cr-muted); }
  .btn-outline-gray-500:hover {
    color: var(--cr-primary-ink);
    background-color: var(--cr-muted);
    border-color: var(--cr-muted); }
  .btn-check:focus + .btn-outline-gray-500, .btn-outline-gray-500:focus {
    box-shadow: 0 0 0 0.18rem rgba(107, 114, 128, 0.5); }
  .btn-check:checked + .btn-outline-gray-500,
  .btn-check:active + .btn-outline-gray-500, .btn-outline-gray-500:active, .btn-outline-gray-500.active, .btn-outline-gray-500.dropdown-toggle.show {
    color: var(--cr-primary-ink);
    background-color: var(--cr-muted);
    border-color: var(--cr-muted); }
    .btn-check:checked + .btn-outline-gray-500:focus,
    .btn-check:active + .btn-outline-gray-500:focus, .btn-outline-gray-500:active:focus, .btn-outline-gray-500.active:focus, .btn-outline-gray-500.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(107, 114, 128, 0.5); }
  .btn-outline-gray-500:disabled, .btn-outline-gray-500.disabled {
    color: var(--cr-muted);
    background-color: transparent; }

.btn-outline-gray-600 {
  color: #4B5563;
  border-color: #4B5563; }
  .btn-outline-gray-600:hover {
    color: var(--cr-primary-ink);
    background-color: #4B5563;
    border-color: #4B5563; }
  .btn-check:focus + .btn-outline-gray-600, .btn-outline-gray-600:focus {
    box-shadow: 0 0 0 0.18rem rgba(75, 85, 99, 0.5); }
  .btn-check:checked + .btn-outline-gray-600,
  .btn-check:active + .btn-outline-gray-600, .btn-outline-gray-600:active, .btn-outline-gray-600.active, .btn-outline-gray-600.dropdown-toggle.show {
    color: var(--cr-primary-ink);
    background-color: #4B5563;
    border-color: #4B5563; }
    .btn-check:checked + .btn-outline-gray-600:focus,
    .btn-check:active + .btn-outline-gray-600:focus, .btn-outline-gray-600:active:focus, .btn-outline-gray-600.active:focus, .btn-outline-gray-600.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(75, 85, 99, 0.5); }
  .btn-outline-gray-600:disabled, .btn-outline-gray-600.disabled {
    color: #4B5563;
    background-color: transparent; }

.btn-outline-gray-700 {
  color: var(--cr-text-2);
  border-color: var(--cr-text-2); }
  .btn-outline-gray-700:hover {
    color: var(--cr-primary-ink);
    background-color: var(--cr-text-2);
    border-color: var(--cr-text-2); }
  .btn-check:focus + .btn-outline-gray-700, .btn-outline-gray-700:focus {
    box-shadow: 0 0 0 0.18rem rgba(55, 65, 81, 0.5); }
  .btn-check:checked + .btn-outline-gray-700,
  .btn-check:active + .btn-outline-gray-700, .btn-outline-gray-700:active, .btn-outline-gray-700.active, .btn-outline-gray-700.dropdown-toggle.show {
    color: var(--cr-primary-ink);
    background-color: var(--cr-text-2);
    border-color: var(--cr-text-2); }
    .btn-check:checked + .btn-outline-gray-700:focus,
    .btn-check:active + .btn-outline-gray-700:focus, .btn-outline-gray-700:active:focus, .btn-outline-gray-700.active:focus, .btn-outline-gray-700.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(55, 65, 81, 0.5); }
  .btn-outline-gray-700:disabled, .btn-outline-gray-700.disabled {
    color: var(--cr-text-2);
    background-color: transparent; }

.btn-outline-gray-800 {
  color: var(--cr-primary);
  border-color: var(--cr-primary); }
  .btn-outline-gray-800:hover {
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary);
    border-color: var(--cr-primary); }
  .btn-check:focus + .btn-outline-gray-800, .btn-outline-gray-800:focus {
    box-shadow: 0 0 0 0.18rem rgba(31, 41, 55, 0.5); }
  .btn-check:checked + .btn-outline-gray-800,
  .btn-check:active + .btn-outline-gray-800, .btn-outline-gray-800:active, .btn-outline-gray-800.active, .btn-outline-gray-800.dropdown-toggle.show {
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary);
    border-color: var(--cr-primary); }
    .btn-check:checked + .btn-outline-gray-800:focus,
    .btn-check:active + .btn-outline-gray-800:focus, .btn-outline-gray-800:active:focus, .btn-outline-gray-800.active:focus, .btn-outline-gray-800.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(31, 41, 55, 0.5); }
  .btn-outline-gray-800:disabled, .btn-outline-gray-800.disabled {
    color: var(--cr-primary);
    background-color: transparent; }

.btn-outline-gray-900 {
  color: var(--cr-primary-deep);
  border-color: var(--cr-primary-deep); }
  .btn-outline-gray-900:hover {
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary-deep);
    border-color: var(--cr-primary-deep); }
  .btn-check:focus + .btn-outline-gray-900, .btn-outline-gray-900:focus {
    box-shadow: 0 0 0 0.18rem rgba(17, 24, 39, 0.5); }
  .btn-check:checked + .btn-outline-gray-900,
  .btn-check:active + .btn-outline-gray-900, .btn-outline-gray-900:active, .btn-outline-gray-900.active, .btn-outline-gray-900.dropdown-toggle.show {
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary-deep);
    border-color: var(--cr-primary-deep); }
    .btn-check:checked + .btn-outline-gray-900:focus,
    .btn-check:active + .btn-outline-gray-900:focus, .btn-outline-gray-900:active:focus, .btn-outline-gray-900.active:focus, .btn-outline-gray-900.dropdown-toggle.show:focus {
      box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(17, 24, 39, 0.5); }
  .btn-outline-gray-900:disabled, .btn-outline-gray-900.disabled {
    color: var(--cr-primary-deep);
    background-color: transparent; }

.btn-link {
  font-weight: 400;
  color: var(--cr-primary);
  text-decoration: none; }
  .btn-link:hover {
    color: black;
    text-decoration: none; }
  .btn-link:focus {
    text-decoration: none; }
  .btn-link:disabled, .btn-link.disabled {
    color: #4B5563; }

.btn-lg, .btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.5rem; }

.btn-sm, .btn-group-sm > .btn {
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  border-radius: 0.5rem; }

.fade {
  transition: opacity 0.15s linear; }
  @media (prefers-reduced-motion: reduce) {
    .fade {
      transition: none; } }
  .fade:not(.show) {
    opacity: 0; }

.collapse:not(.show) {
  display: none; }

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease; }
  @media (prefers-reduced-motion: reduce) {
    .collapsing {
      transition: none; } }

.dropup,
.dropend,
.dropdown,
.dropstart {
  position: relative; }

.dropdown-toggle {
  white-space: nowrap; }
  .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent; }
  .dropdown-toggle:empty::after {
    margin-left: 0; }

.dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 12rem;
  padding: 0.5rem 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--cr-text-2);
  text-align: left;
  list-style: none;
  background-color: var(--cr-surface);
  background-clip: padding-box;
  border: 0.0625rem solid var(--cr-border);
  border-radius: 0.35rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
  .dropdown-menu[data-bs-popper] {
    top: 100%;
    left: 0;
    margin-top: 0.125rem; }

.dropdown-menu-start {
  --bs-position: start; }
  .dropdown-menu-start[data-bs-popper] {
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */; }

.dropdown-menu-end {
  --bs-position: end; }
  .dropdown-menu-end[data-bs-popper] {
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */; }

/* Closes the @media (min-width: 576px) block opened above.

   It had no closing brace of its own. The block used to be terminated by a
   stray closing brace left behind by a commented-out region that was itself
   malformed - CSS comments do not nest, so that comment ended early at an
   inner rtl:ignore marker and leaked the rest of its body into the
   stylesheet. Removing that region made the missing brace explicit, so it is
   written out here instead.

   NB the breakpoints inside this block are wrong: col-sm, col-md, col-lg and
   col-xxl all live in here together, with no breakpoint boundaries between
   them, so every one of them activates at 576px. That is pre-existing and is
   deliberately left alone here, because correcting it changes page layout.
   See docs/bootstrap-removal-audit.md. */
}

@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start; }
    .dropdown-menu-md-start[data-bs-popper] {
      right: auto /* rtl:ignore */;
      left: 0 /* rtl:ignore */; }
  .dropdown-menu-md-end {
    --bs-position: end; }
    .dropdown-menu-md-end[data-bs-popper] {
      right: 0 /* rtl:ignore */;
      left: auto /* rtl:ignore */; } }

@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    --bs-position: start; }
    .dropdown-menu-lg-start[data-bs-popper] {
      right: auto /* rtl:ignore */;
      left: 0 /* rtl:ignore */; }
  .dropdown-menu-lg-end {
    --bs-position: end; }
    .dropdown-menu-lg-end[data-bs-popper] {
      right: 0 /* rtl:ignore */;
      left: auto /* rtl:ignore */; } }

@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start; }
    .dropdown-menu-xl-start[data-bs-popper] {
      right: auto /* rtl:ignore */;
      left: 0 /* rtl:ignore */; }
  .dropdown-menu-xl-end {
    --bs-position: end; }
    .dropdown-menu-xl-end[data-bs-popper] {
      right: 0 /* rtl:ignore */;
      left: auto /* rtl:ignore */; } }

@media (min-width: 1400px) {
  .dropdown-menu-xxl-start {
    --bs-position: start; }
    .dropdown-menu-xxl-start[data-bs-popper] {
      right: auto /* rtl:ignore */;
      left: 0 /* rtl:ignore */; }
  .dropdown-menu-xxl-end {
    --bs-position: end; }
    .dropdown-menu-xxl-end[data-bs-popper] {
      right: 0 /* rtl:ignore */;
      left: auto /* rtl:ignore */; } }
 */
.dropup .dropdown-menu[data-bs-popper] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem; }

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent; }

.dropup .dropdown-toggle:empty::after {
  margin-left: 0; }

.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem; }

.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid; }

.dropend .dropdown-toggle:empty::after {
  margin-left: 0; }

.dropend .dropdown-toggle::after {
  vertical-align: 0; }

.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem; }

.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: ""; }

.dropstart .dropdown-toggle::after {
  display: none; }

.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent; }

.dropstart .dropdown-toggle:empty::after {
  margin-left: 0; }

.dropstart .dropdown-toggle::before {
  vertical-align: 0; }

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid var(--cr-border); }

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  font-weight: 400;
  color: var(--cr-primary-deep);
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0; }
  .dropdown-item:hover, .dropdown-item:focus {
    color: #090d15;
    background-color: var(--cr-surface-2); }
  .dropdown-item.active, .dropdown-item:active {
    color: var(--cr-primary-deep);
    text-decoration: none;
    background-color: var(--cr-border); }
  .dropdown-item.disabled, .dropdown-item:disabled {
    color: #4B5563;
    pointer-events: none;
    background-color: transparent; }

.dropdown-menu.show {
  display: block; }

.dropdown-header {
  display: block;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--cr-primary-deep);
  white-space: nowrap; }

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle; }
  .btn-group > .btn,
  .btn-group-vertical > .btn {
    position: relative;
    flex: 1 1 auto; }
  .btn-group > .btn-check:checked + .btn,
  .btn-group > .btn-check:focus + .btn,
  .btn-group > .btn:hover,
  .btn-group > .btn:focus,
  .btn-group > .btn:active,
  .btn-group > .btn.active,
  .btn-group-vertical > .btn-check:checked + .btn,
  .btn-group-vertical > .btn-check:focus + .btn,
  .btn-group-vertical > .btn:hover,
  .btn-group-vertical > .btn:focus,
  .btn-group-vertical > .btn:active,
  .btn-group-vertical > .btn.active {
    z-index: 1; }

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; }
  .btn-toolbar .input-group {
    width: auto; }

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: -0.0625rem; }

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.btn-group > .btn:nth-child(n + 3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

.dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem; }
  .dropdown-toggle-split::after,
  .dropup .dropdown-toggle-split::after,
  .dropend .dropdown-toggle-split::after {
    margin-left: 0; }
  .dropstart .dropdown-toggle-split::before {
    margin-right: 0; }

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.46875rem;
  padding-left: 0.46875rem; }

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem; }

.btn-group.show .dropdown-toggle {
  box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125); }
  .btn-group.show .dropdown-toggle.btn-link {
    box-shadow: none; }

.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; }
  .btn-group-vertical > .btn,
  .btn-group-vertical > .btn-group {
    width: 100%; }
  .btn-group-vertical > .btn:not(:first-child),
  .btn-group-vertical > .btn-group:not(:first-child) {
    margin-top: -0.0625rem; }
  .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
  .btn-group-vertical > .btn-group:not(:last-child) > .btn {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0; }
  .btn-group-vertical > .btn ~ .btn,
  .btn-group-vertical > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-top-right-radius: 0; }

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none; }

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--cr-primary);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .nav-link {
      transition: none; } }
  .nav-link:hover, .nav-link:focus {
    color: var(--cr-primary); }
  .nav-link.disabled {
    color: #4B5563;
    pointer-events: none;
    cursor: default; }

.nav-tabs {
  border-bottom: 0.0625rem solid var(--cr-border-strong); }
  .nav-tabs .nav-link {
    margin-bottom: -0.0625rem;
    background: none;
    border: 0.0625rem solid transparent;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem; }
    .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
      border-color: var(--cr-border) var(--cr-border) var(--cr-border-strong);
      isolation: isolate; }
    .nav-tabs .nav-link.disabled {
      color: #4B5563;
      background-color: transparent;
      border-color: transparent; }
  .nav-tabs .nav-link.active,
  .nav-tabs .nav-item.show .nav-link {
    color: var(--cr-text-2);
    background-color: var(--cr-border-strong);
    border-color: var(--cr-border-strong); }
  .nav-tabs .dropdown-menu {
    margin-top: -0.0625rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }

.nav-pills .nav-link {
  background: none;
  border: 0;
  border-radius: 0.5rem; }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--cr-primary);
  background-color: #f8f8f8; }

.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center; }

.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center; }

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%; }

.tab-content > .tab-pane {
  display: none; }

.tab-content > .active {
  display: block; }

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem; }
  .navbar > .container,
  .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between; }

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 1rem;
  font-size: 1.25rem;
  white-space: nowrap; }

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none; }
  .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0; }
  .navbar-nav .dropdown-menu {
    position: static; }

.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; }

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center; }

.navbar-toggler {
  padding: 0.4rem 0.6rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 0.0625rem solid transparent;
  border-radius: 0.5rem;
  transition: box-shadow 0.15s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .navbar-toggler {
      transition: none; } }
  .navbar-toggler:hover {
    text-decoration: none; }
  .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0.18rem; }

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%; }

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start; }
    .navbar-expand-sm .navbar-nav {
      flex-direction: row; }
      .navbar-expand-sm .navbar-nav .dropdown-menu {
        position: absolute; }
      .navbar-expand-sm .navbar-nav .nav-link {
        padding-right: 0.8rem;
        padding-left: 0.8rem; }
    .navbar-expand-sm .navbar-nav-scroll {
      overflow: visible; }
    .navbar-expand-sm .navbar-collapse {
      display: flex !important;
      flex-basis: auto; }
    .navbar-expand-sm .navbar-toggler {
      display: none; } }

.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start; }
  .navbar-expand .navbar-nav {
    flex-direction: row; }
    .navbar-expand .navbar-nav .dropdown-menu {
      position: absolute; }
    .navbar-expand .navbar-nav .nav-link {
      padding-right: 0.8rem;
      padding-left: 0.8rem; }
  .navbar-expand .navbar-nav-scroll {
    overflow: visible; }
  .navbar-expand .navbar-collapse {
    display: flex !important;
    flex-basis: auto; }
  .navbar-expand .navbar-toggler {
    display: none; }

.navbar-light .navbar-brand {
  color: var(--cr-primary-deep); }
  .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
    color: var(--cr-primary-deep); }

.navbar-light .navbar-nav .nav-link {
  color: rgba(17, 24, 39, 0.9); }
  .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: var(--cr-primary-deep); }
  .navbar-light .navbar-nav .nav-link.disabled {
    color: rgba(17, 24, 39, 0.9); }

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--cr-primary-deep); }

.navbar-light .navbar-toggler {
  color: rgba(17, 24, 39, 0.9);
  border-color: rgba(17, 24, 39, 0.1); }

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2817, 24, 39, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.navbar-light .navbar-text {
  color: rgba(17, 24, 39, 0.9); }
  .navbar-light .navbar-text a,
  .navbar-light .navbar-text a:hover,
  .navbar-light .navbar-text a:focus {
    color: var(--cr-primary-deep); }

.navbar-dark .navbar-brand {
  color: var(--cr-primary-ink); }
  .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
    color: var(--cr-primary-ink); }

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9); }
  .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
    color: white; }
  .navbar-dark .navbar-nav .nav-link.disabled {
    color: rgba(255, 255, 255, 0.9); }

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--cr-primary-ink); }

.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.1); }

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.9); }
  .navbar-dark .navbar-text a,
  .navbar-dark .navbar-text a:hover,
  .navbar-dark .navbar-text a:focus {
    color: var(--cr-primary-ink); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--cr-surface);
  background-clip: border-box;
  border: 1px solid var(--cr-border);
  border-radius: var(--r-lg); }
  .card > hr {
    margin-right: 0;
    margin-left: 0; }
  .card > .list-group {
    border-top: inherit;
    border-bottom: inherit; }
    .card > .list-group:first-child {
      border-top-width: 0;
      border-top-left-radius: 0.4375rem;
      border-top-right-radius: 0.4375rem; }
    .card > .list-group:last-child {
      border-bottom-width: 0;
      border-bottom-right-radius: 0.4375rem;
      border-bottom-left-radius: 0.4375rem; }
  .card > .card-header + .list-group,
  .card > .list-group + .card-footer {
    border-top: 0; }

.card-body {
  flex: 1 1 auto;
  padding: 1.25rem 1.5rem; }

.card-title {
  margin-bottom: 0.875rem; }

.card-subtitle {
  margin-top: -0.4375rem;
  margin-bottom: 0; }

.card-text:last-child {
  margin-bottom: 0; }

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

.card-link + .card-link {
  margin-left: 1.5rem; }

.card-header {
  padding: 1.25rem 1.5rem;
  margin-bottom: 0;
  background-color: rgba(17, 24, 39, 0.03);
  border-bottom: 1px solid var(--cr-border); }
  .card-header:first-child {
    border-radius: 0.4375rem 0.4375rem 0 0; }

.card-footer {
  padding: 1.25rem 1.5rem;
  background-color: rgba(17, 24, 39, 0.03);
  border-top: 1px solid var(--cr-border); }
  .card-footer:last-child {
    border-radius: 0 0 0.4375rem 0.4375rem; }

.card-header-tabs {
  margin-right: -0.75rem;
  margin-bottom: -1.25rem;
  margin-left: -0.75rem;
  border-bottom: 0; }
  .card-header-tabs .nav-link.active {
    background-color: var(--cr-surface);
    border-bottom-color: #ffffff; }

.card-header-pills {
  margin-right: -0.75rem;
  margin-left: -0.75rem; }

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%; }

.card-img,
.card-img-top {
  border-top-left-radius: 0.4375rem;
  border-top-right-radius: 0.4375rem; }

.card-img,
.card-img-bottom {
  border-bottom-right-radius: 0.4375rem;
  border-bottom-left-radius: 0.4375rem; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: var(--cr-border);
  border-radius: 0.5rem; }

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem; }
  .breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: 0.5rem;
    color: #4B5563;
    content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */; }

.breadcrumb-item.active {
  color: #4B5563; }

.pagination {
  display: flex;
  padding-left: 0;
  list-style: none; }

.page-link {
  position: relative;
  display: block;
  color: var(--cr-primary);
  background-color: var(--cr-surface);
  border: 0.0625rem solid var(--cr-border-strong);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .page-link {
      transition: none; } }
  .page-link:hover {
    z-index: 2;
    color: black;
    background-color: var(--cr-border);
    border-color: var(--cr-border-2); }
  .page-link:focus {
    z-index: 3;
    color: black;
    background-color: var(--cr-border);
    outline: 0;
    box-shadow: 0 0 0 0.18rem rgba(31, 41, 55, 0.25); }

.page-item:not(:first-child) .page-link {
  margin-left: -0.0625rem; }

.page-item.active .page-link {
  z-index: 3;
  color: var(--cr-primary-ink);
  background-color: var(--cr-primary);
  border-color: var(--cr-primary); }

.page-item.disabled .page-link {
  color: #4B5563;
  pointer-events: none;
  background-color: var(--cr-surface);
  border-color: var(--cr-border-2); }

.page-link {
  padding: 0.375rem 0.75rem; }

.page-item:first-child .page-link {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem; }

.page-item:last-child .page-link {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem; }

/* .pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem; } */

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem; }

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem; }

/* .pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem; } */

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.35rem;
  border-bottom-left-radius: 0.35rem; }

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.35rem;
  border-bottom-right-radius: 0.35rem; }

.badge {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  color: var(--cr-primary-ink);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.5rem; }
  .badge:empty {
    display: none; }

.btn .badge {
  position: relative;
  top: -1px; }

/* Alerts: the whole family — base, sizes, dismissible and every variant —
   lives in the token-driven ALERTS section near the end of this file. The
   compiled per-variant colour blocks that used to sit here were deleted so
   there is exactly one place to change an alert. */


@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem; } }

.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: var(--cr-border);
  border-radius: 0.5rem;
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.0125); }

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--cr-primary-ink);
  text-align: center;
  white-space: nowrap;
  background-color: var(--cr-primary);
  transition: width 0.6s ease; }
  @media (prefers-reduced-motion: reduce) {
    .progress-bar {
      transition: none; } }

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem; }

.progress-bar-animated {
  animation: 1s linear infinite progress-bar-stripes; }
  @media (prefers-reduced-motion: reduce) {
    .progress-bar-animated {
      animation: none; } }

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 0.5rem; }

/* .list-group-numbered {
  list-style-type: none;
  counter-reset: section; }
  .list-group-numbered > li::before {
    content: counters(section, ".") ". ";
    counter-increment: section; } */

.list-group-item-action {
  width: 100%;
  color: var(--cr-text-2);
  text-align: inherit; }
  .list-group-item-action:hover, .list-group-item-action:focus {
    z-index: 1;
    color: var(--cr-text-2);
    text-decoration: none;
    background-color: var(--cr-surface-2); }
  .list-group-item-action:active {
    color: var(--cr-text-2);
    background-color: var(--cr-border); }

.list-group-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  color: var(--cr-text-2);
  background-color: var(--cr-surface);
  border: 1px solid var(--cr-border); }
  .list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit; }
  .list-group-item:last-child {
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit; }
  .list-group-item.disabled, .list-group-item:disabled {
    color: #4B5563;
    pointer-events: none;
    background-color: var(--cr-surface); }
  .list-group-item.active {
    z-index: 2;
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary);
    border-color: var(--cr-primary); }
  .list-group-item + .list-group-item {
    border-top-width: 0; }
    .list-group-item + .list-group-item.active {
      margin-top: -0.0625rem;
      border-top-width: 0.0625rem; }

.list-group-flush {
  border-radius: 0; }
  .list-group-flush > .list-group-item {
    border-width: 0 0 0.0625rem; }
    .list-group-flush > .list-group-item:last-child {
      border-bottom-width: 0; }

.list-group-item-success {
  color: #0a6f4d;
  background-color: #cff1e6; }
  .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
    color: #0a6f4d;
    background-color: #bad9cf; }
  .list-group-item-success.list-group-item-action.active {
    color: var(--cr-primary-ink);
    background-color: #0a6f4d;
    border-color: #0a6f4d; }

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--cr-primary-deep);
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111827'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.5rem;
  opacity: 0.5; }
  .btn-close:hover {
    color: var(--cr-primary-deep);
    text-decoration: none;
    opacity: 0.75; }
  .btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.18rem rgba(31, 41, 55, 0.25);
    opacity: 1; }
  .btn-close:disabled, .btn-close.disabled {
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
    opacity: 0.25; }

.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%); }

.toast {
  width: 350px;
  max-width: 100%;
  font-size: 0.875rem;
  pointer-events: auto;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  border-radius: 0.5rem; }
  .toast:not(.showing):not(.show) {
    opacity: 0; }
  .toast.hide {
    display: none; }

.toast-container {
  width: max-content;
  max-width: 100%;
  pointer-events: none; }
  .toast-container > :not(:last-child) {
    margin-bottom: 1rem; }

.toast-header {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  color: #4B5563;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top-left-radius: calc(0.5rem - 1px);
  border-top-right-radius: calc(0.5rem - 1px); }
  .toast-header .btn-close {
    margin-right: -0.375rem;
    margin-left: 0.75rem; }

.toast-body {
  padding: 0.75rem;
  word-wrap: break-word; }

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0; }

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none; }
  .modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px); }
    @media (prefers-reduced-motion: reduce) {
      .modal.fade .modal-dialog {
        transition: none; } }
  .modal.show .modal-dialog {
    transform: none; }
  .modal.modal-static .modal-dialog {
    transform: scale(1.02); }

.modal-dialog-scrollable {
  height: calc(100% - 1rem); }
  .modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden; }
  .modal-dialog-scrollable .modal-body {
    overflow-y: auto; }

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem); }

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--cr-surface);
  background-clip: padding-box;
  border: 1px solid var(--cr-border-2);
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px rgba(140, 152, 164, 0.2);
  outline: 0; }

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: var(--cr-primary-deep); }
  .modal-backdrop.fade {
    opacity: 0; }
  .modal-backdrop.show {
    opacity: 0.5; }

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 0.0625rem solid var(--cr-border);
  border-top-left-radius: 0.4375rem;
  border-top-right-radius: 0.4375rem; }
  .modal-header .btn-close {
    padding: 0.5rem 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto; }

.modal-title {
  margin-bottom: 0;
  line-height: 1.5; }

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem; }

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 0.0625rem solid var(--cr-border);
  border-bottom-right-radius: 0.4375rem;
  border-bottom-left-radius: 0.4375rem; }
  .modal-footer > * {
    margin: 0.25rem; }

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto; }
  .modal-dialog-scrollable {
    height: calc(100% - 3.5rem); }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem); }
  .modal-content {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
  .modal-sm {
    max-width: 300px; } }

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px; } }

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px; } }

.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0; }
  .modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0; }
  .modal-fullscreen .modal-header {
    border-radius: 0; }
  .modal-fullscreen .modal-body {
    overflow-y: auto; }
  .modal-fullscreen .modal-footer {
    border-radius: 0; }

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0; }
    .modal-fullscreen-sm-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0; }
    .modal-fullscreen-sm-down .modal-header {
      border-radius: 0; }
    .modal-fullscreen-sm-down .modal-body {
      overflow-y: auto; }
    .modal-fullscreen-sm-down .modal-footer {
      border-radius: 0; } }

@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0; }
    .modal-fullscreen-md-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0; }
    .modal-fullscreen-md-down .modal-header {
      border-radius: 0; }
    .modal-fullscreen-md-down .modal-body {
      overflow-y: auto; }
    .modal-fullscreen-md-down .modal-footer {
      border-radius: 0; } }

@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0; }
    .modal-fullscreen-lg-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0; }
    .modal-fullscreen-lg-down .modal-header {
      border-radius: 0; }
    .modal-fullscreen-lg-down .modal-body {
      overflow-y: auto; }
    .modal-fullscreen-lg-down .modal-footer {
      border-radius: 0; } }

@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0; }
    .modal-fullscreen-xl-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0; }
    .modal-fullscreen-xl-down .modal-header {
      border-radius: 0; }
    .modal-fullscreen-xl-down .modal-body {
      overflow-y: auto; }
    .modal-fullscreen-xl-down .modal-footer {
      border-radius: 0; } }

@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0; }
    .modal-fullscreen-xxl-down .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0; }
    .modal-fullscreen-xxl-down .modal-header {
      border-radius: 0; }
    .modal-fullscreen-xxl-down .modal-body {
      overflow-y: auto; }
    .modal-fullscreen-xxl-down .modal-footer {
      border-radius: 0; } }

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0; }
  .tooltip.show {
    opacity: 0.99; }
  .tooltip .tooltip-arrow {
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.4rem; }
    .tooltip .tooltip-arrow::before {
      position: absolute;
      content: "";
      border-color: transparent;
      border-style: solid; }

.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^="top"] {
  padding: 0.4rem 0; }
  .bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
    bottom: 0; }
    .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
      top: -1px;
      border-width: 0.4rem 0.4rem 0;
      border-top-color: var(--cr-primary); }

.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^="right"] {
  padding: 0 0.4rem; }
  .bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
    left: 0;
    width: 0.4rem;
    height: 0.8rem; }
    .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
      right: -1px;
      border-width: 0.4rem 0.4rem 0.4rem 0;
      border-right-color: var(--cr-primary); }

.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^="bottom"] {
  padding: 0.4rem 0; }
  .bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
    top: 0; }
    .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
      bottom: -1px;
      border-width: 0 0.4rem 0.4rem;
      border-bottom-color: var(--cr-primary); }

.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^="left"] {
  padding: 0 0.4rem; }
  .bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
    right: 0;
    width: 0.4rem;
    height: 0.8rem; }
    .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
      left: -1px;
      border-width: 0.4rem 0 0.4rem 0.4rem;
      border-left-color: var(--cr-primary); }

.tooltip-inner {
  max-width: 200px;
  padding: 0.375rem 0.55rem;
  color: var(--cr-primary-ink);
  text-align: center;
  background-color: var(--cr-primary);
  border-radius: 0.5rem; }

.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow {
  bottom: -0.5625rem; }
  .bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
    bottom: 0;
    border-width: 0.5rem 0.5rem 0;
    border-top-color: rgba(17, 24, 39, 0.25); }
  .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
    bottom: 0.0625rem;
    border-width: 0.5rem 0.5rem 0;
    border-top-color: var(--cr-primary); }

.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow {
  left: -0.5625rem;
  width: 0.5rem;
  height: 1rem; }
  .bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before {
    left: 0;
    border-width: 0.5rem 0.5rem 0.5rem 0;
    border-right-color: rgba(17, 24, 39, 0.25); }
  .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
    left: 0.0625rem;
    border-width: 0.5rem 0.5rem 0.5rem 0;
    border-right-color: var(--cr-primary); }

.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow {
  top: -0.5625rem; }
  .bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before {
    top: 0;
    border-width: 0 0.5rem 0.5rem 0.5rem;
    border-bottom-color: rgba(17, 24, 39, 0.25); }
  .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
    top: 0.0625rem;
    border-width: 0 0.5rem 0.5rem 0.5rem;
    border-bottom-color: var(--cr-primary); }

.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^="bottom"] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -0.5rem;
  content: "";
  border-bottom: 0.0625rem solid #19222d; }

.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow {
  right: -0.5625rem;
  width: 0.5rem;
  height: 1rem; }
  .bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before {
    right: 0;
    border-width: 0.5rem 0 0.5rem 0.5rem;
    border-left-color: rgba(17, 24, 39, 0.25); }
  .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
    right: 0.0625rem;
    border-width: 0.5rem 0 0.5rem 0.5rem;
    border-left-color: var(--cr-primary); }

.carousel.pointer-event {
  touch-action: pan-y; }

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block; }

/* rtl:begin:ignore */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%); }

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%); }

@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */; } }

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: 0.75s linear infinite spinner-border; }

.spinner-border-sm {
  width: 1.2rem;
  height: 1.2rem;
  border-width: 0.2em; }

@keyframes spinner-grow {
  0% {
    transform: scale(0); }
  50% {
    opacity: 1;
    transform: none; } }

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: 0.75s linear infinite spinner-grow; }

.spinner-grow-sm {
  width: 1.2rem;
  height: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .spinner-grow {
    animation-duration: 1.5s; } }

.clearfix::after {
  display: block;
  clear: both;
  content: ""; }

.link-primary {
  color: var(--cr-primary); }
  .link-primary:hover, .link-primary:focus {
    color: #19212c; }

.link-secondary {
  color: #f0bc74; }
  .link-secondary:hover, .link-secondary:focus {
    color: #f3c990; }

.link-tertiary {
  color: var(--cr-tertiary); }
  .link-tertiary:hover, .link-tertiary:focus {
    color: #272755; }

.link-success {
  color: var(--cr-success); }
  .link-success:hover, .link-success:focus {
    color: #40c79a; }

.link-info {
  color: var(--cr-info); }
  .link-info:hover, .link-info:focus {
    color: #1c4ea5; }

.link-warning {
  color: var(--cr-warning); }
  .link-warning:hover, .link-warning:focus {
    color: #fcba46; }

.link-danger {
  color: var(--cr-danger); }
  .link-danger:hover, .link-danger:focus {
    color: #b4173a; }

.link-white {
  color: var(--cr-primary-ink); }
  .link-white:hover, .link-white:focus {
    color: white; }

.link-indigo {
  color: #4F46E5; }
  .link-indigo:hover, .link-indigo:focus {
    color: #3f38b7; }

.link-purple {
  color: #7C3AED; }
  .link-purple:hover, .link-purple:focus {
    color: #632ebe; }

.link-yellow-100 {
  color: #ffeed6; }
  .link-yellow-100:hover, .link-yellow-100:focus {
    color: #fff1de; }

.link-yellow-200 {
  color: #f5dbb8; }
  .link-yellow-200:hover, .link-yellow-200:focus {
    color: #f7e2c6; }

.link-gray-50 {
  color: #F9FAFB; }
  .link-gray-50:hover, .link-gray-50:focus {
    color: #fafbfc; }

.link-gray-100 {
  color: var(--cr-surface-2); }
  .link-gray-100:hover, .link-gray-100:focus {
    color: #f5f6f8; }

.link-gray-200 {
  color: var(--cr-border); }
  .link-gray-200:hover, .link-gray-200:focus {
    color: #eaecef; }

.link-gray-300 {
  color: var(--cr-border-2); }
  .link-gray-300:hover, .link-gray-300:focus {
    color: #dadde2; }

.link-gray-400 {
  color: var(--cr-border-strong); }
  .link-gray-400:hover, .link-gray-400:focus {
    color: #b0b5bf; }

.link-gray-500 {
  color: var(--cr-muted); }
  .link-gray-500:hover, .link-gray-500:focus {
    color: #565b66; }

.link-gray-600 {
  color: #4B5563; }
  .link-gray-600:hover, .link-gray-600:focus {
    color: #3c444f; }

.link-gray-700 {
  color: var(--cr-text-2); }
  .link-gray-700:hover, .link-gray-700:focus {
    color: #2c3441; }

.link-gray-800 {
  color: var(--cr-primary); }
  .link-gray-800:hover, .link-gray-800:focus {
    color: #19212c; }

.link-gray-900 {
  color: var(--cr-primary-deep); }
  .link-gray-900:hover, .link-gray-900:focus {
    color: #0e131f; }

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030; }

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030; }

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020; }

@media (min-width: 576px) {
  .sticky-sm-top {
    position: sticky;
    top: 0;
    z-index: 1020; } }

@media (min-width: 768px) {
  .sticky-md-top {
    position: sticky;
    top: 0;
    z-index: 1020; } }

@media (min-width: 992px) {
  .sticky-lg-top {
    position: sticky;
    top: 0;
    z-index: 1020; } }

@media (min-width: 1200px) {
  .sticky-xl-top {
    position: sticky;
    top: 0;
    z-index: 1020; } }

@media (min-width: 1400px) {
  .sticky-xxl-top {
    position: sticky;
    top: 0;
    z-index: 1020; } }

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important; }

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: ""; }

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.align-baseline {
  vertical-align: baseline !important; }

.align-top {
  vertical-align: top !important; }

.align-middle {
  vertical-align: middle !important; }

.align-bottom {
  vertical-align: bottom !important; }

.align-text-bottom {
  vertical-align: text-bottom !important; }

.align-text-top {
  vertical-align: text-top !important; }

.float-start {
  float: left !important; }

.float-end {
  float: right !important; }

.float-none {
  float: none !important; }

.overflow-auto {
  overflow: auto !important; }

.overflow-hidden {
  overflow: hidden !important; }

.overflow-visible {
  overflow: visible !important; }

.overflow-scroll {
  overflow: scroll !important; }

.d-inline {
  display: inline !important; }

.d-inline-block {
  display: inline-block !important; }

.d-block {
  display: block !important; }

.d-grid {
  display: grid !important; }

.d-table {
  display: table !important; }

.d-table-row {
  display: table-row !important; }

.d-table-cell {
  display: table-cell !important; }

.d-flex {
  display: flex !important; }

.d-inline-flex {
  display: inline-flex !important; }

.d-none {
  display: none !important; }

.shadow {
  box-shadow: var(--sh-md) !important; }

.shadow-sm {
  box-shadow: var(--sh-sm) !important; }

.shadow-lg {
  box-shadow: var(--sh-lg) !important; }

.shadow-none {
  box-shadow: none !important; }

.position-static {
  position: static !important; }

.position-relative {
  position: relative !important; }

.position-absolute {
  position: absolute !important; }

.position-fixed {
  position: fixed !important; }

.position-sticky {
  position: sticky !important; }

.top-0 {
  top: 0 !important; }

.top-50 {
  top: 50% !important; }

.top-100 {
  top: 100% !important; }

.bottom-0 {
  bottom: 0 !important; }

.bottom-50 {
  bottom: 50% !important; }

.bottom-100 {
  bottom: 100% !important; }

.start-0 {
  left: 0 !important; }

.start-50 {
  left: 50% !important; }

.start-100 {
  left: 100% !important; }

.end-0 {
  right: 0 !important; }

.end-50 {
  right: 50% !important; }

.end-100 {
  right: 100% !important; }

.translate-middle {
  transform: translate(-50%, -50%) !important; }

.translate-middle-x {
  transform: translateX(-50%) !important; }

.translate-middle-y {
  transform: translateY(-50%) !important; }

.border {
  border: 0.0625rem solid var(--cr-border) !important; }

.border-0 {
  border: 0 !important; }

.border-top {
  border-top: 0.0625rem solid var(--cr-border) !important; }

.border-top-0 {
  border-top: 0 !important; }

.border-end {
  border-right: 0.0625rem solid var(--cr-border) !important; }

.border-end-0 {
  border-right: 0 !important; }

.border-bottom {
  border-bottom: 0.0625rem solid var(--cr-border) !important; }

.border-bottom-0 {
  border-bottom: 0 !important; }

.border-start {
  border-left: 0.0625rem solid var(--cr-border) !important; }

.border-start-0 {
  border-left: 0 !important; }

.border-primary {
  border-color: var(--cr-primary) !important; }

.border-secondary {
  border-color: #f0bc74 !important; }

.border-tertiary {
  border-color: var(--cr-tertiary) !important; }

.border-success {
  border-color: var(--cr-success) !important; }

.border-info {
  border-color: var(--cr-info) !important; }

.border-warning {
  border-color: var(--cr-warning) !important; }

.border-danger {
  border-color: var(--cr-danger) !important; }

.border-white {
  border-color: #ffffff !important; }

.border-indigo {
  border-color: #4F46E5 !important; }

.border-purple {
  border-color: #7C3AED !important; }

.border-yellow-100 {
  border-color: #ffeed6 !important; }

.border-yellow-200 {
  border-color: #f5dbb8 !important; }

.border-gray-50 {
  border-color: #F9FAFB !important; }

.border-gray-100 {
  border-color: var(--cr-surface-2) !important; }

.border-gray-200 {
  border-color: var(--cr-border) !important; }

.border-gray-300 {
  border-color: var(--cr-border-2) !important; }

.border-gray-400 {
  border-color: var(--cr-border-strong) !important; }

.border-gray-500 {
  border-color: var(--cr-muted) !important; }

.border-gray-600 {
  border-color: #4B5563 !important; }

.border-gray-700 {
  border-color: var(--cr-text-2) !important; }

.border-gray-800 {
  border-color: var(--cr-primary) !important; }

.border-gray-900 {
  border-color: var(--cr-primary-deep) !important; }

.border-1 {
  border-width: 1px !important; }

.border-2 {
  border-width: 2px !important; }

.border-3 {
  border-width: 3px !important; }

.border-4 {
  border-width: 4px !important; }

.border-5 {
  border-width: 5px !important; }

.w-25 {
  width: 25% !important; }

.w-50 {
  width: 50% !important; }

.w-75 {
  width: 75% !important; }

.w-100 {
  width: 100% !important; }

.w-auto {
  width: auto !important; }

.w-fit {
  width: fit-content !important; }

.fmxw-100 {
  max-width: 100px !important; }

.fmxw-200 {
  max-width: 200px !important; }

.fmxw-300 {
  max-width: 300px !important; }

.fmxw-400 {
  max-width: 400px !important; }

.fmxw-500 {
  max-width: 500px !important; }

.fmxw-999 {
  max-width: 999px !important; }

.vw-100 {
  width: 100vw !important; }

.min-vw-100 {
  min-width: 100vw !important; }

.h-25 {
  height: 25% !important; }

.h-50 {
  height: 50% !important; }

.h-75 {
  height: 75% !important; }

.h-100 {
  height: 100% !important; }

.h-auto {
  height: auto !important; }

.mh-100 {
  max-height: 100% !important; }

.vh-100 {
  height: 100vh !important; }

.min-vh-100 {
  min-height: 100vh !important; }

.flex-fill {
  flex: 1 1 auto !important; }

.flex-row {
  flex-direction: row !important; }

.flex-column {
  flex-direction: column !important; }

.flex-row-reverse {
  flex-direction: row-reverse !important; }

.flex-column-reverse {
  flex-direction: column-reverse !important; }

.flex-grow-0 {
  flex-grow: 0 !important; }

.flex-grow-1 {
  flex-grow: 1 !important; }

.flex-shrink-0 {
  flex-shrink: 0 !important; }

.flex-shrink-1 {
  flex-shrink: 1 !important; }

.flex-wrap {
  flex-wrap: wrap !important; }

.flex-nowrap {
  flex-wrap: nowrap !important; }

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important; }

.gap-0 {
  gap: 0 !important; }

.gap-1 {
  gap: 0.25rem !important; }

.gap-2 {
  gap: 0.5rem !important; }

.gap-3 {
  gap: 1rem !important; }

.gap-4 {
  gap: 1.5rem !important; }

.gap-5 {
  gap: 3rem !important; }

.gap-6 {
  gap: 5rem !important; }

.gap-7 {
  gap: 8rem !important; }

.gap-8 {
  gap: 10rem !important; }

.gap-9 {
  gap: 11rem !important; }

.gap-10 {
  gap: 14rem !important; }

.gap-11 {
  gap: 16rem !important; }

.gap-12 {
  gap: 20rem !important; }

.gap-sm {
  gap: 1rem !important; }

.gap-md {
  gap: 2rem !important; }

.gap-lg {
  gap: 4rem !important; }

.gap-xl {
  gap: 8rem !important; }

.justify-content-start {
  justify-content: flex-start !important; }

.justify-content-end {
  justify-content: flex-end !important; }

.justify-content-center {
  justify-content: center !important; }

.justify-content-between {
  justify-content: space-between !important; }

.justify-content-around {
  justify-content: space-around !important; }

.justify-content-evenly {
  justify-content: space-evenly !important; }

.align-items-start {
  align-items: flex-start !important; }

.align-items-end {
  align-items: flex-end !important; }

.align-items-center {
  align-items: center !important; }

.align-items-baseline {
  align-items: baseline !important; }

.align-items-stretch {
  align-items: stretch !important; }

.align-content-start {
  align-content: flex-start !important; }

.align-content-end {
  align-content: flex-end !important; }

.align-content-center {
  align-content: center !important; }

.align-content-between {
  align-content: space-between !important; }

.align-content-around {
  align-content: space-around !important; }

.align-content-stretch {
  align-content: stretch !important; }

.align-self-auto {
  align-self: auto !important; }

.align-self-start {
  align-self: flex-start !important; }

.align-self-end {
  align-self: flex-end !important; }

.align-self-center {
  align-self: center !important; }

.align-self-baseline {
  align-self: baseline !important; }

.align-self-stretch {
  align-self: stretch !important; }

.order-first {
  order: -1 !important; }

.order-0 {
  order: 0 !important; }

.order-1 {
  order: 1 !important; }

.order-2 {
  order: 2 !important; }

.order-3 {
  order: 3 !important; }

.order-4 {
  order: 4 !important; }

.order-5 {
  order: 5 !important; }

.order-last {
  order: 6 !important; }

.m-0 {
  margin: 0 !important; }

.m-1 {
  margin: 0.25rem !important; }

.m-2 {
  margin: 0.5rem !important; }

.m-3 {
  margin: 1rem !important; }

.m-4 {
  margin: 1.5rem !important; }

.m-5 {
  margin: 3rem !important; }

.m-6 {
  margin: 5rem !important; }

.m-7 {
  margin: 8rem !important; }

.m-8 {
  margin: 10rem !important; }

.m-9 {
  margin: 11rem !important; }

.m-10 {
  margin: 14rem !important; }

.m-11 {
  margin: 16rem !important; }

.m-12 {
  margin: 20rem !important; }

.m-sm {
  margin: 1rem !important; }

.m-md {
  margin: 2rem !important; }

.m-lg {
  margin: 4rem !important; }

.m-xl {
  margin: 8rem !important; }

.m-auto {
  margin: auto !important; }

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important; }

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important; }

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important; }

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important; }

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important; }

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important; }

.mx-6 {
  margin-right: 5rem !important;
  margin-left: 5rem !important; }

.mx-7 {
  margin-right: 8rem !important;
  margin-left: 8rem !important; }

.mx-8 {
  margin-right: 10rem !important;
  margin-left: 10rem !important; }

.mx-9 {
  margin-right: 11rem !important;
  margin-left: 11rem !important; }

.mx-10 {
  margin-right: 14rem !important;
  margin-left: 14rem !important; }

.mx-11 {
  margin-right: 16rem !important;
  margin-left: 16rem !important; }

.mx-12 {
  margin-right: 20rem !important;
  margin-left: 20rem !important; }

.mx-sm {
  margin-right: 1rem !important;
  margin-left: 1rem !important; }

.mx-md {
  margin-right: 2rem !important;
  margin-left: 2rem !important; }

.mx-lg {
  margin-right: 4rem !important;
  margin-left: 4rem !important; }

.mx-xl {
  margin-right: 8rem !important;
  margin-left: 8rem !important; }

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important; }

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important; }

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important; }

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important; }

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important; }

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important; }

.my-6 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important; }

.my-7 {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important; }

.my-8 {
  margin-top: 10rem !important;
  margin-bottom: 10rem !important; }

.my-9 {
  margin-top: 11rem !important;
  margin-bottom: 11rem !important; }

.my-10 {
  margin-top: 14rem !important;
  margin-bottom: 14rem !important; }

.my-11 {
  margin-top: 16rem !important;
  margin-bottom: 16rem !important; }

.my-12 {
  margin-top: 20rem !important;
  margin-bottom: 20rem !important; }

.my-sm {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important; }

.my-md {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important; }

.my-lg {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important; }

.my-xl {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important; }

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important; }

.mt-0 {
  margin-top: 0 !important; }

.mt-1 {
  margin-top: 0.25rem !important; }

.mt-2 {
  margin-top: 0.5rem !important; }

.mt-3 {
  margin-top: 1rem !important; }

.mt-4 {
  margin-top: 1.5rem !important; }

.mt-5 {
  margin-top: 3rem !important; }

.mt-6 {
  margin-top: 5rem !important; }

.mt-7 {
  margin-top: 8rem !important; }

.mt-8 {
  margin-top: 10rem !important; }

.mt-9 {
  margin-top: 11rem !important; }

.mt-10 {
  margin-top: 14rem !important; }

.mt-11 {
  margin-top: 16rem !important; }

.mt-12 {
  margin-top: 20rem !important; }

.mt-sm {
  margin-top: 1rem !important; }

.mt-md {
  margin-top: 2rem !important; }

.mt-lg {
  margin-top: 4rem !important; }

.mt-xl {
  margin-top: 8rem !important; }

.mt-auto {
  margin-top: auto !important; }

.me-0 {
  margin-right: 0 !important; }

.me-1 {
  margin-right: 0.25rem !important; }

.me-2 {
  margin-right: 0.5rem !important; }

.me-3 {
  margin-right: 1rem !important; }

.me-4 {
  margin-right: 1.5rem !important; }

.me-5 {
  margin-right: 3rem !important; }

.me-6 {
  margin-right: 5rem !important; }

.me-7 {
  margin-right: 8rem !important; }

.me-8 {
  margin-right: 10rem !important; }

.me-9 {
  margin-right: 11rem !important; }

.me-10 {
  margin-right: 14rem !important; }

.me-11 {
  margin-right: 16rem !important; }

.me-12 {
  margin-right: 20rem !important; }

.me-sm {
  margin-right: 1rem !important; }

.me-md {
  margin-right: 2rem !important; }

.me-lg {
  margin-right: 4rem !important; }

.me-xl {
  margin-right: 8rem !important; }

.me-auto {
  margin-right: auto !important; }

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

.mb-1 {
  margin-bottom: 0.25rem !important; }

.mb-2 {
  margin-bottom: 0.5rem !important; }

.mb-3 {
  margin-bottom: 1rem !important; }

.mb-4 {
  margin-bottom: 1.5rem !important; }

.mb-5 {
  margin-bottom: 3rem !important; }

.mb-6 {
  margin-bottom: 5rem !important; }

.mb-7 {
  margin-bottom: 8rem !important; }

.mb-8 {
  margin-bottom: 10rem !important; }

.mb-9 {
  margin-bottom: 11rem !important; }

.mb-10 {
  margin-bottom: 14rem !important; }

.mb-11 {
  margin-bottom: 16rem !important; }

.mb-12 {
  margin-bottom: 20rem !important; }

.mb-sm {
  margin-bottom: 1rem !important; }

.mb-md {
  margin-bottom: 2rem !important; }

.mb-lg {
  margin-bottom: 4rem !important; }

.mb-xl {
  margin-bottom: 8rem !important; }

.mb-auto {
  margin-bottom: auto !important; }

.ms-0 {
  margin-left: 0 !important; }

.ms-1 {
  margin-left: 0.25rem !important; }

.ms-2 {
  margin-left: 0.5rem !important; }

.ms-3 {
  margin-left: 1rem !important; }

.ms-4 {
  margin-left: 1.5rem !important; }

.ms-5 {
  margin-left: 3rem !important; }

.ms-6 {
  margin-left: 5rem !important; }

.ms-7 {
  margin-left: 8rem !important; }

.ms-8 {
  margin-left: 10rem !important; }

.ms-9 {
  margin-left: 11rem !important; }

.ms-10 {
  margin-left: 14rem !important; }

.ms-11 {
  margin-left: 16rem !important; }

.ms-12 {
  margin-left: 20rem !important; }

.ms-sm {
  margin-left: 1rem !important; }

.ms-md {
  margin-left: 2rem !important; }

.ms-lg {
  margin-left: 4rem !important; }

.ms-xl {
  margin-left: 8rem !important; }

.ms-auto {
  margin-left: auto !important; }

.p-0 {
  padding: 0 !important; }

.p-1 {
  padding: 0.25rem !important; }

.p-2 {
  padding: 0.5rem !important; }

.p-3 {
  padding: 1rem !important; }

.p-4 {
  padding: 1.5rem !important; }

.p-5 {
  padding: 3rem !important; }

.p-6 {
  padding: 5rem !important; }

.p-7 {
  padding: 8rem !important; }

.p-8 {
  padding: 10rem !important; }

.p-9 {
  padding: 11rem !important; }

.p-10 {
  padding: 14rem !important; }

.p-11 {
  padding: 16rem !important; }

.p-12 {
  padding: 20rem !important; }

.p-sm {
  padding: 1rem !important; }

.p-md {
  padding: 2rem !important; }

.p-lg {
  padding: 4rem !important; }

.p-xl {
  padding: 8rem !important; }

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important; }

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important; }

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important; }

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important; }

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important; }

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important; }

.px-6 {
  padding-right: 5rem !important;
  padding-left: 5rem !important; }

.px-7 {
  padding-right: 8rem !important;
  padding-left: 8rem !important; }

.px-8 {
  padding-right: 10rem !important;
  padding-left: 10rem !important; }

.px-9 {
  padding-right: 11rem !important;
  padding-left: 11rem !important; }

.px-10 {
  padding-right: 14rem !important;
  padding-left: 14rem !important; }

.px-11 {
  padding-right: 16rem !important;
  padding-left: 16rem !important; }

.px-12 {
  padding-right: 20rem !important;
  padding-left: 20rem !important; }

.px-sm {
  padding-right: 1rem !important;
  padding-left: 1rem !important; }

.px-md {
  padding-right: 2rem !important;
  padding-left: 2rem !important; }

.px-lg {
  padding-right: 4rem !important;
  padding-left: 4rem !important; }

.px-xl {
  padding-right: 8rem !important;
  padding-left: 8rem !important; }

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important; }

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important; }

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important; }

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important; }

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important; }

.py-6 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important; }

.py-7 {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important; }

.py-8 {
  padding-top: 10rem !important;
  padding-bottom: 10rem !important; }

.py-9 {
  padding-top: 11rem !important;
  padding-bottom: 11rem !important; }

.py-10 {
  padding-top: 14rem !important;
  padding-bottom: 14rem !important; }

.py-11 {
  padding-top: 16rem !important;
  padding-bottom: 16rem !important; }

.py-12 {
  padding-top: 20rem !important;
  padding-bottom: 20rem !important; }

.py-sm {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important; }

.py-md {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important; }

.py-lg {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important; }

.py-xl {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important; }

.pt-0 {
  padding-top: 0 !important; }

.pt-1 {
  padding-top: 0.25rem !important; }

.pt-2 {
  padding-top: 0.5rem !important; }

.pt-3 {
  padding-top: 1rem !important; }

.pt-4 {
  padding-top: 1.5rem !important; }

.pt-5 {
  padding-top: 3rem !important; }

.pt-6 {
  padding-top: 5rem !important; }

.pt-7 {
  padding-top: 8rem !important; }

.pt-8 {
  padding-top: 10rem !important; }

.pt-9 {
  padding-top: 11rem !important; }

.pt-10 {
  padding-top: 14rem !important; }

.pt-11 {
  padding-top: 16rem !important; }

.pt-12 {
  padding-top: 20rem !important; }

.pt-sm {
  padding-top: 1rem !important; }

.pt-md {
  padding-top: 2rem !important; }

.pt-lg {
  padding-top: 4rem !important; }

.pt-xl {
  padding-top: 8rem !important; }

.pe-0 {
  padding-right: 0 !important; }

.pe-1 {
  padding-right: 0.25rem !important; }

.pe-2 {
  padding-right: 0.5rem !important; }

.pe-3 {
  padding-right: 1rem !important; }

.pe-4 {
  padding-right: 1.5rem !important; }

.pe-5 {
  padding-right: 3rem !important; }

.pe-6 {
  padding-right: 5rem !important; }

.pe-7 {
  padding-right: 8rem !important; }

.pe-8 {
  padding-right: 10rem !important; }

.pe-9 {
  padding-right: 11rem !important; }

.pe-10 {
  padding-right: 14rem !important; }

.pe-11 {
  padding-right: 16rem !important; }

.pe-12 {
  padding-right: 20rem !important; }

.pe-sm {
  padding-right: 1rem !important; }

.pe-md {
  padding-right: 2rem !important; }

.pe-lg {
  padding-right: 4rem !important; }

.pe-xl {
  padding-right: 8rem !important; }

.pb-0 {
  padding-bottom: 0 !important; }

.pb-1 {
  padding-bottom: 0.25rem !important; }

.pb-2 {
  padding-bottom: 0.5rem !important; }

.pb-3 {
  padding-bottom: 1rem !important; }

.pb-4 {
  padding-bottom: 1.5rem !important; }

.pb-5 {
  padding-bottom: 3rem !important; }

.pb-6 {
  padding-bottom: 5rem !important; }

.pb-7 {
  padding-bottom: 8rem !important; }

.pb-8 {
  padding-bottom: 10rem !important; }

.pb-9 {
  padding-bottom: 11rem !important; }

.pb-10 {
  padding-bottom: 14rem !important; }

.pb-11 {
  padding-bottom: 16rem !important; }

.pb-12 {
  padding-bottom: 20rem !important; }

.pb-sm {
  padding-bottom: 1rem !important; }

.pb-md {
  padding-bottom: 2rem !important; }

.pb-lg {
  padding-bottom: 4rem !important; }

.pb-xl {
  padding-bottom: 8rem !important; }

.ps-0 {
  padding-left: 0 !important; }

.ps-1 {
  padding-left: 0.25rem !important; }

.ps-2 {
  padding-left: 0.5rem !important; }

.ps-3 {
  padding-left: 1rem !important; }

.ps-4 {
  padding-left: 1.5rem !important; }

.ps-5 {
  padding-left: 3rem !important; }

.ps-6 {
  padding-left: 5rem !important; }

.ps-7 {
  padding-left: 8rem !important; }

.ps-8 {
  padding-left: 10rem !important; }

.ps-9 {
  padding-left: 11rem !important; }

.ps-10 {
  padding-left: 14rem !important; }

.ps-11 {
  padding-left: 16rem !important; }

.ps-12 {
  padding-left: 20rem !important; }

.ps-sm {
  padding-left: 1rem !important; }

.ps-md {
  padding-left: 2rem !important; }

.ps-lg {
  padding-left: 4rem !important; }

.ps-xl {
  padding-left: 8rem !important; }

.font-monospace {
  font-family: var(--bs-font-monospace) !important; }

.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important; }

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important; }

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important; }

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important; }

.fs-5 {
  font-size: 1.25rem !important; }

.fs-6 {
  font-size: 1rem !important; }

.fst-italic {
  font-style: italic !important; }

.fst-normal {
  font-style: normal !important; }

.fw-light {
  font-weight: 300 !important; }

.fw-lighter {
  font-weight: lighter !important; }

.fw-normal {
  font-weight: 400 !important; }

.fw-bold {
  font-weight: 500 !important; }

.fw-bolder {
  font-weight: 600 !important; }

.fw-extrabold {
  font-weight: 700 !important; }

.fw-black {
  font-weight: 800 !important; }

.lh-1 {
  line-height: 1 !important; }

.lh-sm {
  line-height: 1.25 !important; }

.lh-base {
  line-height: 1.5 !important; }

.lh-lg {
  line-height: 2 !important; }

.text-start {
  text-align: left !important; }

.text-end {
  text-align: right !important; }

.text-center {
  text-align: center !important; }

.text-decoration-none {
  text-decoration: none !important; }

.text-decoration-underline {
  text-decoration: underline !important; }

.text-decoration-line-through {
  text-decoration: line-through !important; }

.text-lowercase {
  text-transform: lowercase !important; }

.text-uppercase {
  text-transform: uppercase !important; }

.text-capitalize {
  text-transform: capitalize !important; }

.text-wrap {
  white-space: normal !important; }

.text-nowrap {
  white-space: nowrap !important; }

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important; }

/* rtl:end:remove */
.text-primary {
  color: var(--cr-primary) !important; }

.text-secondary {
  color: #f0bc74 !important; }

.text-tertiary {
  color: var(--cr-tertiary) !important; }

.text-success {
  color: var(--cr-success) !important; }

.text-info {
  color: var(--cr-info) !important; }

.text-warning {
  color: var(--cr-warning) !important; }

.text-danger {
  color: var(--cr-danger) !important; }

.text-white {
  color: var(--cr-primary-ink) !important; }

.text-gray-50 {
  color: #F9FAFB !important; }

.text-gray-100 {
  color: var(--cr-surface-2) !important; }

.text-gray-200 {
  color: var(--cr-border) !important; }

.text-gray-300 {
  color: var(--cr-border-2) !important; }

.text-gray-400 {
  color: var(--cr-border-strong) !important; }

.text-gray-500 {
  color: var(--cr-muted) !important; }

.text-gray-600 {
  color: #4B5563 !important; }

.text-gray-700 {
  color: var(--cr-text-2) !important; }

.text-gray-800 {
  color: var(--cr-primary) !important; }

.text-gray-900 {
  color: var(--cr-primary-deep) !important; }

.text-body {
  color: var(--cr-text-2) !important; }

.text-muted {
  color: #58677d !important; }

.text-black-50 {
  color: rgba(17, 24, 39, 0.5) !important; }

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important; }

.text-reset {
  color: inherit !important; }

.bg-primary {
  background-color: var(--cr-primary) !important; }

.bg-secondary {
  background-color: var(--cr-secondary) !important; }

.bg-tertiary {
  background-color: var(--cr-tertiary) !important; }

.bg-success {
  background-color: var(--cr-success) !important; }

.bg-info {
  background-color: var(--cr-info) !important; }

.bg-warning {
  background-color: var(--cr-warning) !important; }

.bg-danger {
  background-color: var(--cr-danger) !important; }

.bg-white {
  background-color: var(--cr-surface) !important; }

.bg-indigo {
  background-color: #4F46E5 !important; }

.bg-purple {
  background-color: #7C3AED !important; }

.bg-yellow-100 {
  background-color: #ffeed6 !important; }

.bg-yellow-200 {
  background-color: #f5dbb8 !important; }

.bg-gray-50 {
  background-color: #F9FAFB !important; }

.bg-gray-100 {
  background-color: var(--cr-surface-2) !important; }

.bg-gray-200 {
  background-color: var(--cr-border) !important; }

.bg-gray-300 {
  background-color: var(--cr-border-2) !important; }

.bg-gray-400 {
  background-color: var(--cr-border-strong) !important; }

.bg-gray-500 {
  background-color: var(--cr-muted) !important; }

.bg-gray-600 {
  background-color: #4B5563 !important; }

.bg-gray-700 {
  background-color: var(--cr-text-2) !important; }

.bg-gray-800 {
  background-color: var(--cr-primary) !important; }

.bg-gray-900 {
  background-color: var(--cr-primary-deep) !important; }

.bg-body {
  background-color: var(--cr-surface-2) !important; }

.bg-transparent {
  background-color: transparent !important; }

.bg-gradient {
  background-image: var(--bs-gradient) !important; }

.user-select-all {
  -webkit-user-select: all !important;
          user-select: all !important; }

.user-select-auto {
  -webkit-user-select: auto !important;
          user-select: auto !important; }

.user-select-none {
  -webkit-user-select: none !important;
          user-select: none !important; }

.pe-none {
  pointer-events: none !important; }

.pe-auto {
  pointer-events: auto !important; }

.rounded {
  border-radius: 0.5rem !important; }

.rounded-0 {
  border-radius: 0 !important; }

.rounded-1 {
  border-radius: 0.35rem !important; }

.rounded-2 {
  border-radius: 0.5rem !important; }

.rounded-3 {
  border-radius: 1rem !important; }

.rounded-circle {
  border-radius: 50% !important; }

.rounded-pill {
  border-radius: 50rem !important; }

.rounded-top {
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important; }

.rounded-end {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important; }

.rounded-bottom {
  border-bottom-right-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important; }

.rounded-start {
  border-bottom-left-radius: 0.5rem !important;
  border-top-left-radius: 0.5rem !important; }

.visible {
  visibility: visible !important; }

.invisible {
  visibility: hidden !important; }

.o-0 {
  opacity: 0 !important; }

.o-25 {
  opacity: 0.25 !important; }

.o-50 {
  opacity: 0.5 !important; }

.o-75 {
  opacity: 0.75 !important; }

.o-100 {
  opacity: 1 !important; }

.z-0 {
  z-index: 0 !important; }

.z-1 {
  z-index: 1 !important; }

.z-2 {
  z-index: 2 !important; }

.z-3 {
  z-index: 3 !important; }

.z-999 {
  z-index: 999 !important; }

@media (min-width: 576px) {
  .float-sm-start {
    float: left !important; }
  .float-sm-end {
    float: right !important; }
  .float-sm-none {
    float: none !important; }
  .d-sm-inline {
    display: inline !important; }
  .d-sm-inline-block {
    display: inline-block !important; }
  .d-sm-block {
    display: block !important; }
  .d-sm-grid {
    display: grid !important; }
  .d-sm-table {
    display: table !important; }
  .d-sm-table-row {
    display: table-row !important; }
  .d-sm-table-cell {
    display: table-cell !important; }
  .d-sm-flex {
    display: flex !important; }
  .d-sm-inline-flex {
    display: inline-flex !important; }
  .d-sm-none {
    display: none !important; }
  .vh-sm-100 {
    height: 100vh !important; }
  .flex-sm-fill {
    flex: 1 1 auto !important; }
  .flex-sm-row {
    flex-direction: row !important; }
  .flex-sm-column {
    flex-direction: column !important; }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-sm-grow-0 {
    flex-grow: 0 !important; }
  .flex-sm-grow-1 {
    flex-grow: 1 !important; }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important; }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important; }
  .flex-sm-wrap {
    flex-wrap: wrap !important; }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important; }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .gap-sm-0 {
    gap: 0 !important; }
  .gap-sm-1 {
    gap: 0.25rem !important; }
  .gap-sm-2 {
    gap: 0.5rem !important; }
  .gap-sm-3 {
    gap: 1rem !important; }
  .gap-sm-4 {
    gap: 1.5rem !important; }
  .gap-sm-5 {
    gap: 3rem !important; }
  .gap-sm-6 {
    gap: 5rem !important; }
  .gap-sm-7 {
    gap: 8rem !important; }
  .gap-sm-8 {
    gap: 10rem !important; }
  .gap-sm-9 {
    gap: 11rem !important; }
  .gap-sm-10 {
    gap: 14rem !important; }
  .gap-sm-11 {
    gap: 16rem !important; }
  .gap-sm-12 {
    gap: 20rem !important; }
  .gap-sm-sm {
    gap: 1rem !important; }
  .gap-sm-md {
    gap: 2rem !important; }
  .gap-sm-lg {
    gap: 4rem !important; }
  .gap-sm-xl {
    gap: 8rem !important; }
  .justify-content-sm-start {
    justify-content: flex-start !important; }
  .justify-content-sm-end {
    justify-content: flex-end !important; }
  .justify-content-sm-center {
    justify-content: center !important; }
  .justify-content-sm-between {
    justify-content: space-between !important; }
  .justify-content-sm-around {
    justify-content: space-around !important; }
  .justify-content-sm-evenly {
    justify-content: space-evenly !important; }
  .align-items-sm-start {
    align-items: flex-start !important; }
  .align-items-sm-end {
    align-items: flex-end !important; }
  .align-items-sm-center {
    align-items: center !important; }
  .align-items-sm-baseline {
    align-items: baseline !important; }
  .align-items-sm-stretch {
    align-items: stretch !important; }
  .align-content-sm-start {
    align-content: flex-start !important; }
  .align-content-sm-end {
    align-content: flex-end !important; }
  .align-content-sm-center {
    align-content: center !important; }
  .align-content-sm-between {
    align-content: space-between !important; }
  .align-content-sm-around {
    align-content: space-around !important; }
  .align-content-sm-stretch {
    align-content: stretch !important; }
  .align-self-sm-auto {
    align-self: auto !important; }
  .align-self-sm-start {
    align-self: flex-start !important; }
  .align-self-sm-end {
    align-self: flex-end !important; }
  .align-self-sm-center {
    align-self: center !important; }
  .align-self-sm-baseline {
    align-self: baseline !important; }
  .align-self-sm-stretch {
    align-self: stretch !important; }
  .order-sm-first {
    order: -1 !important; }
  .order-sm-0 {
    order: 0 !important; }
  .order-sm-1 {
    order: 1 !important; }
  .order-sm-2 {
    order: 2 !important; }
  .order-sm-3 {
    order: 3 !important; }
  .order-sm-4 {
    order: 4 !important; }
  .order-sm-5 {
    order: 5 !important; }
  .order-sm-last {
    order: 6 !important; }
  .m-sm-0 {
    margin: 0 !important; }
  .m-sm-1 {
    margin: 0.25rem !important; }
  .m-sm-2 {
    margin: 0.5rem !important; }
  .m-sm-3 {
    margin: 1rem !important; }
  .m-sm-4 {
    margin: 1.5rem !important; }
  .m-sm-5 {
    margin: 3rem !important; }
  .m-sm-6 {
    margin: 5rem !important; }
  .m-sm-7 {
    margin: 8rem !important; }
  .m-sm-8 {
    margin: 10rem !important; }
  .m-sm-9 {
    margin: 11rem !important; }
  .m-sm-10 {
    margin: 14rem !important; }
  .m-sm-11 {
    margin: 16rem !important; }
  .m-sm-12 {
    margin: 20rem !important; }
  .m-sm-sm {
    margin: 1rem !important; }
  .m-sm-md {
    margin: 2rem !important; }
  .m-sm-lg {
    margin: 4rem !important; }
  .m-sm-xl {
    margin: 8rem !important; }
  .m-sm-auto {
    margin: auto !important; }
  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important; }
  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important; }
  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important; }
  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important; }
  .mx-sm-6 {
    margin-right: 5rem !important;
    margin-left: 5rem !important; }
  .mx-sm-7 {
    margin-right: 8rem !important;
    margin-left: 8rem !important; }
  .mx-sm-8 {
    margin-right: 10rem !important;
    margin-left: 10rem !important; }
  .mx-sm-9 {
    margin-right: 11rem !important;
    margin-left: 11rem !important; }
  .mx-sm-10 {
    margin-right: 14rem !important;
    margin-left: 14rem !important; }
  .mx-sm-11 {
    margin-right: 16rem !important;
    margin-left: 16rem !important; }
  .mx-sm-12 {
    margin-right: 20rem !important;
    margin-left: 20rem !important; }
  .mx-sm-sm {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-sm-md {
    margin-right: 2rem !important;
    margin-left: 2rem !important; }
  .mx-sm-lg {
    margin-right: 4rem !important;
    margin-left: 4rem !important; }
  .mx-sm-xl {
    margin-right: 8rem !important;
    margin-left: 8rem !important; }
  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important; }
  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important; }
  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important; }
  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important; }
  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important; }
  .my-sm-6 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important; }
  .my-sm-7 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important; }
  .my-sm-8 {
    margin-top: 10rem !important;
    margin-bottom: 10rem !important; }
  .my-sm-9 {
    margin-top: 11rem !important;
    margin-bottom: 11rem !important; }
  .my-sm-10 {
    margin-top: 14rem !important;
    margin-bottom: 14rem !important; }
  .my-sm-11 {
    margin-top: 16rem !important;
    margin-bottom: 16rem !important; }
  .my-sm-12 {
    margin-top: 20rem !important;
    margin-bottom: 20rem !important; }
  .my-sm-sm {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-sm-md {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important; }
  .my-sm-lg {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important; }
  .my-sm-xl {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important; }
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important; }
  .p-sm-0 {
    padding: 0 !important; }
  .p-sm-1 {
    padding: 0.25rem !important; }
  .p-sm-2 {
    padding: 0.5rem !important; }
  .p-sm-3 {
    padding: 1rem !important; }
  .p-sm-4 {
    padding: 1.5rem !important; }
  .p-sm-5 {
    padding: 3rem !important; }
  .p-sm-6 {
    padding: 5rem !important; }
  .p-sm-7 {
    padding: 8rem !important; }
  .p-sm-8 {
    padding: 10rem !important; }
  .p-sm-9 {
    padding: 11rem !important; }
  .p-sm-10 {
    padding: 14rem !important; }
  .p-sm-11 {
    padding: 16rem !important; }
  .p-sm-12 {
    padding: 20rem !important; }
  .p-sm-sm {
    padding: 1rem !important; }
  .p-sm-md {
    padding: 2rem !important; }
  .p-sm-lg {
    padding: 4rem !important; }
  .p-sm-xl {
    padding: 8rem !important; }
  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important; }
  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important; }
  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important; }
  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important; }
  .px-sm-6 {
    padding-right: 5rem !important;
    padding-left: 5rem !important; }
  .px-sm-7 {
    padding-right: 8rem !important;
    padding-left: 8rem !important; }
  .px-sm-8 {
    padding-right: 10rem !important;
    padding-left: 10rem !important; }
  .px-sm-9 {
    padding-right: 11rem !important;
    padding-left: 11rem !important; }
  .px-sm-10 {
    padding-right: 14rem !important;
    padding-left: 14rem !important; }
  .px-sm-11 {
    padding-right: 16rem !important;
    padding-left: 16rem !important; }
  .px-sm-12 {
    padding-right: 20rem !important;
    padding-left: 20rem !important; }
  .px-sm-sm {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-sm-md {
    padding-right: 2rem !important;
    padding-left: 2rem !important; }
  .px-sm-lg {
    padding-right: 4rem !important;
    padding-left: 4rem !important; }
  .px-sm-xl {
    padding-right: 8rem !important;
    padding-left: 8rem !important; }
  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important; }
  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important; }
  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important; }
  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; }
  .py-sm-6 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important; }
  .py-sm-7 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important; }
  .py-sm-8 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important; }
  .py-sm-9 {
    padding-top: 11rem !important;
    padding-bottom: 11rem !important; }
  .py-sm-10 {
    padding-top: 14rem !important;
    padding-bottom: 14rem !important; }
  .py-sm-11 {
    padding-top: 16rem !important;
    padding-bottom: 16rem !important; }
  .py-sm-12 {
    padding-top: 20rem !important;
    padding-bottom: 20rem !important; }
  .py-sm-sm {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-sm-md {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important; }
  .py-sm-lg {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important; }
  .py-sm-xl {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important; }
  .pt-sm-0 {
    padding-top: 0 !important; }
  .pt-sm-1 {
    padding-top: 0.25rem !important; }
  .pt-sm-2 {
    padding-top: 0.5rem !important; }
  .pt-sm-3 {
    padding-top: 1rem !important; }
  .pt-sm-4 {
    padding-top: 1.5rem !important; }
  .pt-sm-5 {
    padding-top: 3rem !important; }
  .pt-sm-6 {
    padding-top: 5rem !important; }
  .pt-sm-7 {
    padding-top: 8rem !important; }
  .pt-sm-8 {
    padding-top: 10rem !important; }
  .pt-sm-9 {
    padding-top: 11rem !important; }
  .pt-sm-10 {
    padding-top: 14rem !important; }
  .pt-sm-11 {
    padding-top: 16rem !important; }
  .pt-sm-12 {
    padding-top: 20rem !important; }
  .pt-sm-sm {
    padding-top: 1rem !important; }
  .pt-sm-md {
    padding-top: 2rem !important; }
  .pt-sm-lg {
    padding-top: 4rem !important; }
  .pt-sm-xl {
    padding-top: 8rem !important; }
  .pe-sm-0 {
    padding-right: 0 !important; }
  .pe-sm-1 {
    padding-right: 0.25rem !important; }
  .pe-sm-2 {
    padding-right: 0.5rem !important; }
  .pe-sm-3 {
    padding-right: 1rem !important; }
  .pe-sm-4 {
    padding-right: 1.5rem !important; }
  .pe-sm-5 {
    padding-right: 3rem !important; }
  .pe-sm-6 {
    padding-right: 5rem !important; }
  .pe-sm-7 {
    padding-right: 8rem !important; }
  .pe-sm-8 {
    padding-right: 10rem !important; }
  .pe-sm-9 {
    padding-right: 11rem !important; }
  .pe-sm-10 {
    padding-right: 14rem !important; }
  .pe-sm-11 {
    padding-right: 16rem !important; }
  .pe-sm-12 {
    padding-right: 20rem !important; }
  .pe-sm-sm {
    padding-right: 1rem !important; }
  .pe-sm-md {
    padding-right: 2rem !important; }
  .pe-sm-lg {
    padding-right: 4rem !important; }
  .pe-sm-xl {
    padding-right: 8rem !important; }
  .pb-sm-0 {
    padding-bottom: 0 !important; }
  .pb-sm-1 {
    padding-bottom: 0.25rem !important; }
  .pb-sm-2 {
    padding-bottom: 0.5rem !important; }
  .pb-sm-3 {
    padding-bottom: 1rem !important; }
  .pb-sm-4 {
    padding-bottom: 1.5rem !important; }
  .pb-sm-5 {
    padding-bottom: 3rem !important; }
  .pb-sm-6 {
    padding-bottom: 5rem !important; }
  .pb-sm-7 {
    padding-bottom: 8rem !important; }
  .pb-sm-8 {
    padding-bottom: 10rem !important; }
  .pb-sm-9 {
    padding-bottom: 11rem !important; }
  .pb-sm-10 {
    padding-bottom: 14rem !important; }
  .pb-sm-11 {
    padding-bottom: 16rem !important; }
  .pb-sm-12 {
    padding-bottom: 20rem !important; }
  .pb-sm-sm {
    padding-bottom: 1rem !important; }
  .pb-sm-md {
    padding-bottom: 2rem !important; }
  .pb-sm-lg {
    padding-bottom: 4rem !important; }
  .pb-sm-xl {
    padding-bottom: 8rem !important; }
  .ps-sm-0 {
    padding-left: 0 !important; }
  .ps-sm-1 {
    padding-left: 0.25rem !important; }
  .ps-sm-2 {
    padding-left: 0.5rem !important; }
  .ps-sm-3 {
    padding-left: 1rem !important; }
  .ps-sm-4 {
    padding-left: 1.5rem !important; }
  .ps-sm-5 {
    padding-left: 3rem !important; }
  .ps-sm-6 {
    padding-left: 5rem !important; }
  .ps-sm-7 {
    padding-left: 8rem !important; }
  .ps-sm-8 {
    padding-left: 10rem !important; }
  .ps-sm-9 {
    padding-left: 11rem !important; }
  .ps-sm-10 {
    padding-left: 14rem !important; }
  .ps-sm-11 {
    padding-left: 16rem !important; }
  .ps-sm-12 {
    padding-left: 20rem !important; }
  .ps-sm-sm {
    padding-left: 1rem !important; }
  .ps-sm-md {
    padding-left: 2rem !important; }
  .ps-sm-lg {
    padding-left: 4rem !important; }
  .ps-sm-xl {
    padding-left: 8rem !important; }
  .text-sm-start {
    text-align: left !important; }
  .text-sm-end {
    text-align: right !important; }
  .text-sm-center {
    text-align: center !important; } }

@media (min-width: 768px) {
  .float-md-start {
    float: left !important; }
  .float-md-end {
    float: right !important; }
  .float-md-none {
    float: none !important; }
  .d-md-inline {
    display: inline !important; }
  .d-md-inline-block {
    display: inline-block !important; }
  .d-md-block {
    display: block !important; }
  .d-md-grid {
    display: grid !important; }
  .d-md-table {
    display: table !important; }
  .d-md-table-row {
    display: table-row !important; }
  .d-md-table-cell {
    display: table-cell !important; }
  .d-md-flex {
    display: flex !important; }
  .d-md-inline-flex {
    display: inline-flex !important; }
  .d-md-none {
    display: none !important; }
  .vh-md-100 {
    height: 100vh !important; }
  .flex-md-fill {
    flex: 1 1 auto !important; }
  .flex-md-row {
    flex-direction: row !important; }
  .flex-md-column {
    flex-direction: column !important; }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-md-grow-0 {
    flex-grow: 0 !important; }
  .flex-md-grow-1 {
    flex-grow: 1 !important; }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important; }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important; }
  .flex-md-wrap {
    flex-wrap: wrap !important; }
  .flex-md-nowrap {
    flex-wrap: nowrap !important; }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .gap-md-0 {
    gap: 0 !important; }
  .gap-md-1 {
    gap: 0.25rem !important; }
  .gap-md-2 {
    gap: 0.5rem !important; }
  .gap-md-3 {
    gap: 1rem !important; }
  .gap-md-4 {
    gap: 1.5rem !important; }
  .gap-md-5 {
    gap: 3rem !important; }
  .gap-md-6 {
    gap: 5rem !important; }
  .gap-md-7 {
    gap: 8rem !important; }
  .gap-md-8 {
    gap: 10rem !important; }
  .gap-md-9 {
    gap: 11rem !important; }
  .gap-md-10 {
    gap: 14rem !important; }
  .gap-md-11 {
    gap: 16rem !important; }
  .gap-md-12 {
    gap: 20rem !important; }
  .gap-md-sm {
    gap: 1rem !important; }
  .gap-md-md {
    gap: 2rem !important; }
  .gap-md-lg {
    gap: 4rem !important; }
  .gap-md-xl {
    gap: 8rem !important; }
  .justify-content-md-start {
    justify-content: flex-start !important; }
  .justify-content-md-end {
    justify-content: flex-end !important; }
  .justify-content-md-center {
    justify-content: center !important; }
  .justify-content-md-between {
    justify-content: space-between !important; }
  .justify-content-md-around {
    justify-content: space-around !important; }
  .justify-content-md-evenly {
    justify-content: space-evenly !important; }
  .align-items-md-start {
    align-items: flex-start !important; }
  .align-items-md-end {
    align-items: flex-end !important; }
  .align-items-md-center {
    align-items: center !important; }
  .align-items-md-baseline {
    align-items: baseline !important; }
  .align-items-md-stretch {
    align-items: stretch !important; }
  .align-content-md-start {
    align-content: flex-start !important; }
  .align-content-md-end {
    align-content: flex-end !important; }
  .align-content-md-center {
    align-content: center !important; }
  .align-content-md-between {
    align-content: space-between !important; }
  .align-content-md-around {
    align-content: space-around !important; }
  .align-content-md-stretch {
    align-content: stretch !important; }
  .align-self-md-auto {
    align-self: auto !important; }
  .align-self-md-start {
    align-self: flex-start !important; }
  .align-self-md-end {
    align-self: flex-end !important; }
  .align-self-md-center {
    align-self: center !important; }
  .align-self-md-baseline {
    align-self: baseline !important; }
  .align-self-md-stretch {
    align-self: stretch !important; }
  .order-md-first {
    order: -1 !important; }
  .order-md-0 {
    order: 0 !important; }
  .order-md-1 {
    order: 1 !important; }
  .order-md-2 {
    order: 2 !important; }
  .order-md-3 {
    order: 3 !important; }
  .order-md-4 {
    order: 4 !important; }
  .order-md-5 {
    order: 5 !important; }
  .order-md-last {
    order: 6 !important; }
  .m-md-0 {
    margin: 0 !important; }
  .m-md-1 {
    margin: 0.25rem !important; }
  .m-md-2 {
    margin: 0.5rem !important; }
  .m-md-3 {
    margin: 1rem !important; }
  .m-md-4 {
    margin: 1.5rem !important; }
  .m-md-5 {
    margin: 3rem !important; }
  .m-md-6 {
    margin: 5rem !important; }
  .m-md-7 {
    margin: 8rem !important; }
  .m-md-8 {
    margin: 10rem !important; }
  .m-md-9 {
    margin: 11rem !important; }
  .m-md-10 {
    margin: 14rem !important; }
  .m-md-11 {
    margin: 16rem !important; }
  .m-md-12 {
    margin: 20rem !important; }
  .m-md-sm {
    margin: 1rem !important; }
  .m-md-md {
    margin: 2rem !important; }
  .m-md-lg {
    margin: 4rem !important; }
  .m-md-xl {
    margin: 8rem !important; }
  .m-md-auto {
    margin: auto !important; }
  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important; }
  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important; }
  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important; }
  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important; }
  .mx-md-6 {
    margin-right: 5rem !important;
    margin-left: 5rem !important; }
  .mx-md-7 {
    margin-right: 8rem !important;
    margin-left: 8rem !important; }
  .mx-md-8 {
    margin-right: 10rem !important;
    margin-left: 10rem !important; }
  .mx-md-9 {
    margin-right: 11rem !important;
    margin-left: 11rem !important; }
  .mx-md-10 {
    margin-right: 14rem !important;
    margin-left: 14rem !important; }
  .mx-md-11 {
    margin-right: 16rem !important;
    margin-left: 16rem !important; }
  .mx-md-12 {
    margin-right: 20rem !important;
    margin-left: 20rem !important; }
  .mx-md-sm {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-md-md {
    margin-right: 2rem !important;
    margin-left: 2rem !important; }
  .mx-md-lg {
    margin-right: 4rem !important;
    margin-left: 4rem !important; }
  .mx-md-xl {
    margin-right: 8rem !important;
    margin-left: 8rem !important; }
  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important; }
  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important; }
  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important; }
  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important; }
  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important; }
  .my-md-6 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important; }
  .my-md-7 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important; }
  .my-md-8 {
    margin-top: 10rem !important;
    margin-bottom: 10rem !important; }
  .my-md-9 {
    margin-top: 11rem !important;
    margin-bottom: 11rem !important; }
  .my-md-10 {
    margin-top: 14rem !important;
    margin-bottom: 14rem !important; }
  .my-md-11 {
    margin-top: 16rem !important;
    margin-bottom: 16rem !important; }
  .my-md-12 {
    margin-top: 20rem !important;
    margin-bottom: 20rem !important; }
  .my-md-sm {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-md-md {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important; }
  .my-md-lg {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important; }
  .my-md-xl {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important; }
  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important; }
  .mt-md-0 {
    margin-top: 0 !important; }
  .mt-md-1 {
    margin-top: 0.25rem !important; }
  .mt-md-2 {
    margin-top: 0.5rem !important; }
  .mt-md-3 {
    margin-top: 1rem !important; }
  .mt-md-4 {
    margin-top: 1.5rem !important; }
  .mt-md-5 {
    margin-top: 3rem !important; }
  .mt-md-6 {
    margin-top: 5rem !important; }
  .mt-md-7 {
    margin-top: 8rem !important; }
  .mt-md-8 {
    margin-top: 10rem !important; }
  .mt-md-9 {
    margin-top: 11rem !important; }
  .mt-md-10 {
    margin-top: 14rem !important; }
  .mt-md-11 {
    margin-top: 16rem !important; }
  .mt-md-12 {
    margin-top: 20rem !important; }
  .mt-md-sm {
    margin-top: 1rem !important; }
  .mt-md-md {
    margin-top: 2rem !important; }
  .mt-md-lg {
    margin-top: 4rem !important; }
  .mt-md-xl {
    margin-top: 8rem !important; }
  .mt-md-auto {
    margin-top: auto !important; }
  .me-md-0 {
    margin-right: 0 !important; }
  .me-md-1 {
    margin-right: 0.25rem !important; }
  .me-md-2 {
    margin-right: 0.5rem !important; }
  .me-md-3 {
    margin-right: 1rem !important; }
  .me-md-4 {
    margin-right: 1.5rem !important; }
  .me-md-5 {
    margin-right: 3rem !important; }
  .me-md-6 {
    margin-right: 5rem !important; }
  .me-md-7 {
    margin-right: 8rem !important; }
  .me-md-8 {
    margin-right: 10rem !important; }
  .me-md-9 {
    margin-right: 11rem !important; }
  .me-md-10 {
    margin-right: 14rem !important; }
  .me-md-11 {
    margin-right: 16rem !important; }
  .me-md-12 {
    margin-right: 20rem !important; }
  .me-md-sm {
    margin-right: 1rem !important; }
  .me-md-md {
    margin-right: 2rem !important; }
  .me-md-lg {
    margin-right: 4rem !important; }
  .me-md-xl {
    margin-right: 8rem !important; }
  .me-md-auto {
    margin-right: auto !important; }
  .mb-md-0 {
    margin-bottom: 0 !important; }
  .mb-md-1 {
    margin-bottom: 0.25rem !important; }
  .mb-md-2 {
    margin-bottom: 0.5rem !important; }
  .mb-md-3 {
    margin-bottom: 1rem !important; }
  .mb-md-4 {
    margin-bottom: 1.5rem !important; }
  .mb-md-5 {
    margin-bottom: 3rem !important; }
  .mb-md-6 {
    margin-bottom: 5rem !important; }
  .mb-md-7 {
    margin-bottom: 8rem !important; }
  .mb-md-8 {
    margin-bottom: 10rem !important; }
  .mb-md-9 {
    margin-bottom: 11rem !important; }
  .mb-md-10 {
    margin-bottom: 14rem !important; }
  .mb-md-11 {
    margin-bottom: 16rem !important; }
  .mb-md-12 {
    margin-bottom: 20rem !important; }
  .mb-md-sm {
    margin-bottom: 1rem !important; }
  .mb-md-md {
    margin-bottom: 2rem !important; }
  .mb-md-lg {
    margin-bottom: 4rem !important; }
  .mb-md-xl {
    margin-bottom: 8rem !important; }
  .mb-md-auto {
    margin-bottom: auto !important; }
  .ms-md-0 {
    margin-left: 0 !important; }
  .ms-md-1 {
    margin-left: 0.25rem !important; }
  .ms-md-2 {
    margin-left: 0.5rem !important; }
  .ms-md-3 {
    margin-left: 1rem !important; }
  .ms-md-4 {
    margin-left: 1.5rem !important; }
  .ms-md-5 {
    margin-left: 3rem !important; }
  .ms-md-6 {
    margin-left: 5rem !important; }
  .ms-md-7 {
    margin-left: 8rem !important; }
  .ms-md-8 {
    margin-left: 10rem !important; }
  .ms-md-9 {
    margin-left: 11rem !important; }
  .ms-md-10 {
    margin-left: 14rem !important; }
  .ms-md-11 {
    margin-left: 16rem !important; }
  .ms-md-12 {
    margin-left: 20rem !important; }
  .ms-md-sm {
    margin-left: 1rem !important; }
  .ms-md-md {
    margin-left: 2rem !important; }
  .ms-md-lg {
    margin-left: 4rem !important; }
  .ms-md-xl {
    margin-left: 8rem !important; }
  .ms-md-auto {
    margin-left: auto !important; }
  .m-md-n1 {
    margin: -0.25rem !important; }
  .m-md-n2 {
    margin: -0.5rem !important; }
  .m-md-n3 {
    margin: -1rem !important; }
  .m-md-n4 {
    margin: -1.5rem !important; }
  .m-md-n5 {
    margin: -3rem !important; }
  .m-md-n6 {
    margin: -5rem !important; }
  .m-md-n7 {
    margin: -8rem !important; }
  .m-md-n8 {
    margin: -10rem !important; }
  .m-md-n9 {
    margin: -11rem !important; }
  .m-md-n10 {
    margin: -14rem !important; }
  .m-md-n11 {
    margin: -16rem !important; }
  .m-md-n12 {
    margin: -20rem !important; }
  .m-md-nsm {
    margin: -1rem !important; }
  .m-md-nmd {
    margin: -2rem !important; }
  .m-md-nlg {
    margin: -4rem !important; }
  .m-md-nxl {
    margin: -8rem !important; }
  .mx-md-n1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important; }
  .mx-md-n2 {
    margin-right: -0.5rem !important;
    margin-left: -0.5rem !important; }
  .mx-md-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important; }
  .mx-md-n4 {
    margin-right: -1.5rem !important;
    margin-left: -1.5rem !important; }
  .mx-md-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important; }
  .mx-md-n6 {
    margin-right: -5rem !important;
    margin-left: -5rem !important; }
  .mx-md-n7 {
    margin-right: -8rem !important;
    margin-left: -8rem !important; }
  .mx-md-n8 {
    margin-right: -10rem !important;
    margin-left: -10rem !important; }
  .mx-md-n9 {
    margin-right: -11rem !important;
    margin-left: -11rem !important; }
  .mx-md-n10 {
    margin-right: -14rem !important;
    margin-left: -14rem !important; }
  .mx-md-n11 {
    margin-right: -16rem !important;
    margin-left: -16rem !important; }
  .mx-md-n12 {
    margin-right: -20rem !important;
    margin-left: -20rem !important; }
  .mx-md-nsm {
    margin-right: -1rem !important;
    margin-left: -1rem !important; }
  .mx-md-nmd {
    margin-right: -2rem !important;
    margin-left: -2rem !important; }
  .mx-md-nlg {
    margin-right: -4rem !important;
    margin-left: -4rem !important; }
  .mx-md-nxl {
    margin-right: -8rem !important;
    margin-left: -8rem !important; }
  .my-md-n1 {
    margin-top: -0.25rem !important;
    margin-bottom: -0.25rem !important; }
  .my-md-n2 {
    margin-top: -0.5rem !important;
    margin-bottom: -0.5rem !important; }
  .my-md-n3 {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important; }
  .my-md-n4 {
    margin-top: -1.5rem !important;
    margin-bottom: -1.5rem !important; }
  .my-md-n5 {
    margin-top: -3rem !important;
    margin-bottom: -3rem !important; }
  .my-md-n6 {
    margin-top: -5rem !important;
    margin-bottom: -5rem !important; }
  .my-md-n7 {
    margin-top: -8rem !important;
    margin-bottom: -8rem !important; }
  .my-md-n8 {
    margin-top: -10rem !important;
    margin-bottom: -10rem !important; }
  .my-md-n9 {
    margin-top: -11rem !important;
    margin-bottom: -11rem !important; }
  .my-md-n10 {
    margin-top: -14rem !important;
    margin-bottom: -14rem !important; }
  .my-md-n11 {
    margin-top: -16rem !important;
    margin-bottom: -16rem !important; }
  .my-md-n12 {
    margin-top: -20rem !important;
    margin-bottom: -20rem !important; }
  .my-md-nsm {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important; }
  .my-md-nmd {
    margin-top: -2rem !important;
    margin-bottom: -2rem !important; }
  .my-md-nlg {
    margin-top: -4rem !important;
    margin-bottom: -4rem !important; }
  .my-md-nxl {
    margin-top: -8rem !important;
    margin-bottom: -8rem !important; }
  .mt-md-n1 {
    margin-top: -0.25rem !important; }
  .mt-md-n2 {
    margin-top: -0.5rem !important; }
  .mt-md-n3 {
    margin-top: -1rem !important; }
  .mt-md-n4 {
    margin-top: -1.5rem !important; }
  .mt-md-n5 {
    margin-top: -3rem !important; }
  .mt-md-n6 {
    margin-top: -5rem !important; }
  .mt-md-n7 {
    margin-top: -8rem !important; }
  .mt-md-n8 {
    margin-top: -10rem !important; }
  .mt-md-n9 {
    margin-top: -11rem !important; }
  .mt-md-n10 {
    margin-top: -14rem !important; }
  .mt-md-n11 {
    margin-top: -16rem !important; }
  .mt-md-n12 {
    margin-top: -20rem !important; }
  .mt-md-nsm {
    margin-top: -1rem !important; }
  .mt-md-nmd {
    margin-top: -2rem !important; }
  .mt-md-nlg {
    margin-top: -4rem !important; }
  .mt-md-nxl {
    margin-top: -8rem !important; }
  .me-md-n1 {
    margin-right: -0.25rem !important; }
  .me-md-n2 {
    margin-right: -0.5rem !important; }
  .me-md-n3 {
    margin-right: -1rem !important; }
  .me-md-n4 {
    margin-right: -1.5rem !important; }
  .me-md-n5 {
    margin-right: -3rem !important; }
  .me-md-n6 {
    margin-right: -5rem !important; }
  .me-md-n7 {
    margin-right: -8rem !important; }
  .me-md-n8 {
    margin-right: -10rem !important; }
  .me-md-n9 {
    margin-right: -11rem !important; }
  .me-md-n10 {
    margin-right: -14rem !important; }
  .me-md-n11 {
    margin-right: -16rem !important; }
  .me-md-n12 {
    margin-right: -20rem !important; }
  .me-md-nsm {
    margin-right: -1rem !important; }
  .me-md-nmd {
    margin-right: -2rem !important; }
  .me-md-nlg {
    margin-right: -4rem !important; }
  .me-md-nxl {
    margin-right: -8rem !important; }
  .mb-md-n1 {
    margin-bottom: -0.25rem !important; }
  .mb-md-n2 {
    margin-bottom: -0.5rem !important; }
  .mb-md-n3 {
    margin-bottom: -1rem !important; }
  .mb-md-n4 {
    margin-bottom: -1.5rem !important; }
  .mb-md-n5 {
    margin-bottom: -3rem !important; }
  .mb-md-n6 {
    margin-bottom: -5rem !important; }
  .mb-md-n7 {
    margin-bottom: -8rem !important; }
  .mb-md-n8 {
    margin-bottom: -10rem !important; }
  .mb-md-n9 {
    margin-bottom: -11rem !important; }
  .mb-md-n10 {
    margin-bottom: -14rem !important; }
  .mb-md-n11 {
    margin-bottom: -16rem !important; }
  .mb-md-n12 {
    margin-bottom: -20rem !important; }
  .mb-md-nsm {
    margin-bottom: -1rem !important; }
  .mb-md-nmd {
    margin-bottom: -2rem !important; }
  .mb-md-nlg {
    margin-bottom: -4rem !important; }
  .mb-md-nxl {
    margin-bottom: -8rem !important; }
  .ms-md-n1 {
    margin-left: -0.25rem !important; }
  .ms-md-n2 {
    margin-left: -0.5rem !important; }
  .ms-md-n3 {
    margin-left: -1rem !important; }
  .ms-md-n4 {
    margin-left: -1.5rem !important; }
  .ms-md-n5 {
    margin-left: -3rem !important; }
  .ms-md-n6 {
    margin-left: -5rem !important; }
  .ms-md-n7 {
    margin-left: -8rem !important; }
  .ms-md-n8 {
    margin-left: -10rem !important; }
  .ms-md-n9 {
    margin-left: -11rem !important; }
  .ms-md-n10 {
    margin-left: -14rem !important; }
  .ms-md-n11 {
    margin-left: -16rem !important; }
  .ms-md-n12 {
    margin-left: -20rem !important; }
  .ms-md-nsm {
    margin-left: -1rem !important; }
  .ms-md-nmd {
    margin-left: -2rem !important; }
  .ms-md-nlg {
    margin-left: -4rem !important; }
  .ms-md-nxl {
    margin-left: -8rem !important; }
  .p-md-0 {
    padding: 0 !important; }
  .p-md-1 {
    padding: 0.25rem !important; }
  .p-md-2 {
    padding: 0.5rem !important; }
  .p-md-3 {
    padding: 1rem !important; }
  .p-md-4 {
    padding: 1.5rem !important; }
  .p-md-5 {
    padding: 3rem !important; }
  .p-md-6 {
    padding: 5rem !important; }
  .p-md-7 {
    padding: 8rem !important; }
  .p-md-8 {
    padding: 10rem !important; }
  .p-md-9 {
    padding: 11rem !important; }
  .p-md-10 {
    padding: 14rem !important; }
  .p-md-11 {
    padding: 16rem !important; }
  .p-md-12 {
    padding: 20rem !important; }
  .p-md-sm {
    padding: 1rem !important; }
  .p-md-md {
    padding: 2rem !important; }
  .p-md-lg {
    padding: 4rem !important; }
  .p-md-xl {
    padding: 8rem !important; }
  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important; }
  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important; }
  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important; }
  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important; }
  .px-md-6 {
    padding-right: 5rem !important;
    padding-left: 5rem !important; }
  .px-md-7 {
    padding-right: 8rem !important;
    padding-left: 8rem !important; }
  .px-md-8 {
    padding-right: 10rem !important;
    padding-left: 10rem !important; }
  .px-md-9 {
    padding-right: 11rem !important;
    padding-left: 11rem !important; }
  .px-md-10 {
    padding-right: 14rem !important;
    padding-left: 14rem !important; }
  .px-md-11 {
    padding-right: 16rem !important;
    padding-left: 16rem !important; }
  .px-md-12 {
    padding-right: 20rem !important;
    padding-left: 20rem !important; }
  .px-md-sm {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-md-md {
    padding-right: 2rem !important;
    padding-left: 2rem !important; }
  .px-md-lg {
    padding-right: 4rem !important;
    padding-left: 4rem !important; }
  .px-md-xl {
    padding-right: 8rem !important;
    padding-left: 8rem !important; }
  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important; }
  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important; }
  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important; }
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; }
  .py-md-6 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important; }
  .py-md-7 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important; }
  .py-md-8 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important; }
  .py-md-9 {
    padding-top: 11rem !important;
    padding-bottom: 11rem !important; }
  .py-md-10 {
    padding-top: 14rem !important;
    padding-bottom: 14rem !important; }
  .py-md-11 {
    padding-top: 16rem !important;
    padding-bottom: 16rem !important; }
  .py-md-12 {
    padding-top: 20rem !important;
    padding-bottom: 20rem !important; }
  .py-md-sm {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-md-md {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important; }
  .py-md-lg {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important; }
  .py-md-xl {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important; }
  .pt-md-0 {
    padding-top: 0 !important; }
  .pt-md-1 {
    padding-top: 0.25rem !important; }
  .pt-md-2 {
    padding-top: 0.5rem !important; }
  .pt-md-3 {
    padding-top: 1rem !important; }
  .pt-md-4 {
    padding-top: 1.5rem !important; }
  .pt-md-5 {
    padding-top: 3rem !important; }
  .pt-md-6 {
    padding-top: 5rem !important; }
  .pt-md-7 {
    padding-top: 8rem !important; }
  .pt-md-8 {
    padding-top: 10rem !important; }
  .pt-md-9 {
    padding-top: 11rem !important; }
  .pt-md-10 {
    padding-top: 14rem !important; }
  .pt-md-11 {
    padding-top: 16rem !important; }
  .pt-md-12 {
    padding-top: 20rem !important; }
  .pt-md-sm {
    padding-top: 1rem !important; }
  .pt-md-md {
    padding-top: 2rem !important; }
  .pt-md-lg {
    padding-top: 4rem !important; }
  .pt-md-xl {
    padding-top: 8rem !important; }
  .pe-md-0 {
    padding-right: 0 !important; }
  .pe-md-1 {
    padding-right: 0.25rem !important; }
  .pe-md-2 {
    padding-right: 0.5rem !important; }
  .pe-md-3 {
    padding-right: 1rem !important; }
  .pe-md-4 {
    padding-right: 1.5rem !important; }
  .pe-md-5 {
    padding-right: 3rem !important; }
  .pe-md-6 {
    padding-right: 5rem !important; }
  .pe-md-7 {
    padding-right: 8rem !important; }
  .pe-md-8 {
    padding-right: 10rem !important; }
  .pe-md-9 {
    padding-right: 11rem !important; }
  .pe-md-10 {
    padding-right: 14rem !important; }
  .pe-md-11 {
    padding-right: 16rem !important; }
  .pe-md-12 {
    padding-right: 20rem !important; }
  .pe-md-sm {
    padding-right: 1rem !important; }
  .pe-md-md {
    padding-right: 2rem !important; }
  .pe-md-lg {
    padding-right: 4rem !important; }
  .pe-md-xl {
    padding-right: 8rem !important; }
  .pb-md-0 {
    padding-bottom: 0 !important; }
  .pb-md-1 {
    padding-bottom: 0.25rem !important; }
  .pb-md-2 {
    padding-bottom: 0.5rem !important; }
  .pb-md-3 {
    padding-bottom: 1rem !important; }
  .pb-md-4 {
    padding-bottom: 1.5rem !important; }
  .pb-md-5 {
    padding-bottom: 3rem !important; }
  .pb-md-6 {
    padding-bottom: 5rem !important; }
  .pb-md-7 {
    padding-bottom: 8rem !important; }
  .pb-md-8 {
    padding-bottom: 10rem !important; }
  .pb-md-9 {
    padding-bottom: 11rem !important; }
  .pb-md-10 {
    padding-bottom: 14rem !important; }
  .pb-md-11 {
    padding-bottom: 16rem !important; }
  .pb-md-12 {
    padding-bottom: 20rem !important; }
  .pb-md-sm {
    padding-bottom: 1rem !important; }
  .pb-md-md {
    padding-bottom: 2rem !important; }
  .pb-md-lg {
    padding-bottom: 4rem !important; }
  .pb-md-xl {
    padding-bottom: 8rem !important; }
  .ps-md-0 {
    padding-left: 0 !important; }
  .ps-md-1 {
    padding-left: 0.25rem !important; }
  .ps-md-2 {
    padding-left: 0.5rem !important; }
  .ps-md-3 {
    padding-left: 1rem !important; }
  .ps-md-4 {
    padding-left: 1.5rem !important; }
  .ps-md-5 {
    padding-left: 3rem !important; }
  .ps-md-6 {
    padding-left: 5rem !important; }
  .ps-md-7 {
    padding-left: 8rem !important; }
  .ps-md-8 {
    padding-left: 10rem !important; }
  .ps-md-9 {
    padding-left: 11rem !important; }
  .ps-md-10 {
    padding-left: 14rem !important; }
  .ps-md-11 {
    padding-left: 16rem !important; }
  .ps-md-12 {
    padding-left: 20rem !important; }
  .ps-md-sm {
    padding-left: 1rem !important; }
  .ps-md-md {
    padding-left: 2rem !important; }
  .ps-md-lg {
    padding-left: 4rem !important; }
  .ps-md-xl {
    padding-left: 8rem !important; }
  .text-md-start {
    text-align: left !important; }
  .text-md-end {
    text-align: right !important; }
  .text-md-center {
    text-align: center !important; } }

@media (min-width: 992px) {
  .float-lg-start {
    float: left !important; }
  .float-lg-end {
    float: right !important; }
  .float-lg-none {
    float: none !important; }
  .d-lg-inline {
    display: inline !important; }
  .d-lg-inline-block {
    display: inline-block !important; }
  .d-lg-block {
    display: block !important; }
  .d-lg-grid {
    display: grid !important; }
  .d-lg-table {
    display: table !important; }
  .d-lg-table-row {
    display: table-row !important; }
  .d-lg-table-cell {
    display: table-cell !important; }
  .d-lg-flex {
    display: flex !important; }
  .d-lg-inline-flex {
    display: inline-flex !important; }
  .d-lg-none {
    display: none !important; }
  .vh-lg-100 {
    height: 100vh !important; }
  .flex-lg-fill {
    flex: 1 1 auto !important; }
  .flex-lg-row {
    flex-direction: row !important; }
  .flex-lg-column {
    flex-direction: column !important; }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-lg-grow-0 {
    flex-grow: 0 !important; }
  .flex-lg-grow-1 {
    flex-grow: 1 !important; }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important; }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important; }
  .flex-lg-wrap {
    flex-wrap: wrap !important; }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important; }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .gap-lg-0 {
    gap: 0 !important; }
  .gap-lg-1 {
    gap: 0.25rem !important; }
  .gap-lg-2 {
    gap: 0.5rem !important; }
  .gap-lg-3 {
    gap: 1rem !important; }
  .gap-lg-4 {
    gap: 1.5rem !important; }
  .gap-lg-5 {
    gap: 3rem !important; }
  .gap-lg-6 {
    gap: 5rem !important; }
  .gap-lg-7 {
    gap: 8rem !important; }
  .gap-lg-8 {
    gap: 10rem !important; }
  .gap-lg-9 {
    gap: 11rem !important; }
  .gap-lg-10 {
    gap: 14rem !important; }
  .gap-lg-11 {
    gap: 16rem !important; }
  .gap-lg-12 {
    gap: 20rem !important; }
  .gap-lg-sm {
    gap: 1rem !important; }
  .gap-lg-md {
    gap: 2rem !important; }
  .gap-lg-lg {
    gap: 4rem !important; }
  .gap-lg-xl {
    gap: 8rem !important; }
  .justify-content-lg-start {
    justify-content: flex-start !important; }
  .justify-content-lg-end {
    justify-content: flex-end !important; }
  .justify-content-lg-center {
    justify-content: center !important; }
  .justify-content-lg-between {
    justify-content: space-between !important; }
  .justify-content-lg-around {
    justify-content: space-around !important; }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important; }
  .align-items-lg-start {
    align-items: flex-start !important; }
  .align-items-lg-end {
    align-items: flex-end !important; }
  .align-items-lg-center {
    align-items: center !important; }
  .align-items-lg-baseline {
    align-items: baseline !important; }
  .align-items-lg-stretch {
    align-items: stretch !important; }
  .align-content-lg-start {
    align-content: flex-start !important; }
  .align-content-lg-end {
    align-content: flex-end !important; }
  .align-content-lg-center {
    align-content: center !important; }
  .align-content-lg-between {
    align-content: space-between !important; }
  .align-content-lg-around {
    align-content: space-around !important; }
  .align-content-lg-stretch {
    align-content: stretch !important; }
  .align-self-lg-auto {
    align-self: auto !important; }
  .align-self-lg-start {
    align-self: flex-start !important; }
  .align-self-lg-end {
    align-self: flex-end !important; }
  .align-self-lg-center {
    align-self: center !important; }
  .align-self-lg-baseline {
    align-self: baseline !important; }
  .align-self-lg-stretch {
    align-self: stretch !important; }
  .order-lg-first {
    order: -1 !important; }
  .order-lg-0 {
    order: 0 !important; }
  .order-lg-1 {
    order: 1 !important; }
  .order-lg-2 {
    order: 2 !important; }
  .order-lg-3 {
    order: 3 !important; }
  .order-lg-4 {
    order: 4 !important; }
  .order-lg-5 {
    order: 5 !important; }
  .order-lg-last {
    order: 6 !important; }
  .m-lg-0 {
    margin: 0 !important; }
  .m-lg-1 {
    margin: 0.25rem !important; }
  .m-lg-2 {
    margin: 0.5rem !important; }
  .m-lg-3 {
    margin: 1rem !important; }
  .m-lg-4 {
    margin: 1.5rem !important; }
  .m-lg-5 {
    margin: 3rem !important; }
  .m-lg-6 {
    margin: 5rem !important; }
  .m-lg-7 {
    margin: 8rem !important; }
  .m-lg-8 {
    margin: 10rem !important; }
  .m-lg-9 {
    margin: 11rem !important; }
  .m-lg-10 {
    margin: 14rem !important; }
  .m-lg-11 {
    margin: 16rem !important; }
  .m-lg-12 {
    margin: 20rem !important; }
  .m-lg-sm {
    margin: 1rem !important; }
  .m-lg-md {
    margin: 2rem !important; }
  .m-lg-lg {
    margin: 4rem !important; }
  .m-lg-xl {
    margin: 8rem !important; }
  .m-lg-auto {
    margin: auto !important; }
  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important; }
  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important; }
  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important; }
  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important; }
  .mx-lg-6 {
    margin-right: 5rem !important;
    margin-left: 5rem !important; }
  .mx-lg-7 {
    margin-right: 8rem !important;
    margin-left: 8rem !important; }
  .mx-lg-8 {
    margin-right: 10rem !important;
    margin-left: 10rem !important; }
  .mx-lg-9 {
    margin-right: 11rem !important;
    margin-left: 11rem !important; }
  .mx-lg-10 {
    margin-right: 14rem !important;
    margin-left: 14rem !important; }
  .mx-lg-11 {
    margin-right: 16rem !important;
    margin-left: 16rem !important; }
  .mx-lg-12 {
    margin-right: 20rem !important;
    margin-left: 20rem !important; }
  .mx-lg-sm {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-lg-md {
    margin-right: 2rem !important;
    margin-left: 2rem !important; }
  .mx-lg-lg {
    margin-right: 4rem !important;
    margin-left: 4rem !important; }
  .mx-lg-xl {
    margin-right: 8rem !important;
    margin-left: 8rem !important; }
  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important; }
  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important; }
  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important; }
  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important; }
  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important; }
  .my-lg-6 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important; }
  .my-lg-7 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important; }
  .my-lg-8 {
    margin-top: 10rem !important;
    margin-bottom: 10rem !important; }
  .my-lg-9 {
    margin-top: 11rem !important;
    margin-bottom: 11rem !important; }
  .my-lg-10 {
    margin-top: 14rem !important;
    margin-bottom: 14rem !important; }
  .my-lg-11 {
    margin-top: 16rem !important;
    margin-bottom: 16rem !important; }
  .my-lg-12 {
    margin-top: 20rem !important;
    margin-bottom: 20rem !important; }
  .my-lg-sm {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-lg-md {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important; }
  .my-lg-lg {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important; }
  .my-lg-xl {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important; }
  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important; }
  .mt-lg-0 {
    margin-top: 0 !important; }
  .mt-lg-1 {
    margin-top: 0.25rem !important; }
  .mt-lg-2 {
    margin-top: 0.5rem !important; }
  .mt-lg-3 {
    margin-top: 1rem !important; }
  .mt-lg-4 {
    margin-top: 1.5rem !important; }
  .mt-lg-5 {
    margin-top: 3rem !important; }
  .mt-lg-6 {
    margin-top: 5rem !important; }
  .mt-lg-7 {
    margin-top: 8rem !important; }
  .mt-lg-8 {
    margin-top: 10rem !important; }
  .mt-lg-9 {
    margin-top: 11rem !important; }
  .mt-lg-10 {
    margin-top: 14rem !important; }
  .mt-lg-11 {
    margin-top: 16rem !important; }
  .mt-lg-12 {
    margin-top: 20rem !important; }
  .mt-lg-sm {
    margin-top: 1rem !important; }
  .mt-lg-md {
    margin-top: 2rem !important; }
  .mt-lg-lg {
    margin-top: 4rem !important; }
  .mt-lg-xl {
    margin-top: 8rem !important; }
  .mt-lg-auto {
    margin-top: auto !important; }
  .me-lg-0 {
    margin-right: 0 !important; }
  .me-lg-1 {
    margin-right: 0.25rem !important; }
  .me-lg-2 {
    margin-right: 0.5rem !important; }
  .me-lg-3 {
    margin-right: 1rem !important; }
  .me-lg-4 {
    margin-right: 1.5rem !important; }
  .me-lg-5 {
    margin-right: 3rem !important; }
  .me-lg-6 {
    margin-right: 5rem !important; }
  .me-lg-7 {
    margin-right: 8rem !important; }
  .me-lg-8 {
    margin-right: 10rem !important; }
  .me-lg-9 {
    margin-right: 11rem !important; }
  .me-lg-10 {
    margin-right: 14rem !important; }
  .me-lg-11 {
    margin-right: 16rem !important; }
  .me-lg-12 {
    margin-right: 20rem !important; }
  .me-lg-sm {
    margin-right: 1rem !important; }
  .me-lg-md {
    margin-right: 2rem !important; }
  .me-lg-lg {
    margin-right: 4rem !important; }
  .me-lg-xl {
    margin-right: 8rem !important; }
  .me-lg-auto {
    margin-right: auto !important; }
  .mb-lg-0 {
    margin-bottom: 0 !important; }
  .mb-lg-1 {
    margin-bottom: 0.25rem !important; }
  .mb-lg-2 {
    margin-bottom: 0.5rem !important; }
  .mb-lg-3 {
    margin-bottom: 1rem !important; }
  .mb-lg-4 {
    margin-bottom: 1.5rem !important; }
  .mb-lg-5 {
    margin-bottom: 3rem !important; }
  .mb-lg-6 {
    margin-bottom: 5rem !important; }
  .mb-lg-7 {
    margin-bottom: 8rem !important; }
  .mb-lg-8 {
    margin-bottom: 10rem !important; }
  .mb-lg-9 {
    margin-bottom: 11rem !important; }
  .mb-lg-10 {
    margin-bottom: 14rem !important; }
  .mb-lg-11 {
    margin-bottom: 16rem !important; }
  .mb-lg-12 {
    margin-bottom: 20rem !important; }
  .mb-lg-sm {
    margin-bottom: 1rem !important; }
  .mb-lg-md {
    margin-bottom: 2rem !important; }
  .mb-lg-lg {
    margin-bottom: 4rem !important; }
  .mb-lg-xl {
    margin-bottom: 8rem !important; }
  .mb-lg-auto {
    margin-bottom: auto !important; }
  .ms-lg-0 {
    margin-left: 0 !important; }
  .ms-lg-1 {
    margin-left: 0.25rem !important; }
  .ms-lg-2 {
    margin-left: 0.5rem !important; }
  .ms-lg-3 {
    margin-left: 1rem !important; }
  .ms-lg-4 {
    margin-left: 1.5rem !important; }
  .ms-lg-5 {
    margin-left: 3rem !important; }
  .ms-lg-6 {
    margin-left: 5rem !important; }
  .ms-lg-7 {
    margin-left: 8rem !important; }
  .ms-lg-8 {
    margin-left: 10rem !important; }
  .ms-lg-9 {
    margin-left: 11rem !important; }
  .ms-lg-10 {
    margin-left: 14rem !important; }
  .ms-lg-11 {
    margin-left: 16rem !important; }
  .ms-lg-12 {
    margin-left: 20rem !important; }
  .ms-lg-sm {
    margin-left: 1rem !important; }
  .ms-lg-md {
    margin-left: 2rem !important; }
  .ms-lg-lg {
    margin-left: 4rem !important; }
  .ms-lg-xl {
    margin-left: 8rem !important; }
  .ms-lg-auto {
    margin-left: auto !important; }
  .m-lg-n1 {
    margin: -0.25rem !important; }
  .m-lg-n2 {
    margin: -0.5rem !important; }
  .m-lg-n3 {
    margin: -1rem !important; }
  .m-lg-n4 {
    margin: -1.5rem !important; }
  .m-lg-n5 {
    margin: -3rem !important; }
  .m-lg-n6 {
    margin: -5rem !important; }
  .m-lg-n7 {
    margin: -8rem !important; }
  .m-lg-n8 {
    margin: -10rem !important; }
  .m-lg-n9 {
    margin: -11rem !important; }
  .m-lg-n10 {
    margin: -14rem !important; }
  .m-lg-n11 {
    margin: -16rem !important; }
  .m-lg-n12 {
    margin: -20rem !important; }
  .m-lg-nsm {
    margin: -1rem !important; }
  .m-lg-nmd {
    margin: -2rem !important; }
  .m-lg-nlg {
    margin: -4rem !important; }
  .m-lg-nxl {
    margin: -8rem !important; }
  .p-lg-0 {
    padding: 0 !important; }
  .p-lg-1 {
    padding: 0.25rem !important; }
  .p-lg-2 {
    padding: 0.5rem !important; }
  .p-lg-3 {
    padding: 1rem !important; }
  .p-lg-4 {
    padding: 1.5rem !important; }
  .p-lg-5 {
    padding: 3rem !important; }
  .p-lg-6 {
    padding: 5rem !important; }
  .p-lg-7 {
    padding: 8rem !important; }
  .p-lg-8 {
    padding: 10rem !important; }
  .p-lg-9 {
    padding: 11rem !important; }
  .p-lg-10 {
    padding: 14rem !important; }
  .p-lg-11 {
    padding: 16rem !important; }
  .p-lg-12 {
    padding: 20rem !important; }
  .p-lg-sm {
    padding: 1rem !important; }
  .p-lg-md {
    padding: 2rem !important; }
  .p-lg-lg {
    padding: 4rem !important; }
  .p-lg-xl {
    padding: 8rem !important; }
  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important; }
  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important; }
  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important; }
  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important; }
  .px-lg-6 {
    padding-right: 5rem !important;
    padding-left: 5rem !important; }
  .px-lg-7 {
    padding-right: 8rem !important;
    padding-left: 8rem !important; }
  .px-lg-8 {
    padding-right: 10rem !important;
    padding-left: 10rem !important; }
  .px-lg-9 {
    padding-right: 11rem !important;
    padding-left: 11rem !important; }
  .px-lg-10 {
    padding-right: 14rem !important;
    padding-left: 14rem !important; }
  .px-lg-11 {
    padding-right: 16rem !important;
    padding-left: 16rem !important; }
  .px-lg-12 {
    padding-right: 20rem !important;
    padding-left: 20rem !important; }
  .px-lg-sm {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-lg-md {
    padding-right: 2rem !important;
    padding-left: 2rem !important; }
  .px-lg-lg {
    padding-right: 4rem !important;
    padding-left: 4rem !important; }
  .px-lg-xl {
    padding-right: 8rem !important;
    padding-left: 8rem !important; }
  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important; }
  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important; }
  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important; }
  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; }
  .py-lg-6 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important; }
  .py-lg-7 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important; }
  .py-lg-8 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important; }
  .py-lg-9 {
    padding-top: 11rem !important;
    padding-bottom: 11rem !important; }
  .py-lg-10 {
    padding-top: 14rem !important;
    padding-bottom: 14rem !important; }
  .py-lg-11 {
    padding-top: 16rem !important;
    padding-bottom: 16rem !important; }
  .py-lg-12 {
    padding-top: 20rem !important;
    padding-bottom: 20rem !important; }
  .py-lg-sm {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-lg-md {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important; }
  .py-lg-lg {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important; }
  .py-lg-xl {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important; }
  .pt-lg-0 {
    padding-top: 0 !important; }
  .pt-lg-1 {
    padding-top: 0.25rem !important; }
  .pt-lg-2 {
    padding-top: 0.5rem !important; }
  .pt-lg-3 {
    padding-top: 1rem !important; }
  .pt-lg-4 {
    padding-top: 1.5rem !important; }
  .pt-lg-5 {
    padding-top: 3rem !important; }
  .pt-lg-6 {
    padding-top: 5rem !important; }
  .pt-lg-7 {
    padding-top: 8rem !important; }
  .pt-lg-8 {
    padding-top: 10rem !important; }
  .pt-lg-9 {
    padding-top: 11rem !important; }
  .pt-lg-10 {
    padding-top: 14rem !important; }
  .pt-lg-11 {
    padding-top: 16rem !important; }
  .pt-lg-12 {
    padding-top: 20rem !important; }
  .pt-lg-sm {
    padding-top: 1rem !important; }
  .pt-lg-md {
    padding-top: 2rem !important; }
  .pt-lg-lg {
    padding-top: 4rem !important; }
  .pt-lg-xl {
    padding-top: 8rem !important; }
  .pe-lg-0 {
    padding-right: 0 !important; }
  .pe-lg-1 {
    padding-right: 0.25rem !important; }
  .pe-lg-2 {
    padding-right: 0.5rem !important; }
  .pe-lg-3 {
    padding-right: 1rem !important; }
  .pe-lg-4 {
    padding-right: 1.5rem !important; }
  .pe-lg-5 {
    padding-right: 3rem !important; }
  .pe-lg-6 {
    padding-right: 5rem !important; }
  .pe-lg-7 {
    padding-right: 8rem !important; }
  .pe-lg-8 {
    padding-right: 10rem !important; }
  .pe-lg-9 {
    padding-right: 11rem !important; }
  .pe-lg-10 {
    padding-right: 14rem !important; }
  .pe-lg-11 {
    padding-right: 16rem !important; }
  .pe-lg-12 {
    padding-right: 20rem !important; }
  .pe-lg-sm {
    padding-right: 1rem !important; }
  .pe-lg-md {
    padding-right: 2rem !important; }
  .pe-lg-lg {
    padding-right: 4rem !important; }
  .pe-lg-xl {
    padding-right: 8rem !important; }
  .pb-lg-0 {
    padding-bottom: 0 !important; }
  .pb-lg-1 {
    padding-bottom: 0.25rem !important; }
  .pb-lg-2 {
    padding-bottom: 0.5rem !important; }
  .pb-lg-3 {
    padding-bottom: 1rem !important; }
  .pb-lg-4 {
    padding-bottom: 1.5rem !important; }
  .pb-lg-5 {
    padding-bottom: 3rem !important; }
  .pb-lg-6 {
    padding-bottom: 5rem !important; }
  .pb-lg-7 {
    padding-bottom: 8rem !important; }
  .pb-lg-8 {
    padding-bottom: 10rem !important; }
  .pb-lg-9 {
    padding-bottom: 11rem !important; }
  .pb-lg-10 {
    padding-bottom: 14rem !important; }
  .pb-lg-11 {
    padding-bottom: 16rem !important; }
  .pb-lg-12 {
    padding-bottom: 20rem !important; }
  .pb-lg-sm {
    padding-bottom: 1rem !important; }
  .pb-lg-md {
    padding-bottom: 2rem !important; }
  .pb-lg-lg {
    padding-bottom: 4rem !important; }
  .pb-lg-xl {
    padding-bottom: 8rem !important; }
  .ps-lg-0 {
    padding-left: 0 !important; }
  .ps-lg-1 {
    padding-left: 0.25rem !important; }
  .ps-lg-2 {
    padding-left: 0.5rem !important; }
  .ps-lg-3 {
    padding-left: 1rem !important; }
  .ps-lg-4 {
    padding-left: 1.5rem !important; }
  .ps-lg-5 {
    padding-left: 3rem !important; }
  .ps-lg-6 {
    padding-left: 5rem !important; }
  .ps-lg-7 {
    padding-left: 8rem !important; }
  .ps-lg-8 {
    padding-left: 10rem !important; }
  .ps-lg-9 {
    padding-left: 11rem !important; }
  .ps-lg-10 {
    padding-left: 14rem !important; }
  .ps-lg-11 {
    padding-left: 16rem !important; }
  .ps-lg-12 {
    padding-left: 20rem !important; }
  .ps-lg-sm {
    padding-left: 1rem !important; }
  .ps-lg-md {
    padding-left: 2rem !important; }
  .ps-lg-lg {
    padding-left: 4rem !important; }
  .ps-lg-xl {
    padding-left: 8rem !important; }
  .text-lg-start {
    text-align: left !important; }
  .text-lg-end {
    text-align: right !important; }
  .text-lg-center {
    text-align: center !important; } }

@media (min-width: 1200px) {
  .float-xl-start {
    float: left !important; }
  .float-xl-end {
    float: right !important; }
  .float-xl-none {
    float: none !important; }
  .d-xl-inline {
    display: inline !important; }
  .d-xl-inline-block {
    display: inline-block !important; }
  .d-xl-block {
    display: block !important; }
  .d-xl-grid {
    display: grid !important; }
  .d-xl-table {
    display: table !important; }
  .d-xl-table-row {
    display: table-row !important; }
  .d-xl-table-cell {
    display: table-cell !important; }
  .d-xl-flex {
    display: flex !important; }
  .d-xl-inline-flex {
    display: inline-flex !important; }
  .d-xl-none {
    display: none !important; }
  .vh-xl-100 {
    height: 100vh !important; }
  .flex-xl-fill {
    flex: 1 1 auto !important; }
  .flex-xl-row {
    flex-direction: row !important; }
  .flex-xl-column {
    flex-direction: column !important; }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-xl-grow-0 {
    flex-grow: 0 !important; }
  .flex-xl-grow-1 {
    flex-grow: 1 !important; }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important; }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important; }
  .flex-xl-wrap {
    flex-wrap: wrap !important; }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important; }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .gap-xl-0 {
    gap: 0 !important; }
  .gap-xl-1 {
    gap: 0.25rem !important; }
  .gap-xl-2 {
    gap: 0.5rem !important; }
  .gap-xl-3 {
    gap: 1rem !important; }
  .gap-xl-4 {
    gap: 1.5rem !important; }
  .gap-xl-5 {
    gap: 3rem !important; }
  .gap-xl-6 {
    gap: 5rem !important; }
  .gap-xl-7 {
    gap: 8rem !important; }
  .gap-xl-8 {
    gap: 10rem !important; }
  .gap-xl-9 {
    gap: 11rem !important; }
  .gap-xl-10 {
    gap: 14rem !important; }
  .gap-xl-11 {
    gap: 16rem !important; }
  .gap-xl-12 {
    gap: 20rem !important; }
  .gap-xl-sm {
    gap: 1rem !important; }
  .gap-xl-md {
    gap: 2rem !important; }
  .gap-xl-lg {
    gap: 4rem !important; }
  .gap-xl-xl {
    gap: 8rem !important; }
  .justify-content-xl-start {
    justify-content: flex-start !important; }
  .justify-content-xl-end {
    justify-content: flex-end !important; }
  .justify-content-xl-center {
    justify-content: center !important; }
  .justify-content-xl-between {
    justify-content: space-between !important; }
  .justify-content-xl-around {
    justify-content: space-around !important; }
  .justify-content-xl-evenly {
    justify-content: space-evenly !important; }
  .align-items-xl-start {
    align-items: flex-start !important; }
  .align-items-xl-end {
    align-items: flex-end !important; }
  .align-items-xl-center {
    align-items: center !important; }
  .align-items-xl-baseline {
    align-items: baseline !important; }
  .align-items-xl-stretch {
    align-items: stretch !important; }
  .align-content-xl-start {
    align-content: flex-start !important; }
  .align-content-xl-end {
    align-content: flex-end !important; }
  .align-content-xl-center {
    align-content: center !important; }
  .align-content-xl-between {
    align-content: space-between !important; }
  .align-content-xl-around {
    align-content: space-around !important; }
  .align-content-xl-stretch {
    align-content: stretch !important; }
  .align-self-xl-auto {
    align-self: auto !important; }
  .align-self-xl-start {
    align-self: flex-start !important; }
  .align-self-xl-end {
    align-self: flex-end !important; }
  .align-self-xl-center {
    align-self: center !important; }
  .align-self-xl-baseline {
    align-self: baseline !important; }
  .align-self-xl-stretch {
    align-self: stretch !important; }
  .order-xl-first {
    order: -1 !important; }
  .order-xl-0 {
    order: 0 !important; }
  .order-xl-1 {
    order: 1 !important; }
  .order-xl-2 {
    order: 2 !important; }
  .order-xl-3 {
    order: 3 !important; }
  .order-xl-4 {
    order: 4 !important; }
  .order-xl-5 {
    order: 5 !important; }
  .order-xl-last {
    order: 6 !important; }
  .m-xl-0 {
    margin: 0 !important; }
  .m-xl-1 {
    margin: 0.25rem !important; }
  .m-xl-2 {
    margin: 0.5rem !important; }
  .m-xl-3 {
    margin: 1rem !important; }
  .m-xl-4 {
    margin: 1.5rem !important; }
  .m-xl-5 {
    margin: 3rem !important; }
  .m-xl-6 {
    margin: 5rem !important; }
  .m-xl-7 {
    margin: 8rem !important; }
  .m-xl-8 {
    margin: 10rem !important; }
  .m-xl-9 {
    margin: 11rem !important; }
  .m-xl-10 {
    margin: 14rem !important; }
  .m-xl-11 {
    margin: 16rem !important; }
  .m-xl-12 {
    margin: 20rem !important; }
  .m-xl-sm {
    margin: 1rem !important; }
  .m-xl-md {
    margin: 2rem !important; }
  .m-xl-lg {
    margin: 4rem !important; }
  .m-xl-xl {
    margin: 8rem !important; }
  .m-xl-auto {
    margin: auto !important; }
  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important; }
  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important; }
  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important; }
  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important; }
  .mx-xl-6 {
    margin-right: 5rem !important;
    margin-left: 5rem !important; }
  .mx-xl-7 {
    margin-right: 8rem !important;
    margin-left: 8rem !important; }
  .mx-xl-8 {
    margin-right: 10rem !important;
    margin-left: 10rem !important; }
  .mx-xl-9 {
    margin-right: 11rem !important;
    margin-left: 11rem !important; }
  .mx-xl-10 {
    margin-right: 14rem !important;
    margin-left: 14rem !important; }
  .mx-xl-11 {
    margin-right: 16rem !important;
    margin-left: 16rem !important; }
  .mx-xl-12 {
    margin-right: 20rem !important;
    margin-left: 20rem !important; }
  .mx-xl-sm {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-xl-md {
    margin-right: 2rem !important;
    margin-left: 2rem !important; }
  .mx-xl-lg {
    margin-right: 4rem !important;
    margin-left: 4rem !important; }
  .mx-xl-xl {
    margin-right: 8rem !important;
    margin-left: 8rem !important; }
  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important; }
  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important; }
  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important; }
  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important; }
  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important; }
  .my-xl-6 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important; }
  .my-xl-7 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important; }
  .my-xl-8 {
    margin-top: 10rem !important;
    margin-bottom: 10rem !important; }
  .my-xl-9 {
    margin-top: 11rem !important;
    margin-bottom: 11rem !important; }
  .my-xl-10 {
    margin-top: 14rem !important;
    margin-bottom: 14rem !important; }
  .my-xl-11 {
    margin-top: 16rem !important;
    margin-bottom: 16rem !important; }
  .my-xl-12 {
    margin-top: 20rem !important;
    margin-bottom: 20rem !important; }
  .my-xl-sm {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-xl-md {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important; }
  .my-xl-lg {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important; }
  .my-xl-xl {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important; }
  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important; }
  .mt-xl-0 {
    margin-top: 0 !important; }
  .mt-xl-1 {
    margin-top: 0.25rem !important; }
  .mt-xl-2 {
    margin-top: 0.5rem !important; }
  .mt-xl-3 {
    margin-top: 1rem !important; }
  .mt-xl-4 {
    margin-top: 1.5rem !important; }
  .mt-xl-5 {
    margin-top: 3rem !important; }
  .mt-xl-6 {
    margin-top: 5rem !important; }
  .mt-xl-7 {
    margin-top: 8rem !important; }
  .mt-xl-8 {
    margin-top: 10rem !important; }
  .mt-xl-9 {
    margin-top: 11rem !important; }
  .mt-xl-10 {
    margin-top: 14rem !important; }
  .mt-xl-11 {
    margin-top: 16rem !important; }
  .mt-xl-12 {
    margin-top: 20rem !important; }
  .mt-xl-sm {
    margin-top: 1rem !important; }
  .mt-xl-md {
    margin-top: 2rem !important; }
  .mt-xl-lg {
    margin-top: 4rem !important; }
  .mt-xl-xl {
    margin-top: 8rem !important; }
  .mt-xl-auto {
    margin-top: auto !important; }
  .me-xl-0 {
    margin-right: 0 !important; }
  .me-xl-1 {
    margin-right: 0.25rem !important; }
  .me-xl-2 {
    margin-right: 0.5rem !important; }
  .me-xl-3 {
    margin-right: 1rem !important; }
  .me-xl-4 {
    margin-right: 1.5rem !important; }
  .me-xl-5 {
    margin-right: 3rem !important; }
  .me-xl-6 {
    margin-right: 5rem !important; }
  .me-xl-7 {
    margin-right: 8rem !important; }
  .me-xl-8 {
    margin-right: 10rem !important; }
  .me-xl-9 {
    margin-right: 11rem !important; }
  .me-xl-10 {
    margin-right: 14rem !important; }
  .me-xl-11 {
    margin-right: 16rem !important; }
  .me-xl-12 {
    margin-right: 20rem !important; }
  .me-xl-sm {
    margin-right: 1rem !important; }
  .me-xl-md {
    margin-right: 2rem !important; }
  .me-xl-lg {
    margin-right: 4rem !important; }
  .me-xl-xl {
    margin-right: 8rem !important; }
  .me-xl-auto {
    margin-right: auto !important; }
  .mb-xl-0 {
    margin-bottom: 0 !important; }
  .mb-xl-1 {
    margin-bottom: 0.25rem !important; }
  .mb-xl-2 {
    margin-bottom: 0.5rem !important; }
  .mb-xl-3 {
    margin-bottom: 1rem !important; }
  .mb-xl-4 {
    margin-bottom: 1.5rem !important; }
  .mb-xl-5 {
    margin-bottom: 3rem !important; }
  .mb-xl-6 {
    margin-bottom: 5rem !important; }
  .mb-xl-7 {
    margin-bottom: 8rem !important; }
  .mb-xl-8 {
    margin-bottom: 10rem !important; }
  .mb-xl-9 {
    margin-bottom: 11rem !important; }
  .mb-xl-10 {
    margin-bottom: 14rem !important; }
  .mb-xl-11 {
    margin-bottom: 16rem !important; }
  .mb-xl-12 {
    margin-bottom: 20rem !important; }
  .mb-xl-sm {
    margin-bottom: 1rem !important; }
  .mb-xl-md {
    margin-bottom: 2rem !important; }
  .mb-xl-lg {
    margin-bottom: 4rem !important; }
  .mb-xl-xl {
    margin-bottom: 8rem !important; }
  .mb-xl-auto {
    margin-bottom: auto !important; }
  .ms-xl-0 {
    margin-left: 0 !important; }
  .ms-xl-1 {
    margin-left: 0.25rem !important; }
  .ms-xl-2 {
    margin-left: 0.5rem !important; }
  .ms-xl-3 {
    margin-left: 1rem !important; }
  .ms-xl-4 {
    margin-left: 1.5rem !important; }
  .ms-xl-5 {
    margin-left: 3rem !important; }
  .ms-xl-6 {
    margin-left: 5rem !important; }
  .ms-xl-7 {
    margin-left: 8rem !important; }
  .ms-xl-8 {
    margin-left: 10rem !important; }
  .ms-xl-9 {
    margin-left: 11rem !important; }
  .ms-xl-10 {
    margin-left: 14rem !important; }
  .ms-xl-11 {
    margin-left: 16rem !important; }
  .ms-xl-12 {
    margin-left: 20rem !important; }
  .ms-xl-sm {
    margin-left: 1rem !important; }
  .ms-xl-md {
    margin-left: 2rem !important; }
  .ms-xl-lg {
    margin-left: 4rem !important; }
  .ms-xl-xl {
    margin-left: 8rem !important; }
  .ms-xl-auto {
    margin-left: auto !important; }
  .p-xl-0 {
    padding: 0 !important; }
  .p-xl-1 {
    padding: 0.25rem !important; }
  .p-xl-2 {
    padding: 0.5rem !important; }
  .p-xl-3 {
    padding: 1rem !important; }
  .p-xl-4 {
    padding: 1.5rem !important; }
  .p-xl-5 {
    padding: 3rem !important; }
  .p-xl-6 {
    padding: 5rem !important; }
  .p-xl-7 {
    padding: 8rem !important; }
  .p-xl-8 {
    padding: 10rem !important; }
  .p-xl-9 {
    padding: 11rem !important; }
  .p-xl-10 {
    padding: 14rem !important; }
  .p-xl-11 {
    padding: 16rem !important; }
  .p-xl-12 {
    padding: 20rem !important; }
  .p-xl-sm {
    padding: 1rem !important; }
  .p-xl-md {
    padding: 2rem !important; }
  .p-xl-lg {
    padding: 4rem !important; }
  .p-xl-xl {
    padding: 8rem !important; }
  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important; }
  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important; }
  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important; }
  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important; }
  .px-xl-6 {
    padding-right: 5rem !important;
    padding-left: 5rem !important; }
  .px-xl-7 {
    padding-right: 8rem !important;
    padding-left: 8rem !important; }
  .px-xl-8 {
    padding-right: 10rem !important;
    padding-left: 10rem !important; }
  .px-xl-9 {
    padding-right: 11rem !important;
    padding-left: 11rem !important; }
  .px-xl-10 {
    padding-right: 14rem !important;
    padding-left: 14rem !important; }
  .px-xl-11 {
    padding-right: 16rem !important;
    padding-left: 16rem !important; }
  .px-xl-12 {
    padding-right: 20rem !important;
    padding-left: 20rem !important; }
  .px-xl-sm {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-xl-md {
    padding-right: 2rem !important;
    padding-left: 2rem !important; }
  .px-xl-lg {
    padding-right: 4rem !important;
    padding-left: 4rem !important; }
  .px-xl-xl {
    padding-right: 8rem !important;
    padding-left: 8rem !important; }
  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important; }
  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important; }
  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important; }
  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; }
  .py-xl-6 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important; }
  .py-xl-7 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important; }
  .py-xl-8 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important; }
  .py-xl-9 {
    padding-top: 11rem !important;
    padding-bottom: 11rem !important; }
  .py-xl-10 {
    padding-top: 14rem !important;
    padding-bottom: 14rem !important; }
  .py-xl-11 {
    padding-top: 16rem !important;
    padding-bottom: 16rem !important; }
  .py-xl-12 {
    padding-top: 20rem !important;
    padding-bottom: 20rem !important; }
  .py-xl-sm {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-xl-md {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important; }
  .py-xl-lg {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important; }
  .py-xl-xl {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important; }
  .pt-xl-0 {
    padding-top: 0 !important; }
  .pt-xl-1 {
    padding-top: 0.25rem !important; }
  .pt-xl-2 {
    padding-top: 0.5rem !important; }
  .pt-xl-3 {
    padding-top: 1rem !important; }
  .pt-xl-4 {
    padding-top: 1.5rem !important; }
  .pt-xl-5 {
    padding-top: 3rem !important; }
  .pt-xl-6 {
    padding-top: 5rem !important; }
  .pt-xl-7 {
    padding-top: 8rem !important; }
  .pt-xl-8 {
    padding-top: 10rem !important; }
  .pt-xl-9 {
    padding-top: 11rem !important; }
  .pt-xl-10 {
    padding-top: 14rem !important; }
  .pt-xl-11 {
    padding-top: 16rem !important; }
  .pt-xl-12 {
    padding-top: 20rem !important; }
  .pt-xl-sm {
    padding-top: 1rem !important; }
  .pt-xl-md {
    padding-top: 2rem !important; }
  .pt-xl-lg {
    padding-top: 4rem !important; }
  .pt-xl-xl {
    padding-top: 8rem !important; }
  .pe-xl-0 {
    padding-right: 0 !important; }
  .pe-xl-1 {
    padding-right: 0.25rem !important; }
  .pe-xl-2 {
    padding-right: 0.5rem !important; }
  .pe-xl-3 {
    padding-right: 1rem !important; }
  .pe-xl-4 {
    padding-right: 1.5rem !important; }
  .pe-xl-5 {
    padding-right: 3rem !important; }
  .pe-xl-6 {
    padding-right: 5rem !important; }
  .pe-xl-7 {
    padding-right: 8rem !important; }
  .pe-xl-8 {
    padding-right: 10rem !important; }
  .pe-xl-9 {
    padding-right: 11rem !important; }
  .pe-xl-10 {
    padding-right: 14rem !important; }
  .pe-xl-11 {
    padding-right: 16rem !important; }
  .pe-xl-12 {
    padding-right: 20rem !important; }
  .pe-xl-sm {
    padding-right: 1rem !important; }
  .pe-xl-md {
    padding-right: 2rem !important; }
  .pe-xl-lg {
    padding-right: 4rem !important; }
  .pe-xl-xl {
    padding-right: 8rem !important; }
  .pb-xl-0 {
    padding-bottom: 0 !important; }
  .pb-xl-1 {
    padding-bottom: 0.25rem !important; }
  .pb-xl-2 {
    padding-bottom: 0.5rem !important; }
  .pb-xl-3 {
    padding-bottom: 1rem !important; }
  .pb-xl-4 {
    padding-bottom: 1.5rem !important; }
  .pb-xl-5 {
    padding-bottom: 3rem !important; }
  .pb-xl-6 {
    padding-bottom: 5rem !important; }
  .pb-xl-7 {
    padding-bottom: 8rem !important; }
  .pb-xl-8 {
    padding-bottom: 10rem !important; }
  .pb-xl-9 {
    padding-bottom: 11rem !important; }
  .pb-xl-10 {
    padding-bottom: 14rem !important; }
  .pb-xl-11 {
    padding-bottom: 16rem !important; }
  .pb-xl-12 {
    padding-bottom: 20rem !important; }
  .pb-xl-sm {
    padding-bottom: 1rem !important; }
  .pb-xl-md {
    padding-bottom: 2rem !important; }
  .pb-xl-lg {
    padding-bottom: 4rem !important; }
  .pb-xl-xl {
    padding-bottom: 8rem !important; }
  .ps-xl-0 {
    padding-left: 0 !important; }
  .ps-xl-1 {
    padding-left: 0.25rem !important; }
  .ps-xl-2 {
    padding-left: 0.5rem !important; }
  .ps-xl-3 {
    padding-left: 1rem !important; }
  .ps-xl-4 {
    padding-left: 1.5rem !important; }
  .ps-xl-5 {
    padding-left: 3rem !important; }
  .ps-xl-6 {
    padding-left: 5rem !important; }
  .ps-xl-7 {
    padding-left: 8rem !important; }
  .ps-xl-8 {
    padding-left: 10rem !important; }
  .ps-xl-9 {
    padding-left: 11rem !important; }
  .ps-xl-10 {
    padding-left: 14rem !important; }
  .ps-xl-11 {
    padding-left: 16rem !important; }
  .ps-xl-12 {
    padding-left: 20rem !important; }
  .ps-xl-sm {
    padding-left: 1rem !important; }
  .ps-xl-md {
    padding-left: 2rem !important; }
  .ps-xl-lg {
    padding-left: 4rem !important; }
  .ps-xl-xl {
    padding-left: 8rem !important; }
  .text-xl-start {
    text-align: left !important; }
  .text-xl-end {
    text-align: right !important; }
  .text-xl-center {
    text-align: center !important; } }

@media (min-width: 1400px) {
  .float-xxl-start {
    float: left !important; }
  .float-xxl-end {
    float: right !important; }
  .float-xxl-none {
    float: none !important; }
  .d-xxl-inline {
    display: inline !important; }
  .d-xxl-inline-block {
    display: inline-block !important; }
  .d-xxl-block {
    display: block !important; }
  .d-xxl-grid {
    display: grid !important; }
  .d-xxl-table {
    display: table !important; }
  .d-xxl-table-row {
    display: table-row !important; }
  .d-xxl-table-cell {
    display: table-cell !important; }
  .d-xxl-flex {
    display: flex !important; }
  .d-xxl-inline-flex {
    display: inline-flex !important; }
  .d-xxl-none {
    display: none !important; }
  .vh-xxl-100 {
    height: 100vh !important; }
  .flex-xxl-fill {
    flex: 1 1 auto !important; }
  .flex-xxl-row {
    flex-direction: row !important; }
  .flex-xxl-column {
    flex-direction: column !important; }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important; }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important; }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important; }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important; }
  .flex-xxl-wrap {
    flex-wrap: wrap !important; }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important; }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .gap-xxl-0 {
    gap: 0 !important; }
  .gap-xxl-1 {
    gap: 0.25rem !important; }
  .gap-xxl-2 {
    gap: 0.5rem !important; }
  .gap-xxl-3 {
    gap: 1rem !important; }
  .gap-xxl-4 {
    gap: 1.5rem !important; }
  .gap-xxl-5 {
    gap: 3rem !important; }
  .gap-xxl-6 {
    gap: 5rem !important; }
  .gap-xxl-7 {
    gap: 8rem !important; }
  .gap-xxl-8 {
    gap: 10rem !important; }
  .gap-xxl-9 {
    gap: 11rem !important; }
  .gap-xxl-10 {
    gap: 14rem !important; }
  .gap-xxl-11 {
    gap: 16rem !important; }
  .gap-xxl-12 {
    gap: 20rem !important; }
  .gap-xxl-sm {
    gap: 1rem !important; }
  .gap-xxl-md {
    gap: 2rem !important; }
  .gap-xxl-lg {
    gap: 4rem !important; }
  .gap-xxl-xl {
    gap: 8rem !important; }
  .justify-content-xxl-start {
    justify-content: flex-start !important; }
  .justify-content-xxl-end {
    justify-content: flex-end !important; }
  .justify-content-xxl-center {
    justify-content: center !important; }
  .justify-content-xxl-between {
    justify-content: space-between !important; }
  .justify-content-xxl-around {
    justify-content: space-around !important; }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important; }
  .align-items-xxl-start {
    align-items: flex-start !important; }
  .align-items-xxl-end {
    align-items: flex-end !important; }
  .align-items-xxl-center {
    align-items: center !important; }
  .align-items-xxl-baseline {
    align-items: baseline !important; }
  .align-items-xxl-stretch {
    align-items: stretch !important; }
  .align-content-xxl-start {
    align-content: flex-start !important; }
  .align-content-xxl-end {
    align-content: flex-end !important; }
  .align-content-xxl-center {
    align-content: center !important; }
  .align-content-xxl-between {
    align-content: space-between !important; }
  .align-content-xxl-around {
    align-content: space-around !important; }
  .align-content-xxl-stretch {
    align-content: stretch !important; }
  .align-self-xxl-auto {
    align-self: auto !important; }
  .align-self-xxl-start {
    align-self: flex-start !important; }
  .align-self-xxl-end {
    align-self: flex-end !important; }
  .align-self-xxl-center {
    align-self: center !important; }
  .align-self-xxl-baseline {
    align-self: baseline !important; }
  .align-self-xxl-stretch {
    align-self: stretch !important; }
  .order-xxl-first {
    order: -1 !important; }
  .order-xxl-0 {
    order: 0 !important; }
  .order-xxl-1 {
    order: 1 !important; }
  .order-xxl-2 {
    order: 2 !important; }
  .order-xxl-3 {
    order: 3 !important; }
  .order-xxl-4 {
    order: 4 !important; }
  .order-xxl-5 {
    order: 5 !important; }
  .order-xxl-last {
    order: 6 !important; }
  .m-xxl-0 {
    margin: 0 !important; }
  .m-xxl-1 {
    margin: 0.25rem !important; }
  .m-xxl-2 {
    margin: 0.5rem !important; }
  .m-xxl-3 {
    margin: 1rem !important; }
  .m-xxl-4 {
    margin: 1.5rem !important; }
  .m-xxl-5 {
    margin: 3rem !important; }
  .m-xxl-6 {
    margin: 5rem !important; }
  .m-xxl-7 {
    margin: 8rem !important; }
  .m-xxl-8 {
    margin: 10rem !important; }
  .m-xxl-9 {
    margin: 11rem !important; }
  .m-xxl-10 {
    margin: 14rem !important; }
  .m-xxl-11 {
    margin: 16rem !important; }
  .m-xxl-12 {
    margin: 20rem !important; }
  .m-xxl-sm {
    margin: 1rem !important; }
  .m-xxl-md {
    margin: 2rem !important; }
  .m-xxl-lg {
    margin: 4rem !important; }
  .m-xxl-xl {
    margin: 8rem !important; }
  .m-xxl-auto {
    margin: auto !important; }
  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important; }
  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important; }
  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important; }
  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important; }
  .mx-xxl-6 {
    margin-right: 5rem !important;
    margin-left: 5rem !important; }
  .mx-xxl-7 {
    margin-right: 8rem !important;
    margin-left: 8rem !important; }
  .mx-xxl-8 {
    margin-right: 10rem !important;
    margin-left: 10rem !important; }
  .mx-xxl-9 {
    margin-right: 11rem !important;
    margin-left: 11rem !important; }
  .mx-xxl-10 {
    margin-right: 14rem !important;
    margin-left: 14rem !important; }
  .mx-xxl-11 {
    margin-right: 16rem !important;
    margin-left: 16rem !important; }
  .mx-xxl-12 {
    margin-right: 20rem !important;
    margin-left: 20rem !important; }
  .mx-xxl-sm {
    margin-right: 1rem !important;
    margin-left: 1rem !important; }
  .mx-xxl-md {
    margin-right: 2rem !important;
    margin-left: 2rem !important; }
  .mx-xxl-lg {
    margin-right: 4rem !important;
    margin-left: 4rem !important; }
  .mx-xxl-xl {
    margin-right: 8rem !important;
    margin-left: 8rem !important; }
  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important; }
  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important; }
  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important; }
  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important; }
  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important; }
  .my-xxl-6 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important; }
  .my-xxl-7 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important; }
  .my-xxl-8 {
    margin-top: 10rem !important;
    margin-bottom: 10rem !important; }
  .my-xxl-9 {
    margin-top: 11rem !important;
    margin-bottom: 11rem !important; }
  .my-xxl-10 {
    margin-top: 14rem !important;
    margin-bottom: 14rem !important; }
  .my-xxl-11 {
    margin-top: 16rem !important;
    margin-bottom: 16rem !important; }
  .my-xxl-12 {
    margin-top: 20rem !important;
    margin-bottom: 20rem !important; }
  .my-xxl-sm {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }
  .my-xxl-md {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important; }
  .my-xxl-lg {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important; }
  .my-xxl-xl {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important; }
  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important; }
  .mt-xxl-0 {
    margin-top: 0 !important; }
  .mt-xxl-1 {
    margin-top: 0.25rem !important; }
  .mt-xxl-2 {
    margin-top: 0.5rem !important; }
  .mt-xxl-3 {
    margin-top: 1rem !important; }
  .mt-xxl-4 {
    margin-top: 1.5rem !important; }
  .mt-xxl-5 {
    margin-top: 3rem !important; }
  .mt-xxl-6 {
    margin-top: 5rem !important; }
  .mt-xxl-7 {
    margin-top: 8rem !important; }
  .mt-xxl-8 {
    margin-top: 10rem !important; }
  .mt-xxl-9 {
    margin-top: 11rem !important; }
  .mt-xxl-10 {
    margin-top: 14rem !important; }
  .mt-xxl-11 {
    margin-top: 16rem !important; }
  .mt-xxl-12 {
    margin-top: 20rem !important; }
  .mt-xxl-sm {
    margin-top: 1rem !important; }
  .mt-xxl-md {
    margin-top: 2rem !important; }
  .mt-xxl-lg {
    margin-top: 4rem !important; }
  .mt-xxl-xl {
    margin-top: 8rem !important; }
  .mt-xxl-auto {
    margin-top: auto !important; }
  .me-xxl-0 {
    margin-right: 0 !important; }
  .me-xxl-1 {
    margin-right: 0.25rem !important; }
  .me-xxl-2 {
    margin-right: 0.5rem !important; }
  .me-xxl-3 {
    margin-right: 1rem !important; }
  .me-xxl-4 {
    margin-right: 1.5rem !important; }
  .me-xxl-5 {
    margin-right: 3rem !important; }
  .me-xxl-6 {
    margin-right: 5rem !important; }
  .me-xxl-7 {
    margin-right: 8rem !important; }
  .me-xxl-8 {
    margin-right: 10rem !important; }
  .me-xxl-9 {
    margin-right: 11rem !important; }
  .me-xxl-10 {
    margin-right: 14rem !important; }
  .me-xxl-11 {
    margin-right: 16rem !important; }
  .me-xxl-12 {
    margin-right: 20rem !important; }
  .me-xxl-sm {
    margin-right: 1rem !important; }
  .me-xxl-md {
    margin-right: 2rem !important; }
  .me-xxl-lg {
    margin-right: 4rem !important; }
  .me-xxl-xl {
    margin-right: 8rem !important; }
  .me-xxl-auto {
    margin-right: auto !important; }
  .mb-xxl-0 {
    margin-bottom: 0 !important; }
  .mb-xxl-1 {
    margin-bottom: 0.25rem !important; }
  .mb-xxl-2 {
    margin-bottom: 0.5rem !important; }
  .mb-xxl-3 {
    margin-bottom: 1rem !important; }
  .mb-xxl-4 {
    margin-bottom: 1.5rem !important; }
  .mb-xxl-5 {
    margin-bottom: 3rem !important; }
  .mb-xxl-6 {
    margin-bottom: 5rem !important; }
  .mb-xxl-7 {
    margin-bottom: 8rem !important; }
  .mb-xxl-8 {
    margin-bottom: 10rem !important; }
  .mb-xxl-9 {
    margin-bottom: 11rem !important; }
  .mb-xxl-10 {
    margin-bottom: 14rem !important; }
  .mb-xxl-11 {
    margin-bottom: 16rem !important; }
  .mb-xxl-12 {
    margin-bottom: 20rem !important; }
  .mb-xxl-sm {
    margin-bottom: 1rem !important; }
  .mb-xxl-md {
    margin-bottom: 2rem !important; }
  .mb-xxl-lg {
    margin-bottom: 4rem !important; }
  .mb-xxl-xl {
    margin-bottom: 8rem !important; }
  .mb-xxl-auto {
    margin-bottom: auto !important; }
  .ms-xxl-0 {
    margin-left: 0 !important; }
  .ms-xxl-1 {
    margin-left: 0.25rem !important; }
  .ms-xxl-2 {
    margin-left: 0.5rem !important; }
  .ms-xxl-3 {
    margin-left: 1rem !important; }
  .ms-xxl-4 {
    margin-left: 1.5rem !important; }
  .ms-xxl-5 {
    margin-left: 3rem !important; }
  .ms-xxl-6 {
    margin-left: 5rem !important; }
  .ms-xxl-7 {
    margin-left: 8rem !important; }
  .ms-xxl-8 {
    margin-left: 10rem !important; }
  .ms-xxl-9 {
    margin-left: 11rem !important; }
  .ms-xxl-10 {
    margin-left: 14rem !important; }
  .ms-xxl-11 {
    margin-left: 16rem !important; }
  .ms-xxl-12 {
    margin-left: 20rem !important; }
  .ms-xxl-sm {
    margin-left: 1rem !important; }
  .ms-xxl-md {
    margin-left: 2rem !important; }
  .ms-xxl-lg {
    margin-left: 4rem !important; }
  .ms-xxl-xl {
    margin-left: 8rem !important; }
  .ms-xxl-auto {
    margin-left: auto !important; }
  .m-xxl-n1 {
    margin: -0.25rem !important; }
  .m-xxl-n2 {
    margin: -0.5rem !important; }
  .m-xxl-n3 {
    margin: -1rem !important; }
  .m-xxl-n4 {
    margin: -1.5rem !important; }
  .m-xxl-n5 {
    margin: -3rem !important; }
  .m-xxl-n6 {
    margin: -5rem !important; }
  .m-xxl-n7 {
    margin: -8rem !important; }
  .m-xxl-n8 {
    margin: -10rem !important; }
  .m-xxl-n9 {
    margin: -11rem !important; }
  .m-xxl-n10 {
    margin: -14rem !important; }
  .m-xxl-n11 {
    margin: -16rem !important; }
  .m-xxl-n12 {
    margin: -20rem !important; }
  .m-xxl-nsm {
    margin: -1rem !important; }
  .m-xxl-nmd {
    margin: -2rem !important; }
  .m-xxl-nlg {
    margin: -4rem !important; }
  .m-xxl-nxl {
    margin: -8rem !important; }
  .mx-xxl-n1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important; }
  .mx-xxl-n2 {
    margin-right: -0.5rem !important;
    margin-left: -0.5rem !important; }
  .mx-xxl-n3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important; }
  .mx-xxl-n4 {
    margin-right: -1.5rem !important;
    margin-left: -1.5rem !important; }
  .mx-xxl-n5 {
    margin-right: -3rem !important;
    margin-left: -3rem !important; }
  .mx-xxl-n6 {
    margin-right: -5rem !important;
    margin-left: -5rem !important; }
  .mx-xxl-n7 {
    margin-right: -8rem !important;
    margin-left: -8rem !important; }
  .mx-xxl-n8 {
    margin-right: -10rem !important;
    margin-left: -10rem !important; }
  .mx-xxl-n9 {
    margin-right: -11rem !important;
    margin-left: -11rem !important; }
  .mx-xxl-n10 {
    margin-right: -14rem !important;
    margin-left: -14rem !important; }
  .mx-xxl-n11 {
    margin-right: -16rem !important;
    margin-left: -16rem !important; }
  .mx-xxl-n12 {
    margin-right: -20rem !important;
    margin-left: -20rem !important; }
  .mx-xxl-nsm {
    margin-right: -1rem !important;
    margin-left: -1rem !important; }
  .mx-xxl-nmd {
    margin-right: -2rem !important;
    margin-left: -2rem !important; }
  .mx-xxl-nlg {
    margin-right: -4rem !important;
    margin-left: -4rem !important; }
  .mx-xxl-nxl {
    margin-right: -8rem !important;
    margin-left: -8rem !important; }
  .my-xxl-n1 {
    margin-top: -0.25rem !important;
    margin-bottom: -0.25rem !important; }
  .my-xxl-n2 {
    margin-top: -0.5rem !important;
    margin-bottom: -0.5rem !important; }
  .my-xxl-n3 {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important; }
  .my-xxl-n4 {
    margin-top: -1.5rem !important;
    margin-bottom: -1.5rem !important; }
  .my-xxl-n5 {
    margin-top: -3rem !important;
    margin-bottom: -3rem !important; }
  .my-xxl-n6 {
    margin-top: -5rem !important;
    margin-bottom: -5rem !important; }
  .my-xxl-n7 {
    margin-top: -8rem !important;
    margin-bottom: -8rem !important; }
  .my-xxl-n8 {
    margin-top: -10rem !important;
    margin-bottom: -10rem !important; }
  .my-xxl-n9 {
    margin-top: -11rem !important;
    margin-bottom: -11rem !important; }
  .my-xxl-n10 {
    margin-top: -14rem !important;
    margin-bottom: -14rem !important; }
  .my-xxl-n11 {
    margin-top: -16rem !important;
    margin-bottom: -16rem !important; }
  .my-xxl-n12 {
    margin-top: -20rem !important;
    margin-bottom: -20rem !important; }
  .my-xxl-nsm {
    margin-top: -1rem !important;
    margin-bottom: -1rem !important; }
  .my-xxl-nmd {
    margin-top: -2rem !important;
    margin-bottom: -2rem !important; }
  .my-xxl-nlg {
    margin-top: -4rem !important;
    margin-bottom: -4rem !important; }
  .my-xxl-nxl {
    margin-top: -8rem !important;
    margin-bottom: -8rem !important; }
  .mt-xxl-n1 {
    margin-top: -0.25rem !important; }
  .mt-xxl-n2 {
    margin-top: -0.5rem !important; }
  .mt-xxl-n3 {
    margin-top: -1rem !important; }
  .mt-xxl-n4 {
    margin-top: -1.5rem !important; }
  .mt-xxl-n5 {
    margin-top: -3rem !important; }
  .mt-xxl-n6 {
    margin-top: -5rem !important; }
  .mt-xxl-n7 {
    margin-top: -8rem !important; }
  .mt-xxl-n8 {
    margin-top: -10rem !important; }
  .mt-xxl-n9 {
    margin-top: -11rem !important; }
  .mt-xxl-n10 {
    margin-top: -14rem !important; }
  .mt-xxl-n11 {
    margin-top: -16rem !important; }
  .mt-xxl-n12 {
    margin-top: -20rem !important; }
  .mt-xxl-nsm {
    margin-top: -1rem !important; }
  .mt-xxl-nmd {
    margin-top: -2rem !important; }
  .mt-xxl-nlg {
    margin-top: -4rem !important; }
  .mt-xxl-nxl {
    margin-top: -8rem !important; }
  .me-xxl-n1 {
    margin-right: -0.25rem !important; }
  .me-xxl-n2 {
    margin-right: -0.5rem !important; }
  .me-xxl-n3 {
    margin-right: -1rem !important; }
  .me-xxl-n4 {
    margin-right: -1.5rem !important; }
  .me-xxl-n5 {
    margin-right: -3rem !important; }
  .me-xxl-n6 {
    margin-right: -5rem !important; }
  .me-xxl-n7 {
    margin-right: -8rem !important; }
  .me-xxl-n8 {
    margin-right: -10rem !important; }
  .me-xxl-n9 {
    margin-right: -11rem !important; }
  .me-xxl-n10 {
    margin-right: -14rem !important; }
  .me-xxl-n11 {
    margin-right: -16rem !important; }
  .me-xxl-n12 {
    margin-right: -20rem !important; }
  .me-xxl-nsm {
    margin-right: -1rem !important; }
  .me-xxl-nmd {
    margin-right: -2rem !important; }
  .me-xxl-nlg {
    margin-right: -4rem !important; }
  .me-xxl-nxl {
    margin-right: -8rem !important; }
  .mb-xxl-n1 {
    margin-bottom: -0.25rem !important; }
  .mb-xxl-n2 {
    margin-bottom: -0.5rem !important; }
  .mb-xxl-n3 {
    margin-bottom: -1rem !important; }
  .mb-xxl-n4 {
    margin-bottom: -1.5rem !important; }
  .mb-xxl-n5 {
    margin-bottom: -3rem !important; }
  .mb-xxl-n6 {
    margin-bottom: -5rem !important; }
  .mb-xxl-n7 {
    margin-bottom: -8rem !important; }
  .mb-xxl-n8 {
    margin-bottom: -10rem !important; }
  .mb-xxl-n9 {
    margin-bottom: -11rem !important; }
  .mb-xxl-n10 {
    margin-bottom: -14rem !important; }
  .mb-xxl-n11 {
    margin-bottom: -16rem !important; }
  .mb-xxl-n12 {
    margin-bottom: -20rem !important; }
  .mb-xxl-nsm {
    margin-bottom: -1rem !important; }
  .mb-xxl-nmd {
    margin-bottom: -2rem !important; }
  .mb-xxl-nlg {
    margin-bottom: -4rem !important; }
  .mb-xxl-nxl {
    margin-bottom: -8rem !important; }
  .ms-xxl-n1 {
    margin-left: -0.25rem !important; }
  .ms-xxl-n2 {
    margin-left: -0.5rem !important; }
  .ms-xxl-n3 {
    margin-left: -1rem !important; }
  .ms-xxl-n4 {
    margin-left: -1.5rem !important; }
  .ms-xxl-n5 {
    margin-left: -3rem !important; }
  .ms-xxl-n6 {
    margin-left: -5rem !important; }
  .ms-xxl-n7 {
    margin-left: -8rem !important; }
  .ms-xxl-n8 {
    margin-left: -10rem !important; }
  .ms-xxl-n9 {
    margin-left: -11rem !important; }
  .ms-xxl-n10 {
    margin-left: -14rem !important; }
  .ms-xxl-n11 {
    margin-left: -16rem !important; }
  .ms-xxl-n12 {
    margin-left: -20rem !important; }
  .ms-xxl-nsm {
    margin-left: -1rem !important; }
  .ms-xxl-nmd {
    margin-left: -2rem !important; }
  .ms-xxl-nlg {
    margin-left: -4rem !important; }
  .ms-xxl-nxl {
    margin-left: -8rem !important; }
  .p-xxl-0 {
    padding: 0 !important; }
  .p-xxl-1 {
    padding: 0.25rem !important; }
  .p-xxl-2 {
    padding: 0.5rem !important; }
  .p-xxl-3 {
    padding: 1rem !important; }
  .p-xxl-4 {
    padding: 1.5rem !important; }
  .p-xxl-5 {
    padding: 3rem !important; }
  .p-xxl-6 {
    padding: 5rem !important; }
  .p-xxl-7 {
    padding: 8rem !important; }
  .p-xxl-8 {
    padding: 10rem !important; }
  .p-xxl-9 {
    padding: 11rem !important; }
  .p-xxl-10 {
    padding: 14rem !important; }
  .p-xxl-11 {
    padding: 16rem !important; }
  .p-xxl-12 {
    padding: 20rem !important; }
  .p-xxl-sm {
    padding: 1rem !important; }
  .p-xxl-md {
    padding: 2rem !important; }
  .p-xxl-lg {
    padding: 4rem !important; }
  .p-xxl-xl {
    padding: 8rem !important; }
  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important; }
  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important; }
  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important; }
  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important; }
  .px-xxl-6 {
    padding-right: 5rem !important;
    padding-left: 5rem !important; }
  .px-xxl-7 {
    padding-right: 8rem !important;
    padding-left: 8rem !important; }
  .px-xxl-8 {
    padding-right: 10rem !important;
    padding-left: 10rem !important; }
  .px-xxl-9 {
    padding-right: 11rem !important;
    padding-left: 11rem !important; }
  .px-xxl-10 {
    padding-right: 14rem !important;
    padding-left: 14rem !important; }
  .px-xxl-11 {
    padding-right: 16rem !important;
    padding-left: 16rem !important; }
  .px-xxl-12 {
    padding-right: 20rem !important;
    padding-left: 20rem !important; }
  .px-xxl-sm {
    padding-right: 1rem !important;
    padding-left: 1rem !important; }
  .px-xxl-md {
    padding-right: 2rem !important;
    padding-left: 2rem !important; }
  .px-xxl-lg {
    padding-right: 4rem !important;
    padding-left: 4rem !important; }
  .px-xxl-xl {
    padding-right: 8rem !important;
    padding-left: 8rem !important; }
  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important; }
  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important; }
  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important; }
  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important; }
  .py-xxl-6 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important; }
  .py-xxl-7 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important; }
  .py-xxl-8 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important; }
  .py-xxl-9 {
    padding-top: 11rem !important;
    padding-bottom: 11rem !important; }
  .py-xxl-10 {
    padding-top: 14rem !important;
    padding-bottom: 14rem !important; }
  .py-xxl-11 {
    padding-top: 16rem !important;
    padding-bottom: 16rem !important; }
  .py-xxl-12 {
    padding-top: 20rem !important;
    padding-bottom: 20rem !important; }
  .py-xxl-sm {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important; }
  .py-xxl-md {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important; }
  .py-xxl-lg {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important; }
  .py-xxl-xl {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important; }
  .pt-xxl-0 {
    padding-top: 0 !important; }
  .pt-xxl-1 {
    padding-top: 0.25rem !important; }
  .pt-xxl-2 {
    padding-top: 0.5rem !important; }
  .pt-xxl-3 {
    padding-top: 1rem !important; }
  .pt-xxl-4 {
    padding-top: 1.5rem !important; }
  .pt-xxl-5 {
    padding-top: 3rem !important; }
  .pt-xxl-6 {
    padding-top: 5rem !important; }
  .pt-xxl-7 {
    padding-top: 8rem !important; }
  .pt-xxl-8 {
    padding-top: 10rem !important; }
  .pt-xxl-9 {
    padding-top: 11rem !important; }
  .pt-xxl-10 {
    padding-top: 14rem !important; }
  .pt-xxl-11 {
    padding-top: 16rem !important; }
  .pt-xxl-12 {
    padding-top: 20rem !important; }
  .pt-xxl-sm {
    padding-top: 1rem !important; }
  .pt-xxl-md {
    padding-top: 2rem !important; }
  .pt-xxl-lg {
    padding-top: 4rem !important; }
  .pt-xxl-xl {
    padding-top: 8rem !important; }
  .pe-xxl-0 {
    padding-right: 0 !important; }
  .pe-xxl-1 {
    padding-right: 0.25rem !important; }
  .pe-xxl-2 {
    padding-right: 0.5rem !important; }
  .pe-xxl-3 {
    padding-right: 1rem !important; }
  .pe-xxl-4 {
    padding-right: 1.5rem !important; }
  .pe-xxl-5 {
    padding-right: 3rem !important; }
  .pe-xxl-6 {
    padding-right: 5rem !important; }
  .pe-xxl-7 {
    padding-right: 8rem !important; }
  .pe-xxl-8 {
    padding-right: 10rem !important; }
  .pe-xxl-9 {
    padding-right: 11rem !important; }
  .pe-xxl-10 {
    padding-right: 14rem !important; }
  .pe-xxl-11 {
    padding-right: 16rem !important; }
  .pe-xxl-12 {
    padding-right: 20rem !important; }
  .pe-xxl-sm {
    padding-right: 1rem !important; }
  .pe-xxl-md {
    padding-right: 2rem !important; }
  .pe-xxl-lg {
    padding-right: 4rem !important; }
  .pe-xxl-xl {
    padding-right: 8rem !important; }
  .pb-xxl-0 {
    padding-bottom: 0 !important; }
  .pb-xxl-1 {
    padding-bottom: 0.25rem !important; }
  .pb-xxl-2 {
    padding-bottom: 0.5rem !important; }
  .pb-xxl-3 {
    padding-bottom: 1rem !important; }
  .pb-xxl-4 {
    padding-bottom: 1.5rem !important; }
  .pb-xxl-5 {
    padding-bottom: 3rem !important; }
  .pb-xxl-6 {
    padding-bottom: 5rem !important; }
  .pb-xxl-7 {
    padding-bottom: 8rem !important; }
  .pb-xxl-8 {
    padding-bottom: 10rem !important; }
  .pb-xxl-9 {
    padding-bottom: 11rem !important; }
  .pb-xxl-10 {
    padding-bottom: 14rem !important; }
  .pb-xxl-11 {
    padding-bottom: 16rem !important; }
  .pb-xxl-12 {
    padding-bottom: 20rem !important; }
  .pb-xxl-sm {
    padding-bottom: 1rem !important; }
  .pb-xxl-md {
    padding-bottom: 2rem !important; }
  .pb-xxl-lg {
    padding-bottom: 4rem !important; }
  .pb-xxl-xl {
    padding-bottom: 8rem !important; }
  .ps-xxl-0 {
    padding-left: 0 !important; }
  .ps-xxl-1 {
    padding-left: 0.25rem !important; }
  .ps-xxl-2 {
    padding-left: 0.5rem !important; }
  .ps-xxl-3 {
    padding-left: 1rem !important; }
  .ps-xxl-4 {
    padding-left: 1.5rem !important; }
  .ps-xxl-5 {
    padding-left: 3rem !important; }
  .ps-xxl-6 {
    padding-left: 5rem !important; }
  .ps-xxl-7 {
    padding-left: 8rem !important; }
  .ps-xxl-8 {
    padding-left: 10rem !important; }
  .ps-xxl-9 {
    padding-left: 11rem !important; }
  .ps-xxl-10 {
    padding-left: 14rem !important; }
  .ps-xxl-11 {
    padding-left: 16rem !important; }
  .ps-xxl-12 {
    padding-left: 20rem !important; }
  .ps-xxl-sm {
    padding-left: 1rem !important; }
  .ps-xxl-md {
    padding-left: 2rem !important; }
  .ps-xxl-lg {
    padding-left: 4rem !important; }
  .ps-xxl-xl {
    padding-left: 8rem !important; }
  .text-xxl-start {
    text-align: left !important; }
  .text-xxl-end {
    text-align: right !important; }
  .text-xxl-center {
    text-align: center !important; } }

@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem !important; }
  .fs-2 {
    font-size: 2rem !important; }
  .fs-3 {
    font-size: 1.75rem !important; }
  .fs-4 {
    font-size: 1.5rem !important; } }

/**
 * = Navigation bars
 */
.navbar-main {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100; }
  .navbar-main .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.navbar .navbar-nav .nav-link {
  transition: all 0.8s all 0.2s ease; }
  @media (max-width: 767.98px) {
    .navbar .navbar-nav .nav-link {
      font-size: 1.2rem;
      display: flex;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-pack: space-between;
      -moz-align-items: center;
      -ms-align-items: center;
      align-items: center; } }

.navbar .navbar-nav .nav-item .media:not(:last-child) {
  margin-bottom: 1.5rem; }

.navbar .navbar-nav .nav-item:focus,
.navbar .navbar-nav .nav-item .nav-link:focus {
  outline: none !important; }

.navbar .navbar-nav .dropdown .dropdown-menu {
  top: 100%; }
  .navbar .navbar-nav .dropdown .dropdown-menu span {
    width: 30px; }

.navbar .navbar-nav .dropdown .dropdown-item {
  font-size: 0.875rem; }

@media (min-width: 992px) {
  .navbar .navbar-nav .dropdown-megamenu,
  .navbar .navbar-nav .dropdown-megamenu-sm,
  .navbar .navbar-nav .dropdown-megamenu-md {
    min-width: 580px; } }

.navbar .navbar-nav .dropdown-megamenu .megamenu-link,
.navbar .navbar-nav .dropdown-megamenu-sm .megamenu-link,
.navbar .navbar-nav .dropdown-megamenu-md .megamenu-link {
  color: var(--cr-primary-deep);
  font-weight: 400;
  font-size: 0.875rem; }

.navbar .navbar-nav .dropdown-megamenu .megamenu-item,
.navbar .navbar-nav .dropdown-megamenu-sm .megamenu-item,
.navbar .navbar-nav .dropdown-megamenu-md .megamenu-item {
  position: relative; }
  .navbar .navbar-nav .dropdown-megamenu .megamenu-item:hover .megamenu-link,
  .navbar .navbar-nav .dropdown-megamenu-sm .megamenu-item:hover .megamenu-link,
  .navbar .navbar-nav .dropdown-megamenu-md .megamenu-item:hover .megamenu-link {
    color: var(--cr-primary); }

@media (min-width: 992px) {
  .navbar .navbar-nav .dropdown-megamenu-sm {
    min-width: 320px; } }

@media (min-width: 992px) {
  .navbar .navbar-nav .dropdown-megamenu-md {
    min-width: 960px; } }

@media (min-width: 992px) {
  .navbar .navbar-nav .dropdown-menu .dropdown-toggle .nav-link-arrow {
    transform: rotate(-90deg); }
  .navbar .navbar-nav .dropdown.show > .dropdown-toggle .nav-link-arrow {
    transform: rotate(180deg); }
  .navbar .navbar-nav .dropdown-toggle:hover .nav-link-arrow {
    transform: rotate(0deg); } }

.navbar .navbar-nav .dropdown-submenu {
  position: relative; }
  .navbar .navbar-nav .dropdown-submenu .dropdown-menu {
    top: 0;
    left: calc(100% - 2px);
    margin-left: .1rem;
    margin-right: .1rem;
    opacity: 0;
    display: none; }
    .navbar .navbar-nav .dropdown-submenu .dropdown-menu.show {
      opacity: 1;
      pointer-events: all;
      display: block; }

.navbar .navbar-nav .nav-link-arrow {
  transition: transform 0.2s ease; }

.navbar-brand {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase; }
  .navbar-brand img {
    height: 40px; }

.navbar-dark .navbar-brand-light {
  display: none; }

.navbar-dark .navbar-brand {
  color: var(--cr-primary-ink); }

.navbar-dark > .nav-item:hover > .nav-link {
  color: var(--cr-primary); }

.navbar-light:not(.headroom--not-top) .btn-outline-soft {
  border-color: var(--cr-primary);
  color: var(--cr-primary); }
  .navbar-light:not(.headroom--not-top) .btn-outline-soft:hover {
    background: var(--cr-primary);
    color: var(--cr-primary-ink); }

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(17, 24, 39, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.navbar-light .navbar-brand-dark {
  display: none; }

.navbar-light .navbar-brand {
  color: var(--cr-primary); }

.dropdown-menu {
  top: 100%; }
  .dropdown-menu span {
    width: 30px; }

@media (min-width: 992px) {
  .navbar-nav .nav-item [data-toggle="dropdown"]::after {
    transition: all 0.2s ease; }
  .navbar-nav .nav-item.show [data-toggle="dropdown"]::after {
    transform: rotate(180deg); }
  .navbar-nav .nav-link i {
    margin-right: .3rem;
    font-size: 0.75rem; }
  .navbar-nav .nav-link-icon {
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: 1rem; }
    .navbar-nav .nav-link-icon i {
      margin-right: 0; }
  .navbar-nav .dropdown-menu {
    opacity: 0;
    pointer-events: none;
    margin: 0;
    border-radius: 0.35rem; }
  .navbar-nav .dropdown-menu-end:before {
    right: 20px;
    left: auto; }
  .navbar-nav .dropdown-menu-center {
    left: 50%;
    transform: translateX(-50%); }
  .navbar-nav .dropdown-menu.show,
  .navbar-nav .dropdown-megamenu.show,
  .navbar-nav .dropdown-megamenu-md.show {
    opacity: 1;
    pointer-events: auto; }
  .navbar-nav .dropdown-menu.close,
  .navbar-nav .dropdown-megamenu.close,
  .navbar-nav .dropdown-megamenu-md.close {
    display: block; }
  .navbar-nav .dropdown-submenu .dropdown-menu {
    transform: none; }
  .navbar-nav .dropdown-menu {
    position: relative;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease; }
  .navbar-nav .dropdown.show > .dropdown-menu,
  .navbar-nav .dropdown-submenu.show > .dropdown-menu {
    display: block;
    opacity: 1;
    pointer-events: auto; }
  .navbar-nav .dropdown-menu-inner {
    position: relative;
    padding: 1rem; } }

.navbar-collapse-header {
  display: none; }

.navbar-collapse {
  width: auto; }

@media (max-width: 991.98px) {
  .navbar-nav .nav-link {
    padding: .625rem 0; }
  .navbar-nav .dropdown-menu {
    box-shadow: none;
    width: 100%; }
    .navbar-nav .dropdown-menu .media svg {
      width: 30px; }
  .dropdown-menu-center {
    right: 0;
    left: auto;
    transform: translate(0, 0); } }
  @media (max-width: 991.98px) and (max-width: 991.98px) {
    .dropdown-menu-center {
      transform: translateX(-75%); } }

@media (max-width: 991.98px) {
  .navbar-collapse {
    width: calc(100% - 30px);
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 1050;
    overflow-y: auto;
    height: calc(100vh - 30px) !important;
    opacity: 0; }
    .navbar-collapse .navbar-toggler {
      position: relative;
      display: inline-block;
      width: 20px;
      height: 20px;
      padding: 0; }
      .navbar-collapse .navbar-toggler span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        opacity: 1;
        background: #283448; }
    .navbar-collapse .navbar-collapse-header {
      display: block;
      padding-bottom: 1rem;
      margin-bottom: 1rem; }
    .navbar-collapse .collapse-brand img {
      height: 35px; }
    .navbar-collapse .collapse-close {
      text-align: right; }
  .navbar-collapse.collapsing,
  .navbar-collapse.show {
    padding: 1.5rem;
    border-radius: 0.35rem;
    background: var(--cr-surface);
    animation: show-navbar-collapse .2s ease forwards;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }
  .navbar-collapse.collapsing-out {
    animation: hide-navbar-collapse .2s ease forwards; } }

.navbar-dashboard {
  border-radius: 0.5rem; }

.navbar-theme-primary:not(.headroom) {
  background-color: var(--cr-primary); }

/**
 * = Sections
 */
.section {
  position: relative;
  padding-top: 3rem;
  padding-bottom: 3rem; }

.section-header {
  position: relative;
  padding-top: 9rem;
  padding-bottom: 3rem; }

@media (min-width: 576px) {
  .section {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem; }
  .section-header {
    position: relative;
    padding-top: 8rem;
    padding-bottom: 8rem; }
    .section-header.section-sm {
      padding-top: 4rem;
      padding-bottom: 3rem; }
  .section-xl {
    padding-top: 8rem;
    padding-bottom: 8rem; }
  .section-lg {
    padding-top: 6rem;
    padding-bottom: 6rem; }
  .section-sm {
    padding-top: 3rem;
    padding-bottom: 3rem; } }

@media (min-width: 992px) {
  .section {
    position: relative;
    padding-top: 6rem;
    padding-bottom: 6rem; }
  .section-header {
    position: relative;
    padding-top: 10rem;
    padding-bottom: 10rem; }
    .section-header.section-sm {
      padding-top: 4rem;
      padding-bottom: 3rem; }
  .section-xl {
    padding-top: 10rem;
    padding-bottom: 10rem; }
  .section-lg {
    padding-top: 8rem;
    padding-bottom: 8rem; }
  .section-sm {
    padding-top: 4rem;
    padding-bottom: 4rem; } }

@media (min-width: 768px) {
  .section-hero {
    height: 100vh; } }

.line-bottom::after {
  content: '';
  display: block;
  width: 80%;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -40%;
  height: 1px;
  background: radial-gradient(ellipse at center, var(--cr-border-strong) 0, rgba(255, 255, 255, 0) 80%); }

.section-profile-cover {
  height: 580px;
  background-size: cover;
  background-position: center center; }
  @media (max-width: 767.98px) {
    .section-profile-cover {
      height: 400px; } }

.components-section > .form-control + .form-control {
  margin-top: .5rem; }

.components-section > .nav + .nav,
.components-section > .alert + .alert,
.components-section > .navbar + .navbar,
.components-section > .progress + .progress,
.components-section > .progress + .btn,
.components-section .badge,
.components-section .btn {
  margin-top: .5rem;
  margin-bottom: .5rem; }

.components-section .btn-group {
  margin-top: .5rem;
  margin-bottom: .5rem; }
  .components-section .btn-group .btn {
    margin: 0; }

.components-section .alert {
  margin: 0; }
  .components-section .alert + .alert {
    margin-top: 1.25rem; }

.components-section .badge {
  margin-right: .5rem; }

.components-section .modal-footer .btn {
  margin: 0; }

.copy-docs {
  position: absolute;
  top: 5px;
  right: 5px;
  transition: all 0.2s ease; }
  .copy-docs.copied {
    background: var(--cr-success); }
  .copy-docs:hover {
    cursor: pointer; }

.kanban-container {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch; }

/**
 * = Footers
 */
.footer ul {
  margin-bottom: 0;
  padding: 0;
  list-style: none; }
  .footer ul li {
    display: inline-block; }
    .footer ul li a {
      text-decoration: none;
      position: relative;
      display: block;
      color: var(--cr-text-2); }
      .footer ul li a:hover {
        color: var(--cr-primary); }
    .footer ul li .btn {
      margin: 0; }
  .footer ul.links-horizontal:first-child a {
    padding-left: 0; }
  .footer ul.links-horizontal:last-child a {
    padding-right: 0; }
  .footer ul.links-vertical li {
    display: block;
    margin-left: -5px;
    margin-right: -5px; }
    .footer ul.links-vertical li a {
      padding: 5px; }
      .footer ul.links-vertical li a:hover {
        color: inherit !important; }
  .footer ul.icon-box i {
    line-height: 1.7; }

.footer .social-buttons a,
.footer .social-buttons .btn {
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 0.125rem 0.375rem; }

.footer .footer-brand {
  font-size: 1.25rem;
  font-weight: 500; }
  .footer .footer-brand img.common {
    height: 40px; }
  .footer .footer-brand img {
    height: 40px;
    width: 40px; }
  .footer .footer-brand:hover, .footer .footer-brand:focus {
    color: var(--cr-primary-deep); }

.footer .footer-language-link {
  font-size: 0.875rem; }
  .footer .footer-language-link i {
    font-size: 0.75rem; }

.footer .copyright {
  font-size: 0.875rem; }

.footer .pull-center {
  display: inline-block;
  float: none; }

/**
 * = Sidebars
 */
#doc-index:not(.collapse.show), .doc-sidebar {
  display: none; }

@media (min-width: 992px) {
  #doc-index {
    display: block; }
  .doc-sidebar {
    display: block;
    height: calc(100vh - 2rem);
    overflow-y: scroll;
    position: sticky;
    top: 2rem; }
    .doc-sidebar .nav-link[data-toggle="collapse"] > .icon {
      transform: rotateZ(-90deg);
      position: relative;
      right: .25rem; }
    .doc-sidebar .nav .nav-item {
      font-size: 0.875rem; } }

/*
 * Sidebar
*/
.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--cr-primary);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  max-height: 100%;
  overflow: hidden;
  width: 100%;
  transition: max-width 0.3s var(--ease); }
  @media (prefers-reduced-motion: reduce) {
    .sidebar {
      transition: none; } }
  @media (min-width: 768px) {
    .sidebar {
      width: 100%;
      max-width: 260px; } }
  .sidebar .nav {
    white-space: nowrap; }
  .sidebar .nav-item {
    margin-bottom: .2rem; }
    /* The selected item's plate is drawn by .sidebar-active-indicator (which
       slides between links); the link itself only carries the ink treatment. */
    .sidebar .nav-item.active > .nav-link {
      color: var(--cr-primary-ink); }
      .sidebar .nav-item.active > .nav-link .sidebar-icon {
        color: var(--cr-secondary); }
    .sidebar .nav-item .nav-link {
      color: var(--cr-primary-ink);
      cursor: pointer; }
      /* Hover is a faint wash — deliberately lighter than the solid selected
         plate so the two states never read the same. */
      .sidebar .nav-item .nav-link:hover {
        color: var(--cr-primary-ink);
        background-color: rgba(255, 255, 255, 0.07); }
        .sidebar .nav-item .nav-link:hover .sidebar-icon {
          color: var(--cr-primary-ink); }
  .sidebar .nav-link + .multi-level {
    margin-top: .2rem; }
  .sidebar .nav-link {
    font-size: 1rem;
    vertical-align: middle;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    position: relative;
    z-index: 1;
    transition: color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease); }
    .sidebar .nav-link .sidebar-icon {
      margin-right: .5rem;
      color: var(--cr-border-strong);
      transition: color var(--t-base) var(--ease); }
    .sidebar .nav-link .link-arrow {
      font-size: 0.875rem; }
    .sidebar .nav-link[data-bs-toggle=collapse][aria-expanded=true] .link-arrow {
      transform: rotate(90deg);
      transition: all 0.2s ease; }
  .sidebar .nav-link.active {
    color: var(--cr-surface-2); }

  /* Sliding selection plate — one per sidebar, positioned by base_new.js so a
     new selection animates from the old link instead of snapping. */
  .sidebar-active-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 0.5rem;
    background-color: var(--cr-text-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    /* Same travel curve as .active-indicator in the view switcher, so the two
       sliding markers read as one idea. */
    transition: transform 0.35s cubic-bezier(0.45, 0, 0.2, 1),
                width     0.35s cubic-bezier(0.45, 0, 0.2, 1),
                height    0.35s cubic-bezier(0.45, 0, 0.2, 1),
                opacity   var(--t-base) var(--ease); }
    .sidebar-active-indicator.is-visible {
      opacity: 1; }
    .sidebar-active-indicator::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 3px;
      height: 55%;
      border-radius: 0 3px 3px 0;
      background-color: var(--cr-secondary);
      transform: translateY(-50%); }
  @media (prefers-reduced-motion: reduce) {
    .sidebar-active-indicator { transition: none; }
    .sidebar .nav-link { transition: none; } }
  .sidebar .multi-level .nav-link {
    padding-left: 36px; }
    /* Submenu bullets — a small ring in front of each child label, so an open
       section reads as a list rather than free-floating links. It takes the
       same ink as a top-level .sidebar-icon at rest, on hover and when
       selected, so both levels behave as one system. The link's padding is
       reduced by exactly the bullet's width plus its gap, so the labels keep
       the left edge they had without it. */
    .sidebar .multi-level .nav-link .sidebar-text::before {
      content: "";
      display: inline-block;
      width: 0.4375rem;
      height: 0.4375rem;
      margin-right: 0.625rem;
      vertical-align: middle;
      border: 1px solid currentColor;
      border-radius: 50%;
      color: var(--cr-border-strong);
      transition: color var(--t-base) var(--ease),
                  background-color var(--t-base) var(--ease); }
    .sidebar .multi-level .nav-item .nav-link:hover .sidebar-text::before {
      color: var(--cr-primary-ink); }
    /* Selected: filled, matching the secondary ink the parent icon takes. */
    .sidebar .multi-level .nav-item.active > .nav-link .sidebar-text::before {
      color: var(--cr-secondary);
      background-color: currentColor; }
  .sidebar .sidebar-text,
  .sidebar .link-arrow,
  .sidebar .badge,
  .sidebar .notification-count {
    opacity: 1;
    transition: opacity var(--t-base) var(--ease); }
  .sidebar .sidebar-text-contracted {
    display: none; }
  .sidebar.contracted {
    max-width: 64px; }
    .sidebar.contracted .sidebar-text,
    .sidebar.contracted .link-arrow,
    .sidebar.contracted .badge {
      opacity: 0; }
    .sidebar.contracted .notification-count {
      opacity: 1;
      position: absolute;
      top: 0;
      left: 40px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      font-size: .7rem;
      padding: .2rem; }
    .sidebar.contracted .nav-item {
      position: relative;
      white-space: nowrap; }
    .sidebar.contracted .sidebar-text-contracted {
      display: inline; }
    .sidebar.contracted .multi-level .nav-link {
      padding-left: 17px; }
    .sidebar.contracted .sidebar-icon {
      text-align: center;
      margin-right: 0;
      flex-shrink: 0; }
    @media (min-width: 768px) {
      .sidebar.contracted ~ .content {
        margin-left: 64px; } }
    .sidebar.contracted .nav-footer {
      display: none; }
    /* Hover-to-peek: a collapsed sidebar temporarily expands while hovered and
       overlays the content (no layout shift) since the sidebar is fixed. */
    .sidebar.contracted:hover {
      max-width: 260px; }
      .sidebar.contracted:hover .sidebar-text,
      .sidebar.contracted:hover .link-arrow,
      .sidebar.contracted:hover .badge {
        opacity: 1; }
      .sidebar.contracted:hover .sidebar-text-contracted {
        display: none; }
      .sidebar.contracted:hover .multi-level .nav-link {
        padding-left: 36px; }
      .sidebar.contracted:hover .sidebar-icon {
        margin-right: .5rem; }
      .sidebar.contracted:hover .nav-footer {
        display: block; }

/* Drawer-lip collapse/expand toggle that straddles the sidebar's right edge */
.sidebar-collapse-toggle {
  position: fixed;
  top: 50%;
  left: 260px;
  transform: translate(-50%, -50%);
  width: 1.5rem;
  height: 2.5rem;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--cr-primary);
  color: var(--cr-primary-ink);
  border: 0;
  box-shadow: var(--sh-md);
  cursor: pointer;
  z-index: 120;
  transition: left 0.3s var(--ease),
              background-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease); }
  .sidebar-collapse-toggle:hover {
    background: var(--cr-text-2);
    box-shadow: var(--sh-lg); }
  .sidebar-collapse-toggle:focus-visible {
    outline: 0;
    box-shadow: var(--cr-focus-ring); }
  .sidebar-collapse-toggle .chevron {
    font-size: 0.8rem;
    line-height: 1;
    transition: transform 0.3s var(--ease); }
  .sidebar.contracted + .sidebar-collapse-toggle {
    left: 64px; }
    .sidebar.contracted + .sidebar-collapse-toggle .chevron {
      transform: rotate(180deg); }
  .sidebar.contracted:hover + .sidebar-collapse-toggle {
    left: 260px; }
    .sidebar.contracted:hover + .sidebar-collapse-toggle .chevron {
      transform: rotate(0deg); }
  @media (min-width: 1451px) {
    .sidebar-collapse-toggle { display: inline-flex; } }

.sidebar-inner {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden; }

/* .sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase; }

.user-card {
  border-bottom: 0.0625rem solid #2e3650; } */

@media (max-width: 575.98px) {
  .sidebar {
    width: 100%; } }

.content {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 1rem 0 1rem;
  transition: all 0.3s; }
  @media (prefers-reduced-motion: reduce) {
    .content {
      transition: none; } }
  @media (min-width: 992px) {
    .content {
      margin-left: 260px; } }

.sidebar-toggle {
  font-size: 1.3rem; }
  .sidebar-toggle:hover, .sidebar-toggle:focus {
    outline: none;
    box-shadow: none;
    background: var(--cr-border-2); }

iframe {
  border: 0; }

figcaption,
figure,
main {
  display: block;
  margin: 0; }

main {
  overflow: hidden; }

img {
  max-width: 100%; }

strong {
  font-weight: 500; }

button:focus {
  outline: 0; }

label {
  font-weight: 500;
  margin-bottom: .5rem; }

.alert-icon {
  margin-bottom: .5rem; }
  .alert-icon span {
    font-size: 2rem; }

/**
 * = Avatars
 */
/* .avatar + .avatar-content {
  display: inline-block;
  margin-left: 0.75rem; } */

.avatar-sm {
  width: 1.5rem;
  height: 1.5rem; }
  .avatar-sm img {
    width: 1.5rem;
    height: 1.5rem; }

.avatar {
  width: 2rem;
  height: 2rem; }
  .avatar img {
    width: 2rem;
    height: 2rem; }

.avatar-md {
  width: 3rem;
  height: 3rem; }
  .avatar-md img {
    width: 3rem;
    height: 3rem; }

.avatar-lg {
  width: 4.5rem;
  height: 4.5rem; }
  .avatar-lg img {
    width: 4.5rem;
    height: 4.5rem; }

.avatar-xl {
  width: 8rem;
  height: 8rem; }
  @media (max-width: 991.98px) {
    .avatar-xl {
      width: 4.5rem;
      height: 4.5rem; } }

.avatar-offline::before,
.avatar-online::before {
  position: absolute;
  border: 2px solid #ffffff;
  background-color: var(--cr-success);
  display: block;
  top: 2px;
  left: 39px;
  content: "";
  border-radius: 50%;
  height: 10px;
  width: 10px; }

.avatar-offline::before {
  background-color: var(--cr-danger); }

.avatar-group .avatar {
  position: relative;
  z-index: 0; }
  .avatar-group .avatar img {
    border: 2px solid #ffffff; }
  .avatar-group .avatar:hover {
    z-index: 3; }

.avatar-group .avatar + .avatar {
  margin-left: -1rem; }

.scale-up-hover-1:hover .scale {
  transform: scale(0.55556); }

.animate-up-1:hover,
.animate-hover:hover .animate-up-1 {
  transform: translate(0, -1px); }

.animate-right-1:hover,
.animate-hover:hover .animate-right-1 {
  transform: translate(1px, 0); }

.animate-down-1:hover,
.animate-hover:hover .animate-down-1 {
  transform: translate(0, 1px); }

.animate-left-1:hover,
.animate-hover:hover .animate-left-1 {
  transform: translate(-1px, 0); }

.scale-up-hover-2:hover .scale {
  transform: scale(1.11111); }

.animate-up-2:hover,
.animate-hover:hover .animate-up-2 {
  transform: translate(0, -2px); }

.animate-right-2:hover,
.animate-hover:hover .animate-right-2 {
  transform: translate(2px, 0); }

.animate-down-2:hover,
.animate-hover:hover .animate-down-2 {
  transform: translate(0, 2px); }

.animate-left-2:hover,
.animate-hover:hover .animate-left-2 {
  transform: translate(-2px, 0); }

.scale-up-hover-3:hover .scale {
  transform: scale(1.66667); }

.animate-up-3:hover,
.animate-hover:hover .animate-up-3 {
  transform: translate(0, -3px); }

.animate-right-3:hover,
.animate-hover:hover .animate-right-3 {
  transform: translate(3px, 0); }

.animate-down-3:hover,
.animate-hover:hover .animate-down-3 {
  transform: translate(0, 3px); }

.animate-left-3:hover,
.animate-hover:hover .animate-left-3 {
  transform: translate(-3px, 0); }

.scale-up-hover-4:hover .scale {
  transform: scale(2.22222); }

.animate-up-4:hover,
.animate-hover:hover .animate-up-4 {
  transform: translate(0, -4px); }

.animate-right-4:hover,
.animate-hover:hover .animate-right-4 {
  transform: translate(4px, 0); }

.animate-down-4:hover,
.animate-hover:hover .animate-down-4 {
  transform: translate(0, 4px); }

.animate-left-4:hover,
.animate-hover:hover .animate-left-4 {
  transform: translate(-4px, 0); }

.scale-up-hover-5:hover .scale {
  transform: scale(2.77778); }

.animate-up-5:hover,
.animate-hover:hover .animate-up-5 {
  transform: translate(0, -5px); }

.animate-right-5:hover,
.animate-hover:hover .animate-right-5 {
  transform: translate(5px, 0); }

.animate-down-5:hover,
.animate-hover:hover .animate-down-5 {
  transform: translate(0, 5px); }

.animate-left-5:hover,
.animate-hover:hover .animate-left-5 {
  transform: translate(-5px, 0); }

.scale-up-hover-6:hover .scale {
  transform: scale(3.33333); }

.animate-up-6:hover,
.animate-hover:hover .animate-up-6 {
  transform: translate(0, -6px); }

.animate-right-6:hover,
.animate-hover:hover .animate-right-6 {
  transform: translate(6px, 0); }

.animate-down-6:hover,
.animate-hover:hover .animate-down-6 {
  transform: translate(0, 6px); }

.animate-left-6:hover,
.animate-hover:hover .animate-left-6 {
  transform: translate(-6px, 0); }

.scale-up-hover-7:hover .scale {
  transform: scale(3.88889); }

.animate-up-7:hover,
.animate-hover:hover .animate-up-7 {
  transform: translate(0, -7px); }

.animate-right-7:hover,
.animate-hover:hover .animate-right-7 {
  transform: translate(7px, 0); }

.animate-down-7:hover,
.animate-hover:hover .animate-down-7 {
  transform: translate(0, 7px); }

.animate-left-7:hover,
.animate-hover:hover .animate-left-7 {
  transform: translate(-7px, 0); }

.scale-up-hover-8:hover .scale {
  transform: scale(4.44444); }

.animate-up-8:hover,
.animate-hover:hover .animate-up-8 {
  transform: translate(0, -8px); }

.animate-right-8:hover,
.animate-hover:hover .animate-right-8 {
  transform: translate(8px, 0); }

.animate-down-8:hover,
.animate-hover:hover .animate-down-8 {
  transform: translate(0, 8px); }

.animate-left-8:hover,
.animate-hover:hover .animate-left-8 {
  transform: translate(-8px, 0); }

.scale-up-hover-9:hover .scale {
  transform: scale(5); }

.animate-up-9:hover,
.animate-hover:hover .animate-up-9 {
  transform: translate(0, -9px); }

.animate-right-9:hover,
.animate-hover:hover .animate-right-9 {
  transform: translate(9px, 0); }

.animate-down-9:hover,
.animate-hover:hover .animate-down-9 {
  transform: translate(0, 9px); }

.animate-left-9:hover,
.animate-hover:hover .animate-left-9 {
  transform: translate(-9px, 0); }

@keyframes show-navbar-collapse {
  0% {
    opacity: 0;
    transform: scale(0.95);
    transform-origin: 100% 0; }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes hide-navbar-collapse {
  from {
    opacity: 1;
    transform: scale(1);
    transform-origin: 100% 0; }
  to {
    opacity: 0;
    transform: scale(0.95); } }

@keyframes show-navbar-dropdown {
  0% {
    opacity: 0;
    transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
    transition: visibility 0.45s, opacity 0.45s, transform 0.45s; }
  100% {
    transform: translate(0, 0);
    opacity: 1; } }

@keyframes hide-navbar-dropdown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate(0, 10px); } }

@keyframes show-dropdown {
  0% {
    opacity: 0;
    transform-origin: perspective(200px) rotateX(-2deg);
    transition: visibility 0.45s, opacity .5s; }
  100% {
    opacity: 1; } }

@keyframes hide-dropdown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate(0, 10px); } }

.bell-shake.shaking {
  animation: bellshake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform-origin: top right; }

:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1; }

.animate__animated {
  animation-duration: 1s;
  animation-duration: var(--animate-duration);
  animation-fill-mode: both; }

.animate__jackInTheBox {
  animation-name: jackInTheBox; }

@keyframes bellshake {
  0% {
    transform: rotate(0); }
  15% {
    transform: rotate(5deg); }
  30% {
    transform: rotate(-5deg); }
  45% {
    transform: rotate(4deg); }
  60% {
    transform: rotate(-4deg); }
  75% {
    transform: rotate(2deg); }
  85% {
    transform: rotate(-2deg); }
  92% {
    transform: rotate(1deg); }
  100% {
    transform: rotate(0); } }

@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom; }
  50% {
    transform: rotate(-10deg); }
  70% {
    transform: rotate(3deg); }
  to {
    opacity: 1;
    transform: scale(1); } }

.animate__jackInTheBox {
  animation-name: jackInTheBox; }

[class*=shadow] {
  transition: all .2s ease; }

/**
 * = Badges
 */
.badge {
  font-size: 0.75em;
  font-weight: 600; }
  .badge a {
    color: var(--cr-primary-ink); }
  .badge.super-badge {
    vertical-align: super; }

.badge-pill {
  padding-right: 0.875em;
  padding-left: 0.875em; }

.badge-inline {
  margin-right: .625rem; }
  .badge-inline + span {
    top: 2px;
    position: relative; }
    .badge-inline + span > a {
      text-decoration: underline; }

.badge-sm {
  padding: .2rem .6rem; }

.badge-lg {
  font-size: 1.25rem;
  padding: .35rem .85rem; }

.btn .badge-corner {
  position: absolute;
  top: -50%;
  right: .5rem;
  transform: translate(50%, 50%);
  margin: 0;
  border: 3px solid;
  padding-left: .5rem;
  padding-right: .5rem; }

.wi-tags a {
  display: inline-block;
  padding: 0.125rem 0.875rem;
  margin: 0.25rem;
  line-height: 2;
  font-size: 0.875rem;
  box-shadow: 0 2px 5px rgba(140, 152, 164, 0.2);
  background-color: var(--cr-surface); }

.pixel-pro-badge {
  position: relative;
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 500;
  right: -11px;
  padding: 4px 12px;
  top: -30px;
  background: var(--cr-surface);
  border-radius: 0.35rem;
  box-shadow: 0 2px 5px rgba(140, 152, 164, 0.2); }
  @media (max-width: 575.98px) {
    .pixel-pro-badge {
      font-size: 1rem;
      right: -13px;
      padding: 5px 10px;
      top: -23px; } }

.subscription-badge {
  top: -19px;
  right: -12px;
  font-size: .75rem; }

/*
* = Buttons
*/
.btn.btn-circle {
  border-radius: 50%; }

.btn.btn-md {
  padding: 0.65rem 1.25rem; }

.btn.btn-xs {
  padding: .2rem 0.35rem;
  font-size: 0.55rem;
  box-shadow: none; }

.btn.large-form-btn {
  padding: 1.2rem 1rem; }

.btn.dashed-outline {
  border-style: dashed; }

/* .btn-icon-only is gone. It was a second square-button scale (2.575/2/1.7rem
   against .btn-icon's 2.25/2/1.75rem) that kept a filled variant colour, so a
   row of list actions rendered as a row of coloured boxes — the exact thing
   the .btn-icon block further down was written to replace. Its ~27 call sites
   now use .btn-icon with the outline form of their variant, which sets
   --bi-tint. See section 19. */

.btn-primary:hover {
  background-color: #161d27;
  border-color: #161d27; }

.btn-secondary:hover {
  background-color: #fbd4a0;
  border-color: #eeb15d; }

.btn-tertiary:hover {
  background-color: #292959;
  border-color: #292959; }

.btn-success:hover {
  background-color: var(--cr-save-hover);
  border-color: var(--cr-save-hover); }

.btn-info:hover {
  background-color: #1f57b8;
  border-color: #1f57b8; }

.btn-warning:hover {
  background-color: #f59e04;
  border-color: #f59e04; }

.btn-danger:hover {
  background-color: #ca1a41;
  border-color: #ca1a41; }

.btn-white:hover {
  background-color: #f2f2f2;
  border-color: #f2f2f2; }

.btn-indigo:hover {
  background-color: #3a30e2;
  border-color: #3a30e2; }

.btn-purple:hover {
  background-color: #6c23eb;
  border-color: #6c23eb; }

.btn-yellow-100:hover {
  background-color: #ffe3bd;
  border-color: #ffe3bd; }

.btn-yellow-200:hover {
  background-color: #f2d0a2;
  border-color: #f2d0a2; }

.btn-gray-50:hover {
  background-color: #eaedf1;
  border-color: #eaedf1; }

.btn-gray-100:hover {
  background-color: #e3e7ec;
  border-color: #e3e7ec; }

.btn-gray-200:hover {
  background-color: #d7dae0;
  border-color: #d7dae0; }

.btn-gray-300:hover {
  background-color: #c3c8d0;
  border-color: #c3c8d0; }

.btn-gray-400:hover {
  background-color: #8e96a4;
  border-color: #8e96a4; }

.btn-gray-500:hover {
  background-color: #5f6672;
  border-color: #5f6672; }

.btn-gray-600:hover {
  background-color: #404954;
  border-color: #404954; }

.btn-gray-700:hover {
  background-color: #2d3542;
  border-color: #2d3542; }

.btn-gray-800:hover {
  background-color: #161d27;
  border-color: #161d27; }

.btn-gray-900:hover {
  background-color: #090d15;
  border-color: #090d15; }

/**
 * = Breadcrumbs
 */
.breadcrumb-item {
  font-size: 0.75rem; }
  .breadcrumb-item, .breadcrumb-item a {
    color: var(--cr-text-2);
    font-weight: 400;
    font-size: 0.75rem; }
    @media (min-width: 576px) {
      .breadcrumb-item, .breadcrumb-item a {
        font-size: 0.875rem; } }

.breadcrumb-transparent {
  background: transparent;
  padding: 0; }

/**
 * = Cards
 */
.card {
  position: relative; }
  .card .card-header {
    background: transparent; }
  .card.hover-state:hover {
    background-color: var(--cr-surface-2); }
  .card .profile-cover {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    height: 200px; }
  .card.notification-card {
    height: 633px; }
    .card.notification-card .list-group-timeline {
      height: 520px;
      overflow: hidden;
      overflow-y: auto; }
  @media (min-width: 992px) {
    .card.timeline-card:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      margin-left: .75rem;
      border: 8px solid var(--cr-primary-deep);
      border-color: transparent #e0e6ec #e0e6ec transparent;
      box-sizing: border-box;
      transform-origin: 0 0;
      transform: rotate(135deg);
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
    .card.left-timeline-card:after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      margin-right: -5px;
      border: 8px solid var(--cr-primary-deep);
      border-color: transparent #e0e6ec #e0e6ec transparent;
      box-sizing: border-box;
      transform-origin: 0 0;
      transform: rotate(-45deg);
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } }

.message-wrapper .card,
.task-wrapper .card {
  border: 0; }

.card-footer {
  background-color: transparent; }

.card-stats {
  padding-left: 1.785rem; }

.card .card-blockquote {
  position: relative;
  padding: 2rem; }
  .card .card-blockquote .svg-bg {
    display: block;
    position: absolute;
    width: 100%;
    height: 95px;
    top: -94px;
    left: 0; }

.card-lift-hover:hover {
  transform: translateY(-20px);
  transition: all 0.2s ease; }
  @media (prefers-reduced-motion: reduce) {
    .card-lift-hover:hover {
      transition: none; } }

.page-preview {
  display: block;
  position: relative; }
  .page-preview .show-on-hover {
    position: absolute;
    bottom: -25px;
    background: rgba(31, 41, 55, 0.85);
    padding: 10px 0;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    width: calc(100% + 28px);
    left: -14px;
    opacity: 0;
    transition: 0.2s; }
    @media (prefers-reduced-motion: reduce) {
      .page-preview .show-on-hover {
        transition: none; } }
  .page-preview.page-preview-lg .show-on-hover {
    left: -30px;
    width: calc(100% + 60px);
    bottom: -20px; }
  .page-preview:hover .show-on-hover {
    z-index: 99;
    opacity: 1; }
  .custom-select.custom-select-shadow {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07);
    transition: box-shadow .15s ease; }
    .custom-select.custom-select-shadow:focus {
      box-shadow: 0.1rem 0.1rem 0 rgba(229, 231, 235, 0.5); }

.apexcharts-tooltip {
  background-color: var(--cr-surface) !important;
  color: var(--cr-text-2) !important;
  border: 0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  border-radius: 0.35rem !important; }
  .apexcharts-tooltip .apexcharts-tooltip-title {
    padding: 6px 10px !important;
    background: var(--cr-border) !important;
    border-bottom: 0.0625rem solid var(--cr-border-2) !important; }

.apexcharts-xaxistooltip {
  color: var(--cr-text-2) !important;
  border: 0 !important;
  background-color: var(--cr-surface) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  border-radius: 0.35rem !important; }

.apexcharts-xaxistooltip-bottom::before {
  border-bottom-color: #ffffff !important; }

.apexcharts-xaxistooltip-bottom::after {
  border-bottom-color: #ffffff !important; }

.apexcharts-tooltip-marker {
  min-width: 10px !important;
  min-height: 10px !important;
  margin-right: 8px !important; }

.apexcharts-tooltip-y-group {
  padding: 4px 0 5px !important; }

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-item {
  padding: .5rem 1rem;
  font-size: 0.875rem; }
  .dropdown-menu .dropdown-header .dropdown-icon,
  .dropdown-menu .dropdown-item .dropdown-icon {
    height: 1.25rem;
    width: 1.25rem; }

.dropdown-menu .dropdown-header {
  color: var(--cr-primary-deep);
  font-weight: 500; }

.dropdown-menu .dropdown-item {
  transition: all 0.2s ease;
  font-weight: 400; }

.show .dropdown-menu {
  animation: show-dropdown .2s ease forwards; }

.dropdown-menu.dropdown-menu-xs {
  min-width: 120px;
  max-width: 120px;
  box-shadow: 0 2px 5px rgba(140, 152, 164, 0.2); }

.dropdown-menu-sm {
  min-width: 100px;
  border: 1rem; }

.dropdown-menu-md {
  min-width: 180px;
  border: 1rem; }

.dropdown-menu-lg {
  min-width: 350px;
  border-radius: 1rem; }
  @media (max-width: 575.98px) {
    .dropdown-menu-lg {
      min-width: 300px; } }

[data-toggle]:hover {
  cursor: pointer; }

.dropdown-toggle:after, .dropend .dropdown-toggle:after, .dropstart .dropdown-toggle:before, .dropup .dropdown-toggle:after {
  display: none; }

/**
 * = Icon boxes
 */
.icon {
  height: 2rem; }
  .icon.icon-xxs {
    height: 1rem; }
  .icon.icon-xs {
    height: 1.25rem; }
  .icon.icon-sm {
    height: 1.5rem; }
  .icon.icon-lg {
    height: 3.5rem; }
  .icon.icon-xl {
    height: 4.5rem; }
  .icon.icon-xxl {
    height: 6rem; }
  .icon.active-dot svg {
    height: 0.7rem; }

.icon-shape {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center; }
  .icon-shape svg {
    height: 2rem; }
  .icon-shape.icon-xxs {
    width: 1.5rem;
    height: 1.5rem; }
    .icon-shape.icon-xxs svg {
      height: 1rem; }
  .icon-shape.icon-xs {
    width: 2.5rem;
    height: 2.5rem; }
    .icon-shape.icon-xs svg {
      height: 1.25rem; }
  .icon-shape.icon-sm {
    width: 3.275rem;
    height: 3.275rem; }
    .icon-shape.icon-sm svg {
      height: 1.5rem; }
  .icon-shape.icon-lg {
    width: 5rem;
    height: 5rem; }
    .icon-shape.icon-lg svg {
      height: 3.5rem; }
  .icon-shape.icon-xl {
    width: 6rem;
    height: 6rem; }
    .icon-shape.icon-xl svg {
      height: 4.5rem; }
  .icon-shape.icon-xxl {
    width: 7.5rem;
    height: 7.5rem; }
    .icon-shape.icon-xxl svg {
      height: 6rem; }

.rating-star:hover {
  cursor: pointer;
  color: var(--cr-warning); }

.toggle-icon {
  height: 1.875rem; }

/* .w--20 {
  width: 20px; } */

.calendar {
  width: 3.125rem;
  line-height: 1;
  flex-direction: column;
  text-align: center;
  border-radius: 0.5rem; }
  .calendar .calendar-month {
    background-color: var(--cr-danger);
    color: var(--cr-primary-ink);
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.275rem;
    font-weight: 500; }
  .calendar .calendar-day {
    font-size: 1.5rem;
    padding: 0.25rem;
    background-color: var(--cr-surface-2);
    border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    color: var(--cr-primary);
    font-weight: 500; }

.dot {
  width: 12px;
  height: 12px; }

.bell-dot {
  display: inline-block;
  position: absolute;
  top: -11px;
  right: 6px;
  height: 10px;
  width: 10px;
  border: 2px solid var(--cr-surface-2); }

.bootstrap-big-icon {
  position: absolute;
  opacity: 0.05;
  transform: rotate(17deg); }
  @media (min-width: 992px) {
    .bootstrap-big-icon {
      right: -20%;
      bottom: 6%; } }
  @media (min-width: 1200px) {
    .bootstrap-big-icon {
      right: -10%;
      bottom: 6%; } }

.github-big-icon {
  position: absolute;
  right: 80px; }
  .github-big-icon svg {
    color: var(--cr-border-strong);
    height: 800px;
    opacity: 0.2; }

.icon-shape-primary {
  color: var(--cr-primary);
  background-color: rgba(31, 41, 55, 0.3); }

.icon-shape-secondary {
  color: #f0bc74;
  background-color: rgba(255, 222, 177, 0.55); }

.icon-shape-tertiary {
  color: var(--cr-tertiary);
  background-color: rgba(49, 49, 106, 0.3); }

.icon-shape-success {
  color: var(--cr-success);
  background-color: rgba(16, 185, 129, 0.3); }

.icon-shape-info {
  color: var(--cr-info);
  background-color: rgba(35, 97, 206, 0.3); }

.icon-shape-warning {
  color: var(--cr-warning);
  background-color: rgba(251, 169, 24, 0.3); }

.icon-shape-danger {
  color: var(--cr-danger);
  background-color: rgba(225, 29, 72, 0.3); }

.icon-shape-white {
  color: var(--cr-primary-ink);
  background-color: rgba(255, 255, 255, 0.3); }

.icon-shape-indigo {
  color: #4F46E5;
  background-color: rgba(79, 70, 229, 0.3); }

.icon-shape-purple {
  color: #7C3AED;
  background-color: rgba(124, 58, 237, 0.3); }

.icon-shape-yellow-100 {
  color: #ffeed6;
  background-color: rgba(255, 238, 214, 0.3); }

.icon-shape-yellow-200 {
  color: #f5dbb8;
  background-color: rgba(245, 219, 184, 0.3); }

.icon-shape-gray-50 {
  color: #F9FAFB;
  background-color: rgba(249, 250, 251, 0.3); }

.icon-shape-gray-100 {
  color: var(--cr-surface-2);
  background-color: rgba(242, 244, 246, 0.3); }

.icon-shape-gray-200 {
  color: var(--cr-border);
  background-color: rgba(229, 231, 235, 0.3); }

.icon-shape-gray-300 {
  color: var(--cr-border-2);
  background-color: rgba(209, 213, 219, 0.3); }

.icon-shape-gray-400 {
  color: var(--cr-border-strong);
  background-color: rgba(156, 163, 175, 0.3); }

.icon-shape-gray-500 {
  color: var(--cr-muted);
  background-color: rgba(107, 114, 128, 0.3); }

.icon-shape-gray-600 {
  color: #4B5563;
  background-color: rgba(75, 85, 99, 0.3); }

.icon-shape-gray-700 {
  color: var(--cr-text-2);
  background-color: rgba(55, 65, 81, 0.3); }

.icon-shape-gray-800 {
  color: var(--cr-primary);
  background-color: rgba(31, 41, 55, 0.3); }

.icon-shape-gray-900 {
  color: var(--cr-primary-deep);
  background-color: rgba(17, 24, 39, 0.3); }

/**
 * = Images
 */
.image-xl {
  height: 20rem; }
  .image-xl img {
    height: 20rem; }

.image-lg {
  height: 12rem; }
  .image-lg img {
    height: 12rem; }

.image-md {
  height: 5.5rem; }
  .image-md img {
    height: 5.5rem; }

.image-sm {
  height: 3rem; }
  .image-sm img {
    height: 3rem; }

.image-xs {
  height: 1.5rem; }
  .image-xs img {
    height: 1.5rem; }

.image-small {
  height: 1rem; }
  .image-small img {
    height: 1rem; }

.full-image {
  height: 100%; }

.language-flag {
  width: auto;
  height: 1rem;
  margin-right: 0.4rem;
  position: relative;
  top: -2px; }

.home-pattern {
  fill: var(--cr-surface-2); }

.form-bg-image {
  background-repeat: no-repeat !important;
  background-position: top center !important; }

/**
 * = List groups
 */
.list-group-space .list-group-item {
  margin-bottom: 1.5rem;
  border-radius: 0.5rem; }

.list-group-item {
  border: 0; }
  .list-group-item.active {
    z-index: 2;
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary);
    border-color: var(--cr-primary); }
  .list-group-item i {
    width: 1rem; }

.list-group-img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  vertical-align: top;
  margin: -.1rem 1.2rem 0 -.2rem; }

.list-group-content {
  flex: 1;
  min-width: 0; }
  .list-group-content > p {
    color: var(--cr-muted);
    line-height: 1.5;
    margin: .2rem 0 0; }

.list-group-heading {
  font-size: 1rem;
  color: var(--cr-primary); }
  .list-group-heading > small, .list-group-heading > .small {
    float: right;
    color: var(--cr-muted);
    font-weight: 500; }

.list-group.simple-list .list-group-item {
  background: transparent;
  border: none;
  padding: 0.375rem 0.125rem; }
  .list-group.simple-list .list-group-item i {
    vertical-align: middle;
    width: 35px;
    display: inline-block; }

.list-group.kanban-list {
  position: relative;
  padding-bottom: 45px; }
  .list-group.kanban-list .card {
    margin-bottom: .75rem;
    cursor: pointer; }
  .list-group.kanban-list .new-card {
    position: absolute;
    bottom: 0; }

.news-list .row > [class*='col'] {
  padding: 0 0.25rem; }

.news-list > li:not(:last-child) {
  margin-bottom: .75rem; }

.news-list img {
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover; }

/**
 * = Modals
 */
.modal.static-example {
  position: relative;
  display: block; }

.modal-content {
  border: 0;
  border-radius: 0.5rem; }

.modal-fluid .modal-dialog {
  margin-top: 0;
  margin-bottom: 0; }

.modal-fluid .modal-content {
  border-radius: 0; }

/**
 * = Navs
 */
.nav-link {
  color: var(--cr-primary); }
  .nav-link:hover, .nav-link.active {
    color: var(--cr-primary); }
    .nav-link:hover img, .nav-link.active img {
      opacity: inherit;
      transition: all 0.2s ease; }
  .nav-link span {
    position: relative; }

.nav-tabs .nav-item {
  margin-bottom: 0; }

.nav-tabs .nav-link {
  border: 0;
  padding: 1rem 1rem;
  background-color: var(--cr-surface); }
  .nav-tabs .nav-link.active {
    color: var(--cr-primary-ink);
    background-color: var(--cr-primary); }

.nav-tabs.nav-dark .nav-link.active {
  color: var(--cr-primary-ink);
  background-color: #12358a; }

.nav-tabs.nav-light .nav-link.active {
  color: var(--cr-primary-deep);
  background-color: var(--cr-border-strong); }

.nav-tabs.nav-light .nav-link:hover {
  color: var(--cr-primary-deep); }

.nav-pills .nav-item:not(:last-child) {
  padding-right: 1rem; }

.nav-pills .nav-link {
  padding: 0.75rem 0.85rem;
  transition: all 0.2s ease;
  box-shadow: none;
  border: 1px solid var(--cr-border-strong); }
  .nav-pills .nav-link.avatar-link {
    border: 0; }
  .nav-pills .nav-link:hover {
    color: var(--cr-primary); }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--cr-primary);
  background-color: #f8f8f8;
  border-color: var(--cr-primary); }

.nav-pills.rounded .nav-link {
  border-radius: 30px; }

.nav-pills.rounded.vertical-tab .nav-link {
  margin-bottom: .625rem;
  min-width: 100px; }

.nav-pills.rounded.vertical-tab .nav-item:not(:last-child) {
  padding-right: 0; }

.nav-pills.bordered-pill-md .nav-link {
  border: 0.125rem solid var(--cr-border);
  font-weight: 500; }

.nav-pills.vertical-tab .nav-link {
  margin-bottom: .625rem; }

.nav-pills.vertical-tab .nav-item:not(:last-child) {
  padding-right: 0; }

.nav-pills .nav-item {
  margin-bottom: 1rem; }

@media (max-width: 575.98px) {
  .nav-pills:not(.nav-pills-circle) .nav-item {
    padding-right: 0; } }

.nav-pill-circle .nav-link {
  display: flex;
  text-align: center;
  height: 80px;
  width: 80px;
  padding: 0;
  box-shadow: none;
  border-radius: 50%;
  align-items: center;
  justify-content: center; }
  .nav-pill-circle .nav-link.avatar-link {
    box-shadow: none; }

.nav-pill-circle.vertical-tab .nav-link-icon i,
.nav-pill-circle.vertical-tab .nav-link-icon svg {
  font-size: 1.5rem; }

.nav-pill-circle.vertical-tab .nav-item:not(:last-child) {
  padding-right: 0; }

.nav-pill-circle .nav-link-icon i,
.nav-pill-circle .nav-link-icon svg {
  font-size: 1.25rem;
  margin: 0;
  display: block; }

.nav-pill-square .nav-link {
  text-align: center;
  min-width: 80px;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center; }

.nav-pill-square.vertical-tab .nav-link {
  margin-bottom: .625rem;
  min-width: 100px; }

.nav-pill-square.vertical-tab .nav-item:not(:last-child) {
  padding-right: 0; }

.nav-pill-square .nav-link-icon i,
.nav-pill-square .nav-link-icon svg {
  font-size: 1.25rem;
  margin: 0;
  display: block;
  line-height: 50px; }

.nav-wrapper {
  padding: 1rem 0;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem; }
  .nav-wrapper + .card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem; }

.tab-content > .tab-pane {
  display: none; }
  .tab-content > .tab-pane pre {
    padding: 0;
    margin: 0; }

.tab-content > .active {
  display: block; }

@media (min-width: 992px) {
  .nav-pills .nav-item {
    margin-bottom: 0; } }

/**
 * = Paginations
 */
.circle-pagination .page-link,
.circle-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%; }
  .popover-primary.bs-popover-top .arrow::after, .popover-primary.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-primary); }
  .popover-primary.bs-popover-end .arrow::after, .popover-primary.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-primary); }
  .popover-primary.bs-popover-bottom .arrow::after, .popover-primary.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-primary); }
  .popover-primary.bs-popover-start .arrow::after, .popover-primary.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-primary); }
  .popover-secondary.bs-popover-top .arrow::after, .popover-secondary.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-secondary); }
  .popover-secondary.bs-popover-end .arrow::after, .popover-secondary.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-secondary); }
  .popover-secondary.bs-popover-bottom .arrow::after, .popover-secondary.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-secondary); }
  .popover-secondary.bs-popover-start .arrow::after, .popover-secondary.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-secondary); }
  .popover-tertiary.bs-popover-top .arrow::after, .popover-tertiary.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-tertiary); }
  .popover-tertiary.bs-popover-end .arrow::after, .popover-tertiary.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-tertiary); }
  .popover-tertiary.bs-popover-bottom .arrow::after, .popover-tertiary.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-tertiary); }
  .popover-tertiary.bs-popover-start .arrow::after, .popover-tertiary.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-tertiary); }
  .popover-success.bs-popover-top .arrow::after, .popover-success.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-success); }
  .popover-success.bs-popover-end .arrow::after, .popover-success.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-success); }
  .popover-success.bs-popover-bottom .arrow::after, .popover-success.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-success); }
  .popover-success.bs-popover-start .arrow::after, .popover-success.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-success); }
  .popover-info.bs-popover-top .arrow::after, .popover-info.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-info); }
  .popover-info.bs-popover-end .arrow::after, .popover-info.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-info); }
  .popover-info.bs-popover-bottom .arrow::after, .popover-info.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-info); }
  .popover-info.bs-popover-start .arrow::after, .popover-info.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-info); }
  .popover-warning.bs-popover-top .arrow::after, .popover-warning.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-warning); }
  .popover-warning.bs-popover-end .arrow::after, .popover-warning.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-warning); }
  .popover-warning.bs-popover-bottom .arrow::after, .popover-warning.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-warning); }
  .popover-warning.bs-popover-start .arrow::after, .popover-warning.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-warning); }
  .popover-danger.bs-popover-top .arrow::after, .popover-danger.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-danger); }
  .popover-danger.bs-popover-end .arrow::after, .popover-danger.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-danger); }
  .popover-danger.bs-popover-bottom .arrow::after, .popover-danger.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-danger); }
  .popover-danger.bs-popover-start .arrow::after, .popover-danger.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-danger); }
  .popover-white.bs-popover-top .arrow::after, .popover-white.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: #ffffff; }
  .popover-white.bs-popover-end .arrow::after, .popover-white.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: #ffffff; }
  .popover-white.bs-popover-bottom .arrow::after, .popover-white.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: #ffffff; }
  .popover-white.bs-popover-start .arrow::after, .popover-white.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: #ffffff; }
  .popover-indigo.bs-popover-top .arrow::after, .popover-indigo.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: #4F46E5; }
  .popover-indigo.bs-popover-end .arrow::after, .popover-indigo.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: #4F46E5; }
  .popover-indigo.bs-popover-bottom .arrow::after, .popover-indigo.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: #4F46E5; }
  .popover-indigo.bs-popover-start .arrow::after, .popover-indigo.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: #4F46E5; }
  .popover-purple.bs-popover-top .arrow::after, .popover-purple.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: #7C3AED; }
  .popover-purple.bs-popover-end .arrow::after, .popover-purple.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: #7C3AED; }
  .popover-purple.bs-popover-bottom .arrow::after, .popover-purple.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: #7C3AED; }
  .popover-purple.bs-popover-start .arrow::after, .popover-purple.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: #7C3AED; }
  .popover-yellow-100.bs-popover-top .arrow::after, .popover-yellow-100.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: #ffeed6; }
  .popover-yellow-100.bs-popover-end .arrow::after, .popover-yellow-100.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: #ffeed6; }
  .popover-yellow-100.bs-popover-bottom .arrow::after, .popover-yellow-100.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: #ffeed6; }
  .popover-yellow-100.bs-popover-start .arrow::after, .popover-yellow-100.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: #ffeed6; }
  .popover-yellow-200.bs-popover-top .arrow::after, .popover-yellow-200.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: #f5dbb8; }
  .popover-yellow-200.bs-popover-end .arrow::after, .popover-yellow-200.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: #f5dbb8; }
  .popover-yellow-200.bs-popover-bottom .arrow::after, .popover-yellow-200.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: #f5dbb8; }
  .popover-yellow-200.bs-popover-start .arrow::after, .popover-yellow-200.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: #f5dbb8; }
  .popover-gray-50.bs-popover-top .arrow::after, .popover-gray-50.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: #F9FAFB; }
  .popover-gray-50.bs-popover-end .arrow::after, .popover-gray-50.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: #F9FAFB; }
  .popover-gray-50.bs-popover-bottom .arrow::after, .popover-gray-50.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: #F9FAFB; }
  .popover-gray-50.bs-popover-start .arrow::after, .popover-gray-50.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: #F9FAFB; }
  .popover-gray-100.bs-popover-top .arrow::after, .popover-gray-100.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-surface-2); }
  .popover-gray-100.bs-popover-end .arrow::after, .popover-gray-100.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-surface-2); }
  .popover-gray-100.bs-popover-bottom .arrow::after, .popover-gray-100.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-surface-2); }
  .popover-gray-100.bs-popover-start .arrow::after, .popover-gray-100.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-surface-2); }
  .popover-gray-200.bs-popover-top .arrow::after, .popover-gray-200.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-border); }
  .popover-gray-200.bs-popover-end .arrow::after, .popover-gray-200.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-border); }
  .popover-gray-200.bs-popover-bottom .arrow::after, .popover-gray-200.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-border); }
  .popover-gray-200.bs-popover-start .arrow::after, .popover-gray-200.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-border); }
  .popover-gray-300.bs-popover-top .arrow::after, .popover-gray-300.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-border-2); }
  .popover-gray-300.bs-popover-end .arrow::after, .popover-gray-300.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-border-2); }
  .popover-gray-300.bs-popover-bottom .arrow::after, .popover-gray-300.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-border-2); }
  .popover-gray-300.bs-popover-start .arrow::after, .popover-gray-300.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-border-2); }
  .popover-gray-400.bs-popover-top .arrow::after, .popover-gray-400.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-border-strong); }
  .popover-gray-400.bs-popover-end .arrow::after, .popover-gray-400.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-border-strong); }
  .popover-gray-400.bs-popover-bottom .arrow::after, .popover-gray-400.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-border-strong); }
  .popover-gray-400.bs-popover-start .arrow::after, .popover-gray-400.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-border-strong); }
  .popover-gray-500.bs-popover-top .arrow::after, .popover-gray-500.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-muted); }
  .popover-gray-500.bs-popover-end .arrow::after, .popover-gray-500.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-muted); }
  .popover-gray-500.bs-popover-bottom .arrow::after, .popover-gray-500.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-muted); }
  .popover-gray-500.bs-popover-start .arrow::after, .popover-gray-500.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-muted); }
  .popover-gray-600.bs-popover-top .arrow::after, .popover-gray-600.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: #4B5563; }
  .popover-gray-600.bs-popover-end .arrow::after, .popover-gray-600.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: #4B5563; }
  .popover-gray-600.bs-popover-bottom .arrow::after, .popover-gray-600.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: #4B5563; }
  .popover-gray-600.bs-popover-start .arrow::after, .popover-gray-600.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: #4B5563; }
  .popover-gray-700.bs-popover-top .arrow::after, .popover-gray-700.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-text-2); }
  .popover-gray-700.bs-popover-end .arrow::after, .popover-gray-700.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-text-2); }
  .popover-gray-700.bs-popover-bottom .arrow::after, .popover-gray-700.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-text-2); }
  .popover-gray-700.bs-popover-start .arrow::after, .popover-gray-700.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-text-2); }
  .popover-gray-800.bs-popover-top .arrow::after, .popover-gray-800.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-primary); }
  .popover-gray-800.bs-popover-end .arrow::after, .popover-gray-800.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-primary); }
  .popover-gray-800.bs-popover-bottom .arrow::after, .popover-gray-800.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-primary); }
  .popover-gray-800.bs-popover-start .arrow::after, .popover-gray-800.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-primary); }
  .popover-gray-900.bs-popover-top .arrow::after, .popover-gray-900.bs-popover-auto[data-popper-placement^="top"] .arrow::after {
    border-top-color: var(--cr-primary-deep); }
  .popover-gray-900.bs-popover-end .arrow::after, .popover-gray-900.bs-popover-auto[data-popper-placement^="right"] .arrow::after {
    border-right-color: var(--cr-primary-deep); }
  .popover-gray-900.bs-popover-bottom .arrow::after, .popover-gray-900.bs-popover-auto[data-popper-placement^="bottom"] .arrow::after {
    border-bottom-color: var(--cr-primary-deep); }
  .popover-gray-900.bs-popover-start .arrow::after, .popover-gray-900.bs-popover-auto[data-popper-placement^="left"] .arrow::after {
    border-left-color: var(--cr-primary-deep); }

/**
 * = Progress bars
 */
.progress-wrapper {
  position: relative; }

.progress-bar {
  box-shadow: none;
  border-radius: 0;
  height: auto; }

.progress {
  height: 6px;
  margin-bottom: 1rem;
  overflow: hidden;
  background-color: var(--cr-border);
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }

.progress-xl {
  height: 0.8rem; }

.progress-lg {
  height: 0.6rem; }

.progress-sm {
  height: 0.2rem; }

.progress-info {
  display: flex;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: space-between;
  margin-bottom: .5rem; }
  .progress-info .progress-label span {
    display: inline-block;
    color: var(--cr-primary);
    font-size: 0.875rem;
    font-weight: 500; }
  .progress-info .progress-percentage {
    text-align: right; }
    .progress-info .progress-percentage span {
      display: inline-block;
      color: var(--cr-muted);
      font-size: 0.75rem;
      font-weight: 500; }

.info-xl .progress-label span,
.info-xl .progress-percentage span {
  font-size: 0.875rem; }

.info-xl .progress-percentage {
  text-align: right; }

@keyframes animate-positive {
  0% {
    width: 0%; } }

.progress-info .bg-primary::after {
  border-top-color: var(--cr-primary); }

.progress-info .bg-secondary::after {
  border-top-color: var(--cr-secondary); }

.progress-info .bg-tertiary::after {
  border-top-color: var(--cr-tertiary); }

.progress-info .bg-success::after {
  border-top-color: var(--cr-success); }

.progress-info .bg-info::after {
  border-top-color: var(--cr-info); }

.progress-info .bg-warning::after {
  border-top-color: var(--cr-warning); }

.progress-info .bg-danger::after {
  border-top-color: var(--cr-danger); }

.progress-info .bg-white::after {
  border-top-color: #ffffff; }

.progress-info .bg-indigo::after {
  border-top-color: #4F46E5; }

.progress-info .bg-purple::after {
  border-top-color: #7C3AED; }

.progress-info .bg-yellow-100::after {
  border-top-color: #ffeed6; }

.progress-info .bg-yellow-200::after {
  border-top-color: #f5dbb8; }

.progress-info .bg-gray-50::after {
  border-top-color: #F9FAFB; }

.progress-info .bg-gray-100::after {
  border-top-color: var(--cr-surface-2); }

.progress-info .bg-gray-200::after {
  border-top-color: var(--cr-border); }

.progress-info .bg-gray-300::after {
  border-top-color: var(--cr-border-2); }

.progress-info .bg-gray-400::after {
  border-top-color: var(--cr-border-strong); }

.progress-info .bg-gray-500::after {
  border-top-color: var(--cr-muted); }

.progress-info .bg-gray-600::after {
  border-top-color: #4B5563; }

.progress-info .bg-gray-700::after {
  border-top-color: var(--cr-text-2); }

.progress-info .bg-gray-800::after {
  border-top-color: var(--cr-primary); }

.progress-info .bg-gray-900::after {
  border-top-color: var(--cr-primary-deep); }

/**
 * = Shapes
 */
.avatar-sm {
  width: 1.5rem;
  height: 1.5rem; }

.avatar-md {
  width: 3rem;
  height: 3rem; }

.avatar-lg {
  width: 4.5rem;
  height: 4.5rem; }

/**steps
 * = Accordions
 */
.step {
  position: relative;
  margin-bottom: 4rem;
  border-radius: 6px; }
  .step .step-shape {
    display: inline-flex;
    width: 7rem;
    height: 7rem;
    text-align: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center; }
    .step .step-shape i, .step .step-shape svg {
      font-size: 2rem; }
    .step .step-shape .step-number {
      position: absolute;
      font-weight: 500;
      top: -10px;
      width: 32px;
      height: 32px;
      border-width: 0.125rem;
      border-style: solid;
      line-height: 1.7; }
    .step .step-shape.bordered {
      border-width: 0.125rem;
      border-style: solid; }
      .step .step-shape.bordered .step-number {
        background-color: var(--cr-surface);
        top: -12px; }
    .step .step-shape.rounded-circle .step-number {
      margin-right: 1.275rem; }
  .step .icon-lg {
    font-size: 4.5rem; }
  .step .back-layer {
    display: flex;
    position: absolute;
    font-size: 12rem;
    z-index: 0;
    top: 0; }

.table thead th {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  border-top: 0; }

.table th {
  font-weight: 500;
  padding: 1rem; }

.table td .progress {
  height: 3px;
  width: 120px;
  margin: 0; }

.table td,
.table th {
  font-size: 0.875rem;
  white-space: nowrap; }

.table.user-table thead th {
  border-top: 0; }

.table.align-items-center td,
.table.align-items-center th {
  vertical-align: middle; }

.table .thead-dark th {
  background-color: var(--cr-primary);
  color: var(--cr-primary-ink); }
  .table .thead-dark th a {
    color: var(--cr-primary); }

.table .thead-light th {
  background-color: var(--cr-surface-2);
  color: var(--cr-text); }
  .table .thead-light th a {
    color: var(--cr-text); }

.table-hover tr {
  transition: all 0.2s ease; }
  @media (prefers-reduced-motion: reduce) {
    .table-hover tr {
      transition: none; } }

.table-flush td,
.table-flush th {
  border-left: 0;
  border-right: 0; }

.table-flush tbody tr:first-child td,
.table-flush tbody tr:first-child th {
  border-top: 0; }

.table-flush tbody tr:last-child td,
.table-flush tbody tr:last-child th {
  border-bottom: 0; }

.card .table {
  margin-bottom: 0; }
  .card .table td,
  .card .table th {
    padding-left: 1.5rem;
    padding-right: 1.5rem; }

.table [data-sort] {
  cursor: pointer; }

.table .custom-toggle {
  display: block; }

.table .thead-dark [data-sort]::after {
  content: url("data:image/svg+xml,%3csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='%231F2937'/%3e%3c/svg%3e");
  margin-left: .25rem; }

.table .thead-light [data-sort]::after {
  content: url("data:image/svg+xml,%3csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='%231F2937'/%3e%3c/svg%3e");
  margin-left: .25rem; }

/**
 * = Typography
 */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 500; }

p, ol li, ul li, .p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6; }

a, .text-action {
  color: var(--cr-primary);
  transition: all 0.2s ease; }
  a:hover, .text-action:hover {
    color: black;
    cursor: pointer; }

.lead + .btn-wrapper {
  margin-top: 3rem; }

@media (max-width: 767.98px) {
  .lead {
    font-size: 1rem; } }

.line-through {
  -webkit-text-decoration: line-through;
  text-decoration: line-through; }

.text-italic {
  font-style: italic !important; }

.description {
  font-size: 0.875rem; }

.hover\:underline:hover {
  text-decoration: underline; }

.heading {
  font-size: 2rem;
  font-weight: 500; }

@media (max-width: 767.98px) {
  .display-2 {
    font-size: 1.875rem; } }

@media (max-width: 991.98px) {
  .display-3 {
    font-size: 1.875rem; } }

@media (max-width: 575.98px) {
  .display-4 {
    font-size: 1.5rem; } }

.blockquote {
  font-style: italic; }
  @media (max-width: 767.98px) {
    .blockquote.blockquote-large {
      font-size: 1.25rem; } }
  .blockquote .blockquote-footer {
    font-size: 0.875rem;
    font-weight: 600; }
    @media (max-width: 767.98px) {
      .blockquote .blockquote-footer {
        font-size: 1.25rem; } }

.font-small {
  font-size: 0.875rem;
  font-weight: 300; }

.font-base {
  font-size: 1rem;
  font-weight: 300; }

.font-medium {
  font-size: 1.25rem;
  font-weight: 300; }

code[class*="language-"], pre[class*="language-"] {
  text-shadow: none;
  font-weight: 500; }

.text-primary, .text-primary:hover {
  color: var(--cr-primary) !important; }

.text-primary a:not(.btn), .text-primary h1, .text-primary .h1, .text-primary h2, .text-primary .h2, .text-primary h3, .text-primary .h3, .text-primary h4, .text-primary .h4, .text-primary h5, .text-primary .h5, .text-primary h6, .text-primary .h6, .text-primary .h1, .text-primary .h2, .text-primary .h3, .text-primary .h4, .text-primary .h5, .text-primary .h6, .text-primary .display-1, .text-primary .display-2, .text-primary .display-3, .text-primary .display-4 {
  color: var(--cr-primary); }

.text-primary .text-muted {
  color: rgba(31, 41, 55, 0.7) !important; }

.text-secondary, .text-secondary:hover {
  color: #f0bc74 !important; }

.text-secondary a:not(.btn), .text-secondary h1, .text-secondary .h1, .text-secondary h2, .text-secondary .h2, .text-secondary h3, .text-secondary .h3, .text-secondary h4, .text-secondary .h4, .text-secondary h5, .text-secondary .h5, .text-secondary h6, .text-secondary .h6, .text-secondary .h1, .text-secondary .h2, .text-secondary .h3, .text-secondary .h4, .text-secondary .h5, .text-secondary .h6, .text-secondary .display-1, .text-secondary .display-2, .text-secondary .display-3, .text-secondary .display-4 {
  color: #f0bc74; }

.text-secondary .text-muted {
  color: rgba(240, 188, 116, 0.7) !important; }

.text-tertiary, .text-tertiary:hover {
  color: var(--cr-tertiary) !important; }

.text-tertiary a:not(.btn), .text-tertiary h1, .text-tertiary .h1, .text-tertiary h2, .text-tertiary .h2, .text-tertiary h3, .text-tertiary .h3, .text-tertiary h4, .text-tertiary .h4, .text-tertiary h5, .text-tertiary .h5, .text-tertiary h6, .text-tertiary .h6, .text-tertiary .h1, .text-tertiary .h2, .text-tertiary .h3, .text-tertiary .h4, .text-tertiary .h5, .text-tertiary .h6, .text-tertiary .display-1, .text-tertiary .display-2, .text-tertiary .display-3, .text-tertiary .display-4 {
  color: var(--cr-tertiary); }

.text-tertiary .text-muted {
  color: rgba(49, 49, 106, 0.7) !important; }

.text-success, .text-success:hover {
  color: var(--cr-success) !important; }

.text-success a:not(.btn), .text-success h1, .text-success .h1, .text-success h2, .text-success .h2, .text-success h3, .text-success .h3, .text-success h4, .text-success .h4, .text-success h5, .text-success .h5, .text-success h6, .text-success .h6, .text-success .h1, .text-success .h2, .text-success .h3, .text-success .h4, .text-success .h5, .text-success .h6, .text-success .display-1, .text-success .display-2, .text-success .display-3, .text-success .display-4 {
  color: var(--cr-success); }

.text-success .text-muted {
  color: rgba(16, 185, 129, 0.7) !important; }

.text-info, .text-info:hover {
  color: var(--cr-info) !important; }

.text-info a:not(.btn), .text-info h1, .text-info .h1, .text-info h2, .text-info .h2, .text-info h3, .text-info .h3, .text-info h4, .text-info .h4, .text-info h5, .text-info .h5, .text-info h6, .text-info .h6, .text-info .h1, .text-info .h2, .text-info .h3, .text-info .h4, .text-info .h5, .text-info .h6, .text-info .display-1, .text-info .display-2, .text-info .display-3, .text-info .display-4 {
  color: var(--cr-info); }

.text-info .text-muted {
  color: rgba(35, 97, 206, 0.7) !important; }

.text-warning, .text-warning:hover {
  color: var(--cr-warning) !important; }

.text-warning a:not(.btn), .text-warning h1, .text-warning .h1, .text-warning h2, .text-warning .h2, .text-warning h3, .text-warning .h3, .text-warning h4, .text-warning .h4, .text-warning h5, .text-warning .h5, .text-warning h6, .text-warning .h6, .text-warning .h1, .text-warning .h2, .text-warning .h3, .text-warning .h4, .text-warning .h5, .text-warning .h6, .text-warning .display-1, .text-warning .display-2, .text-warning .display-3, .text-warning .display-4 {
  color: var(--cr-warning); }

.text-warning .text-muted {
  color: rgba(251, 169, 24, 0.7) !important; }

.text-danger, .text-danger:hover {
  color: var(--cr-danger) !important; }

.text-danger a:not(.btn), .text-danger h1, .text-danger .h1, .text-danger h2, .text-danger .h2, .text-danger h3, .text-danger .h3, .text-danger h4, .text-danger .h4, .text-danger h5, .text-danger .h5, .text-danger h6, .text-danger .h6, .text-danger .h1, .text-danger .h2, .text-danger .h3, .text-danger .h4, .text-danger .h5, .text-danger .h6, .text-danger .display-1, .text-danger .display-2, .text-danger .display-3, .text-danger .display-4 {
  color: var(--cr-danger); }

.text-danger .text-muted {
  color: rgba(225, 29, 72, 0.7) !important; }

.text-white, .text-white:hover {
  color: var(--cr-primary-ink) !important; }

.text-white a:not(.btn), .text-white h1, .text-white .h1, .text-white h2, .text-white .h2, .text-white h3, .text-white .h3, .text-white h4, .text-white .h4, .text-white h5, .text-white .h5, .text-white h6, .text-white .h6, .text-white .h1, .text-white .h2, .text-white .h3, .text-white .h4, .text-white .h5, .text-white .h6, .text-white .display-1, .text-white .display-2, .text-white .display-3, .text-white .display-4 {
  color: var(--cr-primary-ink); }

.text-white .text-muted {
  color: rgba(255, 255, 255, 0.7) !important; }

.text-gray-50, .text-gray-50:hover {
  color: #F9FAFB !important; }

.text-gray-50 a:not(.btn), .text-gray-50 h1, .text-gray-50 .h1, .text-gray-50 h2, .text-gray-50 .h2, .text-gray-50 h3, .text-gray-50 .h3, .text-gray-50 h4, .text-gray-50 .h4, .text-gray-50 h5, .text-gray-50 .h5, .text-gray-50 h6, .text-gray-50 .h6, .text-gray-50 .h1, .text-gray-50 .h2, .text-gray-50 .h3, .text-gray-50 .h4, .text-gray-50 .h5, .text-gray-50 .h6, .text-gray-50 .display-1, .text-gray-50 .display-2, .text-gray-50 .display-3, .text-gray-50 .display-4 {
  color: #F9FAFB; }

.text-gray-50 .text-muted {
  color: rgba(249, 250, 251, 0.7) !important; }

.text-gray-100, .text-gray-100:hover {
  color: var(--cr-surface-2) !important; }

.text-gray-100 a:not(.btn), .text-gray-100 h1, .text-gray-100 .h1, .text-gray-100 h2, .text-gray-100 .h2, .text-gray-100 h3, .text-gray-100 .h3, .text-gray-100 h4, .text-gray-100 .h4, .text-gray-100 h5, .text-gray-100 .h5, .text-gray-100 h6, .text-gray-100 .h6, .text-gray-100 .h1, .text-gray-100 .h2, .text-gray-100 .h3, .text-gray-100 .h4, .text-gray-100 .h5, .text-gray-100 .h6, .text-gray-100 .display-1, .text-gray-100 .display-2, .text-gray-100 .display-3, .text-gray-100 .display-4 {
  color: var(--cr-surface-2); }

.text-gray-100 .text-muted {
  color: rgba(242, 244, 246, 0.7) !important; }

.text-gray-200, .text-gray-200:hover {
  color: var(--cr-border) !important; }

.text-gray-200 a:not(.btn), .text-gray-200 h1, .text-gray-200 .h1, .text-gray-200 h2, .text-gray-200 .h2, .text-gray-200 h3, .text-gray-200 .h3, .text-gray-200 h4, .text-gray-200 .h4, .text-gray-200 h5, .text-gray-200 .h5, .text-gray-200 h6, .text-gray-200 .h6, .text-gray-200 .h1, .text-gray-200 .h2, .text-gray-200 .h3, .text-gray-200 .h4, .text-gray-200 .h5, .text-gray-200 .h6, .text-gray-200 .display-1, .text-gray-200 .display-2, .text-gray-200 .display-3, .text-gray-200 .display-4 {
  color: var(--cr-border); }

.text-gray-200 .text-muted {
  color: rgba(229, 231, 235, 0.7) !important; }

.text-gray-300, .text-gray-300:hover {
  color: var(--cr-border-2) !important; }

.text-gray-300 a:not(.btn), .text-gray-300 h1, .text-gray-300 .h1, .text-gray-300 h2, .text-gray-300 .h2, .text-gray-300 h3, .text-gray-300 .h3, .text-gray-300 h4, .text-gray-300 .h4, .text-gray-300 h5, .text-gray-300 .h5, .text-gray-300 h6, .text-gray-300 .h6, .text-gray-300 .h1, .text-gray-300 .h2, .text-gray-300 .h3, .text-gray-300 .h4, .text-gray-300 .h5, .text-gray-300 .h6, .text-gray-300 .display-1, .text-gray-300 .display-2, .text-gray-300 .display-3, .text-gray-300 .display-4 {
  color: var(--cr-border-2); }

.text-gray-300 .text-muted {
  color: rgba(209, 213, 219, 0.7) !important; }

.text-gray-400, .text-gray-400:hover {
  color: var(--cr-border-strong) !important; }

.text-gray-400 a:not(.btn), .text-gray-400 h1, .text-gray-400 .h1, .text-gray-400 h2, .text-gray-400 .h2, .text-gray-400 h3, .text-gray-400 .h3, .text-gray-400 h4, .text-gray-400 .h4, .text-gray-400 h5, .text-gray-400 .h5, .text-gray-400 h6, .text-gray-400 .h6, .text-gray-400 .h1, .text-gray-400 .h2, .text-gray-400 .h3, .text-gray-400 .h4, .text-gray-400 .h5, .text-gray-400 .h6, .text-gray-400 .display-1, .text-gray-400 .display-2, .text-gray-400 .display-3, .text-gray-400 .display-4 {
  color: var(--cr-border-strong); }

.text-gray-400 .text-muted {
  color: rgba(156, 163, 175, 0.7) !important; }

.text-gray-500, .text-gray-500:hover {
  color: var(--cr-muted) !important; }

.text-gray-500 a:not(.btn), .text-gray-500 h1, .text-gray-500 .h1, .text-gray-500 h2, .text-gray-500 .h2, .text-gray-500 h3, .text-gray-500 .h3, .text-gray-500 h4, .text-gray-500 .h4, .text-gray-500 h5, .text-gray-500 .h5, .text-gray-500 h6, .text-gray-500 .h6, .text-gray-500 .h1, .text-gray-500 .h2, .text-gray-500 .h3, .text-gray-500 .h4, .text-gray-500 .h5, .text-gray-500 .h6, .text-gray-500 .display-1, .text-gray-500 .display-2, .text-gray-500 .display-3, .text-gray-500 .display-4 {
  color: var(--cr-muted); }

.text-gray-500 .text-muted {
  color: rgba(107, 114, 128, 0.7) !important; }

.text-gray-600, .text-gray-600:hover {
  color: #4B5563 !important; }

.text-gray-600 a:not(.btn), .text-gray-600 h1, .text-gray-600 .h1, .text-gray-600 h2, .text-gray-600 .h2, .text-gray-600 h3, .text-gray-600 .h3, .text-gray-600 h4, .text-gray-600 .h4, .text-gray-600 h5, .text-gray-600 .h5, .text-gray-600 h6, .text-gray-600 .h6, .text-gray-600 .h1, .text-gray-600 .h2, .text-gray-600 .h3, .text-gray-600 .h4, .text-gray-600 .h5, .text-gray-600 .h6, .text-gray-600 .display-1, .text-gray-600 .display-2, .text-gray-600 .display-3, .text-gray-600 .display-4 {
  color: #4B5563; }

.text-gray-600 .text-muted {
  color: rgba(75, 85, 99, 0.7) !important; }

.text-gray-700, .text-gray-700:hover {
  color: var(--cr-text-2) !important; }

.text-gray-700 a:not(.btn), .text-gray-700 h1, .text-gray-700 .h1, .text-gray-700 h2, .text-gray-700 .h2, .text-gray-700 h3, .text-gray-700 .h3, .text-gray-700 h4, .text-gray-700 .h4, .text-gray-700 h5, .text-gray-700 .h5, .text-gray-700 h6, .text-gray-700 .h6, .text-gray-700 .h1, .text-gray-700 .h2, .text-gray-700 .h3, .text-gray-700 .h4, .text-gray-700 .h5, .text-gray-700 .h6, .text-gray-700 .display-1, .text-gray-700 .display-2, .text-gray-700 .display-3, .text-gray-700 .display-4 {
  color: var(--cr-text-2); }

.text-gray-700 .text-muted {
  color: rgba(55, 65, 81, 0.7) !important; }

.text-gray-800, .text-gray-800:hover {
  color: var(--cr-primary) !important; }

.text-gray-800 a:not(.btn), .text-gray-800 h1, .text-gray-800 .h1, .text-gray-800 h2, .text-gray-800 .h2, .text-gray-800 h3, .text-gray-800 .h3, .text-gray-800 h4, .text-gray-800 .h4, .text-gray-800 h5, .text-gray-800 .h5, .text-gray-800 h6, .text-gray-800 .h6, .text-gray-800 .h1, .text-gray-800 .h2, .text-gray-800 .h3, .text-gray-800 .h4, .text-gray-800 .h5, .text-gray-800 .h6, .text-gray-800 .display-1, .text-gray-800 .display-2, .text-gray-800 .display-3, .text-gray-800 .display-4 {
  color: var(--cr-primary); }

.text-gray-800 .text-muted {
  color: rgba(31, 41, 55, 0.7) !important; }

.text-gray-900, .text-gray-900:hover {
  color: var(--cr-primary-deep) !important; }

.text-gray-900 a:not(.btn), .text-gray-900 h1, .text-gray-900 .h1, .text-gray-900 h2, .text-gray-900 .h2, .text-gray-900 h3, .text-gray-900 .h3, .text-gray-900 h4, .text-gray-900 .h4, .text-gray-900 h5, .text-gray-900 .h5, .text-gray-900 h6, .text-gray-900 .h6, .text-gray-900 .h1, .text-gray-900 .h2, .text-gray-900 .h3, .text-gray-900 .h4, .text-gray-900 .h5, .text-gray-900 .h6, .text-gray-900 .display-1, .text-gray-900 .display-2, .text-gray-900 .display-3, .text-gray-900 .display-4 {
  color: var(--cr-primary-deep); }

.text-gray-900 .text-muted {
  color: rgba(17, 24, 39, 0.7) !important; }


article p, article ul, article ol, article blockquote {
  margin-bottom: 20px; }

article p, article ul li, article ol li {
  font-size: 1.2rem; }

article h1, article .h1, article h2, article .h2, article h3, article .h3, article h4, article .h4, article h5, article .h5, article h6, article .h6,
article .h1, article .h2, article .h3, article .h4, article .h5, article .h6 {
  margin-bottom: 30px; }

.folder-structure li {
  font-size: 1.2rem; }

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.list-group-timeline .list-group-item {
  position: relative; }
  .list-group-timeline .list-group-item .col-auto {
    z-index: 999; }
  .list-group-timeline .list-group-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 4px;
    height: 100%;
    border-left: 2px solid var(--cr-border); }
  .list-group-timeline .list-group-item::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 8px;
    width: 10px;
    height: 10px;
    margin-top: 0.425rem;
    margin-left: -0.5rem;
    border: 2px solid var(--cr-border);
    background: var(--cr-surface);
    border-radius: 0.5rem; }

.tooltip-inner {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }

/**
 * = Datepickers
 */
.datepicker .datepicker-cell.selected,
.datepicker .datepicker-cell.selected:hover {
  background: var(--cr-primary); }

/* =========================================================================
   15 · PHASE 0 — Consolidated utilities & components
   -------------------------------------------------------------------------
   Promoted from inline <style> blocks across primary navigation pages.
   See dsm_new/templates/layouts/audit/ for per-page provenance. Use these
   in markup; do not redeclare in page <style> blocks (they leak across
   boosted navigation via head-support).
   ========================================================================= */

/* --- Cursor variants (.cursor-pointer already at L269) ----------------- */
.cursor-help        { cursor: help; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer            { cursor: pointer; }

/* --- Layout / visibility utilities ------------------------------------ */
.text-small         { font-size: 0.875rem; font-weight: 400; }
.clamp-2            { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3            { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.scroll-y-md        { max-height: 400px; overflow-y: auto; }
.scroll-y-lg        { max-height: 66dvh; overflow-y: auto; }
.pin-top-right      { position: absolute; top: .5rem; right: .5rem; }
.rotate-90          { transform: rotate(90deg); }
.no-left-border     { border-left: 0; }
.no-right-border    { border-right: 0; }

/* --- Image utilities --------------------------------------------------- */
.img-thumb-sm       { max-height: 50px;  width: auto; }
.img-thumb-md       { max-height: 150px; width: auto; }

/* --- Surface utility --------------------------------------------------- */
.bg-xero-soft       { background-color: var(--light-blue-highlight-color); }

/* --- State classes (replace JS element.style.* writes) ----------------- */
.is-removing,
.is-fading-out {
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  pointer-events: none;
}

/* --- Filter-bar input groups ------------------------------------------ */
.input-group-filter      { flex: 1 1 220px; min-width: 220px; max-width: 350px; }
.input-group-filter--sm  { flex: 1 1 180px; min-width: 180px; }

/* --- Fixed-width input-group prefix ----------------------------------- */
.input-group-text--fixed { min-width: 6.25rem; justify-content: center; }

/* --- Empty-state block ------------------------------------------------ */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--cr-muted);
}
.empty-state__illustration {
  max-width: 280px;
  max-height: 320px;
  margin: 0 auto 1.25rem;
  opacity: 0.85;
}

/* --- Empty-state: text + animated SVG illustration -------------------- */
.empty-state__illustration--svg {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem;
}
.empty-state__title {
  font-weight: 600;
  color: var(--cr-text);
  margin-bottom: .5rem;
}
.empty-state__text {
  font-size: .95rem;
  line-height: 1.55;
  max-width: 420px;
  margin: 0 auto 1.25rem;
}
.empty-state__hint {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--cr-info-ink);
  background: color-mix(in srgb, var(--cr-info) 8%, var(--cr-surface));
  border: 1px solid color-mix(in srgb, var(--cr-info) 20%, transparent);
  border-radius: var(--r-pill);
  padding: .4rem 1rem;
}
.empty-state__hint i { animation: esArrow 1.4s var(--ease) infinite; }

/* Shared illustration primitives */
.es-bg            { fill: var(--cr-surface-2); }
.es-paper         { fill: var(--cr-surface); stroke: var(--cr-border); stroke-width: 2; }
.es-line          { fill: var(--cr-surface-2); }
.es-coin          { fill: var(--cr-success); }
.es-dot           { fill: var(--cr-muted); opacity: .45; }
.es-accent        { fill: color-mix(in srgb, var(--cr-info) 10%, transparent); stroke: var(--cr-info); stroke-width: 2; }
.es-accent-stroke { fill: none; stroke: var(--cr-info); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Illustration animations */
.es-float        { transform-box: fill-box; transform-origin: center; animation: esFloat 3s var(--ease) infinite; }
.es-float--delay { animation-delay: .5s; }
.es-pulse        { transform-box: fill-box; transform-origin: center; animation: esPulse 2.2s var(--ease) infinite; }

@keyframes esFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes esPulse { 0%, 100% { stroke-opacity: .9; opacity: 1; } 50% { stroke-opacity: .35; opacity: .75; } }
@keyframes esArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .es-float, .es-pulse, .empty-state__hint i { animation: none; }
}

/* Active Project Quick-Select: hide the empty state once any card renders.
   Pure CSS so it works on full load and hx-boost navigation alike. */
.project-card ~ #project-quick-select-empty { display: none; }

/* Invoicing batches (decorative + consultancy): the panel reads its own
   contents, so saving the last invoice on the page reveals the "all caught up"
   state instead of leaving a blank panel. `.post-invoice` is the Save button on
   every batch card, and dsmDismiss takes the card out of the DOM, so the
   :has() re-evaluates the moment the last one goes. Pure CSS, so it holds on
   a full load, an hx-boost swap and a mid-page dismissal alike. */
.invoice-batch:not(:has(.post-invoice))            { display: none; }
.invoice-batches:has(.post-invoice) .invoice-batch__empty { display: none; }
.invoice-batches:not(:has(.post-invoice)) .invoice-batch__note { display: none; }

/* --- Icon tile (glyph in coloured circle) ----------------------------- */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cr-surface-2);
}
.icon-tile--sm { width: 2.5rem;  height: 2.5rem;  font-size: 1rem;     }
.icon-tile--md { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; }
.icon-tile--lg { width: 4.5rem;  height: 4.5rem;  font-size: 1.75rem;  }

/* --- Logo preview ----------------------------------------------------- */
.logo-preview {
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cr-surface-2);
  border: 1px solid var(--cr-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- Drag-handle + list-row pattern ----------------------------------- */
.drag-handle {
  cursor: grab;
  color: var(--cr-muted);
  padding: 0 .5rem;
}
.drag-handle:active { cursor: grabbing; }

.list-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.list-row__action--reveal {
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.list-row:hover .list-row__action--reveal { opacity: 1; }

/* --- SortableJS theming ----------------------------------------------- */
.sortable-ghost  { background: var(--cr-surface-2); opacity: .7; }
.sortable-chosen { box-shadow: var(--sh-md); }

/* --- Page header ------------------------------------------------------
   There is no page-header band. A gradient one used to be declared here and
   was used by nothing, while ~39 pages hand-rolled the real thing: breadcrumb,
   an h1.h4, a one-line lede. That pattern is now the shared component
   includes/page-header.html, which needs no CSS of its own — it is built from
   Bootstrap utilities and the type scale. */

/* --- Expandable summary row ------------------------------------------- */
.expandable-row {
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.summary-details           { display: none; }
.summary-details.expanded  { display: block; }

/* --- Selected card ---------------------------------------------------- */
/* Affirmative selection state (e.g. worksheets included in a new proposal).
   Tone-matched accent: cool uses the slate primary, warm uses the gold
   secondary so the highlight feels native to each palette. */
.card.selected {
  border-color: var(--cr-primary);
  box-shadow: 0 0 0 1px var(--cr-primary), var(--sh-md);
  background-color: var(--cr-primary-soft);
}
[data-cr-tone="warm"] .card.selected {
  border-color: var(--cr-secondary-deep);
  box-shadow: 0 0 0 1px var(--cr-secondary-deep), var(--sh-md);
  background-color: var(--cr-secondary-soft);
}

/* --- Summary order card ----------------------------------------------- */
/* Same soft-elevation treatment as the collapse-card family, with a
   status-tinted left accent. Colours mirror status_to_color() in
   base_new.js, keyed off the worksheet's item_status id. */
.summary-card {
  border: 1px solid var(--cr-border);
  border-left: 3px solid var(--cr-border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.summary-card:hover { border-color: var(--cr-border-strong); box-shadow: var(--sh-sm); }

.summary-card[data-status="1"] { border-left-color: var(--cr-primary); }   /* Source */
.summary-card[data-status="2"] { border-left-color: var(--cr-info); }   /* Estimate */
.summary-card[data-status="3"] { border-left-color: var(--cr-warning); }      /* Purchase Order */
.summary-card[data-status="4"] { border-left-color: var(--cr-success); }   /* Completed */
.summary-card[data-status="5"] { border-left-color: var(--cr-danger); }    /* On Hold */
.summary-card[data-status="6"] { border-left-color: var(--cr-secondary); } /* In Storage */
.summary-card[data-status="7"] { border-left-color: var(--cr-danger); }    /* Cancelled */

/* --- Payment flow timeline (summary card details) ---------------------- */
/* Full-width stepper explaining payments_outstanding: client money in,
   commission and supplier payments out, netting to the terminal figure.
   Dot hue follows the entity (--cr-client / --cr-supplier; commission is
   component-local — no violet token exists). Amounts stay in text ink;
   the +/− sign carries direction so colour never works alone. */
.payment-flow {
  --pf-commission: #6d4fc4;
  margin: 0 0.75rem;
  padding: 0.75rem 0.25rem 1rem;
  border-top: 1px solid var(--cr-border);
}
.pf-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}
.pf-title,
.pf-label,
.pf-net-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cr-muted);
  line-height: 1.2;
}
.pf-track {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  overflow-x: auto;
}
.pf-stage {
  flex: 0 1 auto;
  min-width: 6.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pf-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--cr-border-strong);
  background: var(--cr-surface);
  margin-bottom: 0.375rem;
  flex: none;
}
.pf-stage.is-done .pf-dot--client     { background: var(--cr-client);     border-color: var(--cr-client); }
.pf-stage.is-done .pf-dot--commission { background: var(--pf-commission); border-color: var(--pf-commission); }
.pf-stage.is-done .pf-dot--supplier   { background: var(--cr-supplier);   border-color: var(--cr-supplier); }
.pf-label  { margin-bottom: 0.125rem; }
.pf-amount {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--cr-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}
.pf-stage:not(.is-done) .pf-amount { color: var(--cr-placeholder); font-weight: 600; }
.pf-sub {
  font-size: 0.6875rem;
  color: var(--cr-muted);
  line-height: 1.4;
}
/* Connector sits on the dot's horizontal centreline (12px dot → 5px top) */
.pf-link {
  flex: 1 1 1.5rem;
  min-width: 0.75rem;
  height: 2px;
  border-radius: 1px;
  background: var(--cr-border-2);
  margin-top: 5px;
}
/* Final connector reads as "=" — the stages sum to the net figure */
.pf-link--equals {
  height: 8px;
  background: none;
  border-top: 2px solid var(--cr-border-strong);
  border-bottom: 2px solid var(--cr-border-strong);
  border-radius: 0;
  margin-top: 2px;
}
.pf-net {
  flex: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 1rem;
  background: var(--cr-primary-soft);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
}
.pf-net-note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pf-net-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cr-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}
.pf-net.is-negative { background: var(--cr-danger-soft); }
.pf-net.is-negative .pf-net-amount { color: var(--cr-danger); }

/* --- Collapsible panel ------------------------------------------------ */
.collapse-panel             { overflow: hidden; transition: max-height var(--t-slow) var(--ease); }
.collapse-panel.is-closed   { max-height: 0; }
.collapse-panel.is-open     { max-height: 2000px; }

/* --- Floating circular icon button ------------------------------------ */
.btn-floating-circle {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-sm);
}

/* --- Glow shadows (danger / warning) ---------------------------------- */
.shadow-glow-danger  { box-shadow: 0 0 0 .2rem rgba(var(--cr-danger-rgb,  225,  29,  72), .25); }
.shadow-glow-warning { box-shadow: 0 0 0 .2rem rgba(var(--cr-warning-rgb, 251, 169,  24), .25); }

/* --- Notify-toast z-index --------------------------------------------- */
.notify-toast { z-index: 1080; }

/* --- Field clamping --------------------------------------------------- */
.field-clamp-sm { min-width: 120px; max-width: 180px; }
.field-clamp-md { min-width: 180px; max-width: 260px; }

/* --- Table modifiers -------------------------------------------------- */
.table-compact td,
.table-compact th { padding: .375rem .5rem; }
.table-compact td { white-space: normal; }

.table-roomy td,
.table-roomy th   { padding: .9rem .75rem; }

.table-sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cr-surface);
}

.col-w-160 { width: 10rem;    }
.col-w-180 { width: 11.25rem; }

/* --- Progress bar slim variant ---------------------------------------- */
.progress-thin { height: 8px; }

/* --- Tag inverse variant ---------------------------------------------- */
.tag-item--inverse {
  background: var(--cr-primary);
  color: var(--cr-primary-ink);
}
.tag-item--inverse .tag-edit-button { color: var(--cr-primary-ink); }

/* --- Email-template list --------------------------------------------- */
.email-template-list {
  background: var(--cr-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 1.5rem 1rem;
  margin-bottom: 2rem;
}
.email-template-list .template-item {
  border-bottom: 1px solid var(--cr-border);
  padding: .75rem 0;
  transition: background var(--t-base) var(--ease);
}
.email-template-list .template-item:last-child { border-bottom: 0; }
.email-template-list .template-item:hover      { background: var(--cr-surface-2); }

/* --- Dynamic-content placeholder chip --------------------------------- */
.badge-dynamic-content {
  display: inline-block;
  padding: .35em 1em;
  margin: 0 .5em .5em 0;
  font-size: .8em;
  font-weight: 600;
  color: var(--cr-tertiary);
  background: color-mix(in srgb, var(--cr-tertiary) 12%, var(--cr-surface));
  border: 1px solid color-mix(in srgb, var(--cr-tertiary) 30%, transparent);
  border-radius: var(--r-pill);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-base) var(--ease),
              color      var(--t-base) var(--ease);
}
.badge-dynamic-content:hover {
  background: var(--cr-tertiary);
  color: var(--cr-primary-ink);
}

/* --- Supplier-invoice-entry layout ------------------------------------ */
.summary-row__label       { width: 8rem; flex-shrink: 0; }
.line-item-row__cell      { padding: .25rem .5rem; }
.line-item-row__cell--xl  { flex: 3 1 300px; }
.line-item-row__cell--lg  { flex: 2 1 250px; }
.line-item-row__cell--md  { flex: 1 1 200px; }
.line-item-row__cell--action {
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Flex-grow utilities --------------------------------------------- */
.flex-1 { flex: 1 1 0%; }
.flex-3 { flex: 3 1 0%; }

/* --- Library page ---------------------------------------------------- */
.library-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.library-category {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.library-item {
  width: 100%;
  margin-bottom: 1.25rem;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  cursor: grab;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.library-item:hover {
  border-color: var(--cr-border-strong);
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}
.library-item:active { cursor: grabbing; }

/* Inset product image — neutral panel, whole item shown (not cropped) */
.library-item-img {
  position: relative;
  aspect-ratio: 4 / 3;
  width: calc(100% - 1rem);
  margin: 0.5rem auto 0;
  border-radius: var(--r-sm);
  background: var(--cr-surface-2);
  overflow: hidden;
  flex: none;
}
.library-item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.library-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.625rem 0.75rem 0.75rem;
}
.library-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.125rem;
}
.library-item-tags .tag-item {
  font-size: 0.6875rem;
  padding: 0.0625rem 0.4375rem;
}
.library-item-supplier {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.library-item-desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--cr-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.library-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.library-item-cost {
  font-family: var(--cr-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cr-text);
}
.library-item-actions {
  display: flex;
  gap: 0.375rem;
  flex: none;
}

/* Sub-components nested inside a parent library item's card */
.library-item-children {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--cr-border);
}
.library-item-children-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--cr-muted);
}
.library-item-children-toggle:hover {
  color: var(--cr-text);
}
.library-item-children-toggle span {
  margin-right: auto;
}
.library-item-children ul {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.library-item-children li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0 0.25rem 0.875rem;
  font-size: 0.75rem;
}
.library-item-children li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0;
  bottom: 50%;
  width: 0.5rem;
  border-left: 1px solid var(--cr-border);
  border-bottom: 1px solid var(--cr-border);
  border-bottom-left-radius: 0.25rem;
}
.library-child-desc {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cr-text);
}
.library-child-cost {
  font-family: var(--cr-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cr-muted);
}

@media (min-width: 576px)  { .library-item { width: calc(50%     - 0.625rem); } }
@media (min-width: 768px)  { .library-item { width: calc(33.333% - 0.625rem); } }
@media (min-width: 992px)  { .library-item { width: calc(25%     - 0.625rem); } }
@media (min-width: 1200px) { .library-item { width: calc(20%     - 0.625rem); } }
@media (min-width: 1400px) { .library-item { width: calc(16.666% - 0.625rem); } }
@media (min-width: 2000px) { .library-item { width: calc(12.5%   - 0.625rem); } }

/* --- Proposal generate — worksheet cards ------------------------------- */
/* Same visual language as .library-item; composes with .card so the
   .card.selected inclusion state keeps working. */
.proposal-ws-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.proposal-ws-card {
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.proposal-ws-card:hover {
  border-color: var(--cr-border-strong);
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}

/* Inset worksheet image — neutral panel, whole item shown (not cropped) */
.proposal-ws-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  width: calc(100% - 1rem);
  margin: 0.5rem auto 0;
  border-radius: var(--r-sm);
  background: var(--cr-surface-2);
  overflow: hidden;
  flex: none;
}
.proposal-ws-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.proposal-ws-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.625rem 0.75rem 0.75rem;
}
.proposal-ws-card-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.proposal-ws-card-deposit {
  margin: 0;
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--cr-muted);
}
.proposal-ws-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.proposal-ws-card-include {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.8125rem;
  cursor: pointer;
}

@media (min-width: 576px)  { .proposal-ws-card { width: calc(50%     - 0.625rem); } }
@media (min-width: 768px)  { .proposal-ws-card { width: calc(33.333% - 0.625rem); } }
@media (min-width: 992px)  { .proposal-ws-card { width: calc(25%     - 0.625rem); } }
@media (min-width: 1200px) { .proposal-ws-card { width: calc(20%     - 0.625rem); } }
@media (min-width: 1400px) { .proposal-ws-card { width: calc(16.666% - 0.625rem); } }
@media (min-width: 2000px) { .proposal-ws-card { width: calc(12.5%   - 0.625rem); } }

/* Dragula mirror — global affordance for drag/drop pages */
.gu-mirror { cursor: grabbing; opacity: 0.8; }

/* Inline form spinner */
.spinner-inline { height: 1.125rem; vertical-align: middle; }

/* Dropzone size variant (Library item form) */
.dropzone-sm { min-height: 9.375rem; }

/* --- Tier B additions -------------------------------------------------- */

/* Tight checkbox alignment inside an input-group (Timesheets billable col) */
.input-group .form-check-input { margin: 0; }

/* Table-wrap modifier — long-content cells that should not nowrap.
   Pair with .table to override canonical .table td nowrap. */
.table-wrap td,
.table-wrap th {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Small action button for card-BODY rows (worksheet lines, PDF/review links).
   Card-header action buttons use .btn-icon.btn-sm instead — a true 2rem square —
   so the header rows line up across proposals, POs and invoices. */
.btn-square-sm { min-width: 2.25rem; }

/* --- Dismissal: the one way a card or row leaves a list -----------------
   Driven by window.dsmDismiss() in includes/scripts.html — never hand-roll
   a .remove() behind a hand-picked setTimeout, and never toggle these
   classes directly. The helper measures the element, adds .dsm-dismiss,
   then .is-out on the next frame, and reads --dsm-dismiss-total back off
   the element for its own timing, so the durations here are the single
   source of truth for both the look and the removal.

   Two gestures run in sequence, overlapping just enough to read as one.
   First the card *lifts* — a keyframe in three beats, so it plays as a
   gesture rather than a fade: it presses in (anticipation — the beat that
   reads as "your click landed"), releases, then rises away, shrinking,
   fading and tilting a half-degree off square as it goes. Then its box
   *folds* — height, block margins, block padding and block borders all run
   to zero, and the neighbours slide up to close the gap it left.

   The order matters, and the delay is the whole design. Folding clips the
   card against its own `overflow: hidden`, so a fold that bites while the
   card is still solid guillotines it from the bottom instead of letting it
   leave. The card is nearly gone before the gap starts closing, and the two
   still overlap by ~160ms, so the eye follows one continuous movement.
   Neighbours need no help — the box shrinks in normal flow, so nothing
   below this element is measured, animated or touched. */
.dsm-dismiss {
  --dsm-dismiss-lift:  400ms;
  --dsm-dismiss-fold:  300ms;
  --dsm-dismiss-delay: 240ms;
  --dsm-dismiss-total: 540ms;   /* max(lift, delay + fold) — read by the JS */

  /* The gap closes on its own curve: --ease is a hard decelerate that would
     dump most of the distance in the first 80ms and read as a snap. */
  --dsm-dismiss-fold-ease: cubic-bezier(0.45, 0, 0.15, 1);

  /* The fold shrinks the box past its own content, which would otherwise
     spill; !important because cards and list rows arrive with their own. */
  overflow: hidden !important;
  pointer-events: none;
  transform-origin: 50% 0;      /* shrink toward the fold, not away from it */
  animation: dsm-dismiss-lift var(--dsm-dismiss-lift) var(--ease) forwards;
  transition:
    height            var(--dsm-dismiss-fold) var(--dsm-dismiss-fold-ease) var(--dsm-dismiss-delay),
    margin-top        var(--dsm-dismiss-fold) var(--dsm-dismiss-fold-ease) var(--dsm-dismiss-delay),
    margin-bottom     var(--dsm-dismiss-fold) var(--dsm-dismiss-fold-ease) var(--dsm-dismiss-delay),
    padding-top       var(--dsm-dismiss-fold) var(--dsm-dismiss-fold-ease) var(--dsm-dismiss-delay),
    padding-bottom    var(--dsm-dismiss-fold) var(--dsm-dismiss-fold-ease) var(--dsm-dismiss-delay),
    border-top-width  var(--dsm-dismiss-fold) var(--dsm-dismiss-fold-ease) var(--dsm-dismiss-delay),
    border-bottom-width var(--dsm-dismiss-fold) var(--dsm-dismiss-fold-ease) var(--dsm-dismiss-delay);
}

/* The fold's end state. !important so it beats the measured start height the
   helper writes inline — that inline value is what the transition runs from. */
.dsm-dismiss.is-out {
  height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

/* Per-stop timing functions: the press eases in and out on its own curve, the
   release decelerates off a fast start. A single curve across all three stops
   flattens the press into the release and it reads as a plain fade again. */
@keyframes dsm-dismiss-lift {
  0%   { opacity: 1; transform: none;
         animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
  25%  { opacity: 1; transform: scale(0.975) translateY(3px);
         animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  100% { opacity: 0; transform: scale(0.92) translateY(-18px) rotate(-0.5deg); }
}

/* A table row cannot be folded — a <tr> ignores an explicit height once its
   cells have content — so it only lifts, and its total is the lift alone.
   The helper skips .is-out for these. */
tr.dsm-dismiss { --dsm-dismiss-total: var(--dsm-dismiss-lift); }

@media (prefers-reduced-motion: reduce) {
  .dsm-dismiss {
    --dsm-dismiss-lift:  160ms;
    --dsm-dismiss-fold:  1ms;
    --dsm-dismiss-delay: 159ms;
    --dsm-dismiss-total: 180ms;
    transform-origin: initial;
    animation-name: dsm-dismiss-fade;
  }
}
@keyframes dsm-dismiss-fade { to { opacity: 0; } }

/* form-floating min-width variants (Budget Quick-Create inline strip) */
.form-floating-sm { min-width: 9rem;     }
.form-floating-md { min-width: 11.25rem; }
.form-floating-lg { min-width: 14rem;    }

/* Choices.js select inside a form-floating wrapper: the .choices div replaces
   the select as the direct child, so Bootstrap's `.form-select ~ label` float
   rule no longer matches and the label would overlap the control. */
.form-floating > .choices ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .choices .choices__inner {
  min-height: 3.625rem;
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

/* Constrained inline form-select (Projects Review quick-pick) */
.form-select-narrow { max-width: 25rem; }

/* Chevron-toggle button (Projects Review collapse rows) */
.chevron-toggle-btn .chevron-icon {
  display: inline-block;
  transition: transform var(--t-base) var(--ease);
  transform: rotate(0deg);
}
.chevron-toggle-btn:not(.collapsed) .chevron-icon { transform: rotate(180deg); }
.chevron-toggle-btn:focus {
  outline: none;
  box-shadow: var(--cr-focus-ring);
}

/* Filter dropdown (Projects Review multi-checkbox status filter) */
.filter-dropdown .dropdown-menu {
  min-width: 14rem;
  max-height: 25rem;
  overflow-y: auto;
  z-index: 1050;
  margin-top: 0.5rem;
  padding: 0.75rem;
}
.filter-dropdown .form-check { margin-bottom: 0.25rem; }
.filter-dropdown .svg-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.15em;
  margin-right: 0.35em;
}

/* In-table anchors — palette-driven, replaces hard-coded darkblue */
.table a:not(.btn) {
  color: var(--cr-primary-deep);
  text-decoration: none;
}
.table a:not(.btn):hover { text-decoration: underline; }

/* Table-compact thead variant (Projects Review uppercase dense header) */
.table-compact thead th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* --- Tier C additions -------------------------------------------------- */

/* Worksheet nav-row 25/25/auto split */
.flex-basis-25 { flex: 0 0 25%; }

/* Wider search-group modifier (Contact Search) */
.search-group.search-group--wide { max-width: 31.25rem; }

/* Quill editor sizing variant (Purchase Orders modal) */
.quill-editor-md { height: 200px; }

/* Contact / search-result card grid (Contact Search) */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1.5rem;
}
.contact-card {
  background-color: var(--cr-surface);
  border: var(--cr-border-w) solid var(--cr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}
.contact-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background-color: var(--cr-surface);
  border-bottom: 1px solid var(--cr-surface-2);
}
.contact-card .card-title {
  margin: 0;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--cr-text);
}
.contact-card .card-body { padding: 1.25rem; }
.contact-card .card-body p {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--cr-text-2);
}
.contact-details { margin-bottom: 0.75rem; }
.contact-details p { margin-bottom: 0.25rem; }
.contact-notes {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--cr-border);
}
.contact-notes p {
  color: var(--cr-text-2);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.contact-card a[href^="mailto:"] {
  color: var(--cr-info);
  text-decoration: none;
}
.contact-card a[href^="mailto:"]:hover { text-decoration: underline; }

/* Reveal-on-hover category delete (Standard Categories) */
.category-delete { display: none; }
.category-row:hover .category-delete { display: block; }

/* Quill editor surface */
.ql-editor { background: var(--cr-surface); }

/* Object-fit utilities (older Bootstrap build lacks these) */
.object-fit-contain { object-fit: contain; }
.object-fit-cover   { object-fit: cover; }

/* Kanban board cards */
.board-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cr-border);
  border-radius: var(--r-lg);
  background: var(--cr-surface);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.board-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cr-project), #4590d5);
}
.board-card:hover { box-shadow: var(--sh-md); }
.board-card .card-body { padding: 1.25rem; }
.board-card-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--cr-text);
  margin-bottom: 0;
}
.board-meta { font-size: 0.75rem; color: var(--cr-muted); }
.board-card.archived { opacity: .65; }
.board-card.archived:hover { opacity: 1; }
.board-card.archived::before {
  background: linear-gradient(90deg, var(--cr-border-strong), var(--cr-border-2));
}

/* Disclosure-style text button (used beyond kanban) */
.disclosure-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; padding: 0;
  font-size: .8125rem; font-weight: 500;
  color: var(--cr-muted); cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.disclosure-toggle:hover { color: var(--cr-text-2); }

/* Small ghost icon-button for inline row actions */
/* .btn-micro — the size below .btn-sm, for a quiet action inside a dense list
   (the payment-history rows). Was called .btn-icon-ghost, which read as a third
   icon-only style; it never was one — both its uses carry a text label. There
   is exactly one icon-only treatment, .btn-icon, further down. */
.btn-micro {
  font-size: .75rem;
  padding: .2rem .5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--cr-border);
  background: var(--cr-surface);
  color: var(--cr-muted);
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn-micro:hover {
  background: var(--cr-surface-2);
  border-color: var(--cr-border-2);
  color: var(--cr-text-2);
}

/* Empty-boards informational panel (Kanban no-boards state) */
.empty-boards {
  background: var(--cr-surface-2);
  border: 2px dashed var(--cr-border);
  border-radius: var(--r-xl);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--cr-muted);
}
.empty-boards i { color: var(--cr-border-2); }

/* Worksheet image strip — 1-3 image cards + dropzone upload card */
.ws-img-strip { display: flex; gap: 10px; align-items: flex-start; }

.ws-img-card {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}

.ws-img-card.filled {
  flex: 0 1 auto;
  max-height: 140px;
  box-shadow: var(--sh-sm);
}
.ws-img-card.filled > img {
  display: block;
  max-height: 140px;
  width: auto;
  height: auto;
}

.ws-img-card.upload {
  flex: 1 1 0;
  min-width: 120px;
  min-height: 140px;
  border: 1.5px dashed var(--cr-border-strong);
  background: var(--cr-surface-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--cr-muted);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  user-select: none;
  text-align: center;
}
.ws-img-card.upload:hover {
  border-color: var(--cr-focus-border);
  background: var(--cr-primary-soft);
  color: var(--cr-text-2);
}
.ws-img-card.upload.dz-drag-hover {
  border-style: solid;
  border-color: var(--cr-primary);
  background: var(--cr-primary-soft);
  color: var(--cr-primary-deep);
}
.ws-img-card.upload > * { pointer-events: none; }
.ws-img-card.upload i { font-size: 22px; }
.ws-img-card.upload .upload-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.ws-img-card.upload .upload-hint  { font-size: 10px; opacity: 0.7; }
.ws-img-card.upload .dz-progress  { display: none; }

.ws-img-card.upload.dz-started {
  border-style: solid;
  border-color: var(--cr-primary);
  background: var(--cr-primary-soft);
  color: var(--cr-primary-deep);
}

.ws-img-card .delete-file {
  display: flex !important;
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: none;
  color: var(--cr-primary-ink);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  padding: 0;
  pointer-events: none;
}
.ws-img-card.filled:hover .delete-file {
  opacity: 1;
  pointer-events: auto;
}

.ws-img-upload-loader {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--cr-surface) 88%, var(--cr-primary));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.ws-img-upload-loader .spinner-border {
  width: 28px; height: 28px;
  border-width: 3px;
  color: var(--cr-primary);
}
.ws-img-upload-loader span {
  font-size: 11px;
  font-weight: 600;
  color: var(--cr-primary-deep);
}

/* Worksheet deposit rows — brand-coded labels & buttons ----------------
   Supplier = gold (--cr-supplier), Client = teal (--cr-client). Both rows
   share the same structure/sizing; only the hue differs. */
/* Prepended input-group label — .lbl -----------------------------------
   The label takes the width its text needs, and is the ONLY item in the row
   allowed to shrink: the field states a content floor (--cr-fld-min-*) and
   holds it, so when the column narrows the label ellipsises rather than the
   value being squeezed out of sight. Nothing ever wraps to a second line.

   This replaces a .lbl-sm/md/lg/xl scale that pinned the LABEL to 4/8/9.5/11rem
   and let the field collapse to nothing — on a worksheet, a number you cannot
   read is worse than a label you cannot finish reading. The scale also had to
   be chosen correctly by hand at every call site to keep a column aligned,
   which it never reliably was.

   text-overflow only applies to a block container, so this drops the addon's
   inline-flex; `align-content` does the vertical centring the flexbox used to,
   and keeps it when the row stretches taller than the label (the Total Price
   row does). Give every .lbl a title="" so a truncated one is still readable.

   A unit ("%", "weeks") or an icon addon is NOT a label: leave it as a plain
   .input-group-text, which stays flex: 0 0 auto and never shrinks. */
.input-group-text.lbl {
  display: block;
  align-content: center;
  flex: 0 1 auto;          /* never grows; first and only item to shrink */
  min-width: 0;            /* ...all the way down to the ellipsis        */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  font-weight: 600;
}
/* The floor lives on the field, and only in a labelled group — an icon-slot
   group (search boxes, the worksheet navigation row) keeps min-width: 0. */
.input-group:has(> .input-group-text.lbl) > .form-control,
.input-group:has(> .input-group-text.lbl) > .form-select {
  min-width: var(--fld-min, var(--cr-fld-min-text));
  text-overflow: ellipsis;
}
.input-group:has(> .input-group-text.lbl) > .form-control[inputmode="decimal"],
.input-group:has(> .input-group-text.lbl) > .form-control[type="number"] {
  min-width: var(--fld-min, var(--cr-fld-min-num));
}
/* A select reserves far less: a three-letter currency code was holding 14ch of
   floor and truncating the label beside it while showing "AUD". */
.input-group:has(> .input-group-text.lbl) > select.form-control {
  min-width: var(--fld-min, var(--cr-fld-min-select));
}
.input-group:has(> .input-group-text.lbl) > .form-select {
  /* .form-select reserves 1.75rem on the right for its chevron */
  min-width: calc(var(--fld-min, var(--cr-fld-min-select)) + 1.75rem);
}
/* Choices.js replaces the select with a wrapper whose flex-basis is `auto`,
   i.e. the longest option — that base alone overflows the row and squeezes the
   label. Give it the same 0 basis and floor the real fields use. */
.input-group:has(> .input-group-text.lbl) > .choices {
  flex: 1 1 0;
  min-width: var(--fld-min, var(--cr-fld-min-select));
}
.input-group-text.deposit-lbl--supplier {
  border-color: color-mix(in srgb, var(--cr-supplier) 38%, transparent);
  color: color-mix(in srgb, var(--cr-supplier) 72%, #000);
}
.input-group-text.deposit-lbl--client {
  border-color: color-mix(in srgb, var(--cr-client) 38%, transparent);
  color: color-mix(in srgb, var(--cr-client) 72%, #000);
}
.btn-supplier {
  background: var(--cr-supplier);
  border-color: var(--cr-supplier);
  color: var(--cr-primary-ink);
}
.btn-supplier:hover,
.btn-supplier:focus {
  background: color-mix(in srgb, var(--cr-supplier) 88%, #000);
  border-color: color-mix(in srgb, var(--cr-supplier) 88%, #000);
  color: var(--cr-primary-ink);
}
.btn-client {
  background: var(--cr-client);
  border-color: var(--cr-client);
  color: var(--cr-primary-ink);
}
.btn-client:hover,
.btn-client:focus {
  background: color-mix(in srgb, var(--cr-client) 88%, #000);
  border-color: color-mix(in srgb, var(--cr-client) 88%, #000);
  color: var(--cr-primary-ink);
}
/* "Set as paid today" action — outline twin of the solid Xero-posted button
   so both deposit states read as the same brand-coded control. */
.btn-supplier,
.btn-client,
.btn-outline-supplier,
.btn-outline-client {
  border-radius: 0;
}
.btn-outline-supplier {
  background: transparent;
  border-color: color-mix(in srgb, var(--cr-supplier) 55%, transparent);
  color: color-mix(in srgb, var(--cr-supplier) 80%, #000);
}
.btn-outline-supplier:hover,
.btn-outline-supplier:focus {
  background: var(--cr-supplier);
  border-color: var(--cr-supplier);
  color: var(--cr-primary-ink);
}
.btn-outline-client {
  background: transparent;
  border-color: color-mix(in srgb, var(--cr-client) 55%, transparent);
  color: color-mix(in srgb, var(--cr-client) 80%, #000);
}
.btn-outline-client:hover,
.btn-outline-client:focus {
  background: var(--cr-client);
  border-color: var(--cr-client);
  color: var(--cr-primary-ink);
}

/* --- Modals — align to the SweetAlert2 popup look ---------------------- */
/* Mirrors the .swal2-popup / .swal2-title / .swal2-actions treatment (see
   the SweetAlert2 block near the top of this file) so Bootstrap modals and
   swal dialogs read as one family: same surface, border, radius, shadow,
   backdrop, title weight, and borderless header/footer. Kept here so it
   wins the cascade over the vendor modal rules mid-file. */
.modal-content {
  border: 1px solid var(--cr-border);
  border-radius: var(--r-xl);
  background: var(--cr-surface);
  color: var(--cr-text);
  box-shadow: var(--sh-pop);
}

.modal-backdrop {
  background: color-mix(in srgb, var(--cr-primary-deep) 34%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal-backdrop.show { opacity: 1; }

.modal-header {
  border-bottom: 0;
  padding: 1.25rem 1.25rem 0.75rem;
}

.modal-title {
  color: var(--cr-text);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
}

.modal-body { padding: 0.75rem 1.25rem; }

.modal-footer {
  border-top: 0;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1.25rem;
}
.modal-footer > * { margin: 0; }

/* --- Consultancy amend editor -------------------------------------------
   The fullscreen "Amend Consultancy Timesheets" formset, and the timesheet
   batch-edit day (timesheet_multiple), which is the same editor on a page. A real table so the
   columns actually hold their alignment, with a sticky header for orientation
   and a sticky action bar so Save stays reachable in a long list.
   Chrome is deliberately quiet: the inputs are the content, separators are
   single hairlines, and the delete control only takes on danger colour on
   hover rather than shouting from every row. */
.cae-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.cae-head__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cr-text);
}
.cae-head__meta {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--cr-muted);
}
.cae-count {
  flex-shrink: 0;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
  background: var(--cr-surface-2);
  color: var(--cr-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* No overflow/clipping on the sheet — a clipping ancestor would become the
   sticky header's scroll container and stop it sticking to the modal body. */
.cae-sheet {
  margin-bottom: 1rem;
  border: 1px solid var(--cr-border);
  border-radius: var(--r-lg);
  background: var(--cr-surface);
  box-shadow: var(--sh-xs);
}

/* Fill the fullscreen dialog so the action bar settles at the bottom of the
   viewport instead of floating under a short table; once the rows overflow,
   the sticky rule below takes over. */
#consultancy-amend-modal-body {
  display: flex;
  flex-direction: column;
}
#consultancy-amend-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.cae-table {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.cae-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.625rem;
  border-bottom: 1px solid var(--cr-border);
  background: var(--cr-surface-2);
  color: var(--cr-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.cae-table thead th:first-child { border-top-left-radius: var(--r-lg); }
.cae-table thead th:last-child { border-top-right-radius: var(--r-lg); }

.cae-table td {
  padding: 0.3125rem 0.625rem;
  border-top: 1px solid var(--cr-border);
  vertical-align: middle;
  white-space: normal;
}
.cae-table tbody tr:first-child td { border-top: 0; }

.cae-table .cae-num { text-align: right; }
.cae-table .cae-mid { text-align: center; }

/* Unsaved rows carry an accent edge so drafts read differently from the
   entries already on the books. */
.cae-row--new > td { background: color-mix(in srgb, var(--cr-info) 4%, var(--cr-surface)); }
.cae-row--new > td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cr-info) 50%, transparent);
}
.cae-row--invalid > td { background: var(--cr-danger-soft); }
.cae-row--invalid > td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cr-danger) 65%, transparent);
}
/* The timesheet batch-edit day shares this sheet, but its rows never re-render
   — errors arrive out-of-band into a slot inside the row — so there is no class
   to hang the invalid state on. Key it off the slot's own content instead. */
#timesheet-multiple-rows tr:has(.cae-err) > td { background: var(--cr-danger-soft); }
#timesheet-multiple-rows tr:has(.cae-err) > td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cr-danger) 65%, transparent);
}
.cae-table tbody tr:hover > td { background: var(--light-blue-highlight-color); }

.cae-row-errors > td {
  padding-top: 0;
  border-top: 0;
  background: var(--cr-danger-soft);
  color: color-mix(in srgb, var(--cr-danger) 80%, #000);
  font-size: 0.75rem;
  line-height: 1.5;
}
.cae-row-errors strong { font-weight: 700; }

.cae-table .form-control,
.cae-table select.form-control {
  min-height: 2rem;
  padding: 0.3125rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  line-height: 1.4;
}
/* These selects carry .form-control (not .form-select) straight from the
   ModelForm, and the shared field rule strips the native arrow with
   appearance:none — so re-draw the .form-select chevron here or the
   dropdowns read as plain text boxes. */
.cae-table select.form-control {
  padding-right: 1.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M3.5 6 8 10.5 12.5 6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.4375rem center;
  background-size: 0.75rem 0.75rem;
}
.cae-table textarea.form-control {
  resize: vertical;
  line-height: 1.45;
}
.cae-table .cae-num .form-control {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cae-check {
  display: flex;
  justify-content: center;
}
.cae-check .form-check-input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  cursor: pointer;
}

.cae-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--cr-placeholder);
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.cae-icon-btn:hover:not(:disabled),
.cae-icon-btn:focus-visible:not(:disabled) {
  background: var(--cr-danger-soft);
  color: var(--cr-danger);
}
.cae-icon-btn:disabled {
  color: var(--cr-border-strong);
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bleeds to the modal body's horizontal padding (1.25rem) so scrolling rows
   never peek out at the edges of the pinned bar. */
.cae-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: auto -1.25rem 0;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--cr-border);
  background: var(--cr-surface);
}
.cae-actions__hint {
  color: var(--cr-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
.cae-actions__done {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--cr-success);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* --- Breadcrumbs ------------------------------------------------------- */
/* The trail carries three kinds of crumb and each one has to be tellable
   apart on sight: a link goes somewhere and underlines on hover; a
   .breadcrumb-section is a sidebar group with no page of its own, so it is
   set in muted text and never reads as a link that failed; the current page
   terminates the trail in full-strength text. Compiled Bootstrap gives all
   three the same colour, which is what made every crumb look equally
   clickable. Colours come from the tokens so both tones follow along. */
.breadcrumb-item a {
  color: var(--cr-text-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
  color: var(--cr-text);
  text-decoration: underline;
}
.breadcrumb-item.breadcrumb-section {
  color: var(--cr-muted);
}
.breadcrumb-item.active {
  color: var(--cr-text);
  font-weight: 500;
}

/* =========================================================================
   ALERTS — one token-driven system
   -------------------------------------------------------------------------
   THE canonical alert styling; nothing else in this file paints an alert.
   Every variant is a single line that sets --alert-accent, and the surface,
   border, rail, icon and heading colours are all derived from it, so a new
   variant never restates a palette and the family cannot drift apart:

       .alert-warning { --alert-accent: var(--cr-warning); }

   Anatomy
     rail     3px solid accent down the leading edge. This is what makes
              severity readable at a glance in a dense form. The old
              compiled variants carried their meaning only in a pale wash,
              which read as "disabled panel" rather than "pay attention".
     surface  accent mixed into --cr-surface at --alert-tint. Pale accents
              (amber, gold) need a heavier mix than saturated ones to tint
              at all, hence the per-variant --alert-tint overrides.
     ink      accent darkened to --alert-ink, for the heading, the leading
              icon, <strong> and links — never for body copy, which stays
              --cr-text-2 so a long message keeps full contrast instead of
              fading into its own tint.

   Sizes: default, and .alert-sm for dense panels and inline-list errors.
   ========================================================================= */
.alert {
  --alert-accent: var(--cr-muted);
  --alert-tint:   11%;
  --alert-ink:    color-mix(in srgb, var(--alert-accent) 58%, #0a0a0c);

  position: relative;
  margin-bottom: 1rem;
  padding: 0.8125rem 1rem;
  border: 1px solid color-mix(in srgb, var(--alert-accent) 30%, transparent);
  border-left: 3px solid var(--alert-accent);
  border-radius: var(--r-md);
  background-color: color-mix(in srgb, var(--alert-accent) var(--alert-tint), var(--cr-surface));
  color: var(--cr-text-2);
  font-size: var(--cr-font-size);
  line-height: 1.5;
}

/* Emphasis carries the accent; body copy does not. */
.alert-heading {
  margin-bottom: 0.25rem;
  color: var(--alert-ink);
  font-size: var(--cr-font-size);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.alert strong,
.alert b,
.alert .alert-heading i {
  color: var(--alert-ink);
}
.alert-link,
.alert a:not(.btn) {
  color: var(--alert-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* Leading icon sits in its own full-height column to the left of the
   message, glyph pinned to the top so it lines up with the first line of
   text however many lines the message runs to, rather than flowing inline
   with the first word. Aligned on the baseline rather than the box top: the
   text is usually wrapped in <small> (0.875em), so a top-aligned icon
   renders a taller line box than the text beside it and reads a couple of
   pixels high. Baseline alignment lands the glyph exactly where it would
   sit inline, at any text size. The glyph takes --alert-ink, not the raw
   accent: a pale accent (amber, gold) drawn at full strength on its own
   tint drops under 3:1 and the icon disappears. Full-strength accent is
   left to the rail, which is a solid bar against the page, not the tint.
   Scoped with :has() so alerts built from
   other markup (headings, stacked .alert-icon, plain text) keep block flow.
   Spacing comes from the icon's own margin, not a container gap, so the
   .me-2 most of these icons already carry doesn't stack on top of it. */
.alert:has(> i:first-child) {
  display: flex;
  align-items: baseline;
}
.alert > i:first-child {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  margin-bottom: 0;
  color: var(--alert-ink);
}

/* Dense variant — settings panels, inline-list validation, table cells. */
.alert-sm {
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: var(--cr-font-size-sm);
}
.alert-sm .alert-heading {
  font-size: var(--cr-font-size-sm);
}

.alert-dismissible {
  padding-right: 2.75rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.9375rem 1rem;
  opacity: 0.45;
  transition: opacity var(--t-fast) var(--ease);
}
.alert-dismissible .btn-close:hover {
  opacity: 0.9;
}
.alert-sm.alert-dismissible {
  padding-right: 2rem;
}
.alert-sm.alert-dismissible .btn-close {
  padding: 0.5rem 0.625rem;
}

/* Variants ------------------------------------------------------------- */
/* --alert-tint is nudged per variant so every fill lands at roughly the
   same perceived weight: pale accents need more of themselves to register,
   near-black --cr-primary needs less or the note turns into a grey slab. */
.alert-primary   { --alert-accent: var(--cr-primary);       --alert-tint: 8%;  }
.alert-secondary { --alert-accent: var(--cr-secondary-deep); --alert-tint: 15%; }
.alert-tertiary  { --alert-accent: var(--cr-tertiary);                          }
.alert-info      { --alert-accent: var(--cr-info);                              }
.alert-success   { --alert-accent: var(--cr-success);       --alert-tint: 13%; }
.alert-warning   { --alert-accent: var(--cr-warning);       --alert-tint: 17%; }
.alert-danger    { --alert-accent: var(--cr-danger);                            }
.alert-white     { --alert-accent: var(--cr-border-strong); --alert-tint: 0%;  }
.alert-indigo    { --alert-accent: #4c46b6;                                     }
.alert-purple    { --alert-accent: #6f42c1;                                     }

/* Django message tags are rendered straight into the class name
   ("alert-" + message.tags in includes/messages.html and friends), so the two
   that don't match a Bootstrap variant need their own mapping or the
   message renders as unstyled body text. */
.alert-error     { --alert-accent: var(--cr-danger); }
.alert-debug     { --alert-accent: var(--cr-muted);  }

/* Balance-paid confirmations — brand-coded to match their own deposit row
   (supplier = gold, client = teal) instead of generic grey/blue alerts. */
.alert-supplier  { --alert-accent: var(--cr-supplier); --alert-tint: 15%; }
.alert-client    { --alert-accent: var(--cr-client);                      }

/* Django messages float over the page (.fixed-alerts), so unlike an alert
   embedded in a form they need elevation to separate from what's behind,
   and an entrance so a message that appears after an action is noticed. */
.fixed-alerts .alert {
  box-shadow: var(--sh-lg);
  animation: alert-drop var(--t-slow) var(--ease) both;
}
@keyframes alert-drop {
  from { opacity: 0; transform: translateY(-0.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .fixed-alerts .alert { animation: none; }
}

/* =========================================================================
   ACTION BAR — reusable floating bottom bar
   -------------------------------------------------------------------------
   A frosted, rounded bar that docks to the bottom of the scroll viewport
   (position:sticky against the scrolling .content ancestor) so a page's
   primary action stays in reach while a long list scrolls, then settles at
   the end of the page. --sh-pop lifts it clear of the content behind.

   Reuse anywhere a page needs a persistent primary action. Place it as a
   direct child of #main-content (or any plain, non-overflow-clipped block)
   so it sticks against the viewport rather than a card.

     <div class="action-bar">
       <div class="action-bar__inner">          (or a <form>)
         <div class="action-bar__group">              left · options
           <span class="action-bar__label">Orientation</span>
           ...controls...
         </div>
         <div class="action-bar__group action-bar__group--actions">   right
           <span class="action-bar__meta">3 selected</span>
           <button class="btn btn-link action-bar__link">Clear all</button>
           <button class="btn btn-primary">Do the thing</button>
         </div>
       </div>
     </div>

   Sub-parts:
     __inner   the frosted panel (flex, wraps); use on a <div> or <form>
     __group   a cluster of controls; __group--actions is pushed to the end
     __label   small uppercase eyebrow to title a group
     __meta    muted status/summary text (e.g. a selected-count)
     __field   width-capped control (e.g. a name input) — min(260px,100%)
     __link    quiet inline text button (subtle; turns danger on hover)

   Modifier:
     --inline  the bar titles the block directly below it (e.g. a preview
               pane) instead of docking to the bottom of the scroll
               viewport, so it keeps normal block flow and leaves its
               ancestors' layout alone.
   ========================================================================= */
.action-bar {
  position: sticky;
  bottom: 1rem;
  z-index: 5;
  margin-top: 1.5rem;
}
/* position:sticky can only move within the bounds of its containing block
   (the bar's parent, and that parent's parent, etc.), so when a page's own
   content is shorter than the viewport those ancestors stop short of the
   bottom and the bar just renders after the content instead of anchored
   near the screen's bottom.
   A percentage height can't fix this — height:100% is 100% of the whole
   ancestor, not of the space actually left over after that ancestor's
   earlier siblings (breadcrumb, filters, ...), so it overshoots the
   viewport instead of matching it. flex-grow is the one sizing model that
   correctly claims just the leftover space, so :has() turns #main-content
   and every ancestor of the bar (any nesting depth: an HTMX swap target, a
   <form>, ...) into a flex-growing column; the bar's auto margin (below)
   then pushes it flush with the bottom of that filled-in space. Scoped to
   pages that actually contain .action-bar so it doesn't touch anything
   else. */
#main-content:has(.action-bar:not(.action-bar--inline)) {
  display: flex;
  flex-direction: column;
}
#main-content *:has(.action-bar:not(.action-bar--inline)) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#main-content .action-bar:not(.action-bar--inline) {
  margin-top: auto;
}
/* Narrowed to 70% of the content column (centered) on wide screens; full
   width below that so the controls never crowd on tablet/phone. */
@media (min-width: 992px) {
  .action-bar__inner {
    width: 90%;
    margin-inline: auto;
  }
}
.action-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 1rem;
  padding: 0.6875rem 0.75rem 0.6875rem 0.875rem;
  border: 1px solid var(--cr-border);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--cr-surface) 82%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: var(--sh-pop);
}
.action-bar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.action-bar__group--actions {
  margin-left: auto;
}
/* Normalize Bootstrap form-checks (radios, switches) into centered inline
   units so their control + label sit on the bar's vertical centerline with
   any adjacent __label / __meta text, instead of Bootstrap's block layout
   that floats the input with a top margin. */
.action-bar .form-check {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 0;
  margin-bottom: 0;
  padding-left: 0;
}
.action-bar .form-check .form-check-input {
  float: none;
  margin-top: 0;
  margin-left: 0;
}
.action-bar .form-check .form-check-label {
  margin-bottom: 0;
}
.action-bar__field {
  width: min(260px, 100%);
}
.action-bar__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cr-muted);
}
.action-bar__meta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cr-text-2);
  white-space: nowrap;
}
.action-bar__link {
  padding: 0.25rem 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cr-muted);
  text-decoration: none;
}
.action-bar__link:hover {
  color: var(--cr-danger);
}
/* Inline variant — sits in normal flow directly above the block it acts on,
   full width so it lines up with that block's edges. */
.action-bar--inline {
  position: static;
  margin-top: 0;
  margin-bottom: 0.75rem;
}
.action-bar--inline .action-bar__inner {
  width: 100%;
}
/* Hairline divider cueing the split between the options and actions groups —
   only where the bar is wide enough to hold one row. */
@media (min-width: 992px) {
  .action-bar__group--actions::before {
    content: "";
    align-self: stretch;
    width: 1px;
    margin: -0.125rem 0.25rem -0.125rem 0;
    background: var(--cr-border);
  }
}
/* On narrow screens the primary action spans the bar so it stays easy to hit. */
@media (max-width: 575.98px) {
  .action-bar__group--actions {
    width: 100%;
  }
  .action-bar__group--actions .btn-primary {
    flex: 1 1 auto;
  }
}

/* =========================================================================
   CURRENCIES & BANK — currency editor card
   Small "coin" chip carrying the currency symbol, used as each card's avatar.
   ========================================================================= */
.currency-card__symbol {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: var(--cr-primary-soft);
  color: var(--cr-primary);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}

/* =========================================================================
   INVOICE SUMMARY — read-only totals panel (supplier invoice entry)
   Non-editable figures presented as a clean, ruled ledger rather than inputs:
   muted labels, tabular-aligned values, an emphasized total and balance.
   ========================================================================= */
.invoice-summary {
  border: 1px solid var(--cr-border);
  border-radius: var(--r-lg);
  background: var(--cr-surface);
  box-shadow: var(--sh-xs);
  padding: 0.25rem 1.125rem;
}
.invoice-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--cr-border);
}
.invoice-summary__row:last-child {
  border-bottom: 0;
}
.invoice-summary__label {
  font-size: 0.8125rem;
  color: var(--cr-muted);
}
.invoice-summary__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--cr-text);
  white-space: nowrap;
}
/* Invoice total — a subtotal the eye should land on before deposits. */
.invoice-summary__row--total {
  border-top: 1.5px solid var(--cr-border-2);
}
.invoice-summary__row--total .invoice-summary__label,
.invoice-summary__row--total .invoice-summary__value {
  font-weight: 700;
}
/* Balance owing — the final figure, carried in the brand ink. */
.invoice-summary__row--balance .invoice-summary__label {
  font-weight: 700;
  color: var(--cr-text);
}
.invoice-summary__row--balance .invoice-summary__value {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--cr-primary);
}

/* =========================================================================
   16 · MODAL CLOSE BUTTON — matches the Desmi help-panel icon button
   ========================================================================= */
.modal-header .btn-close {
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--r-md);
  background-color: transparent;
  background-image: none;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--t-base) var(--ease);
  cursor: pointer;
}
.modal-header .btn-close::before {
  content: "";
  width: 1em;
  height: 1em;
  background-color: var(--cr-muted);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/contain no-repeat;
  transition: background-color var(--t-base) var(--ease);
}
.modal-header .btn-close:hover {
  background-color: var(--cr-surface-2);
}
.modal-header .btn-close:hover::before {
  background-color: var(--cr-text);
}
.modal-header .btn-close:focus {
  outline: 0;
  box-shadow: var(--cr-focus-ring);
}
.modal-header .btn-close:disabled,
.modal-header .btn-close.disabled {
  pointer-events: none;
  opacity: 0.4;
}

/* =========================================================================
   XERO SYNC DRAWER — results of a "Sync Payments from Xero" run
   A reconciliation ledger rather than a stack of tables: one scroll, grouped
   exceptions-first, with a status rail down the left edge of every row and all
   money set in tabular mono so the decimal column aligns the whole way down.
   Each row can be re-checked against Xero on its own (hx-post, outerHTML swap).
   ========================================================================= */
.xsync-scrim {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: color-mix(in srgb, var(--cr-primary-deep) 34%, transparent);
  backdrop-filter: blur(2px);
}
.xsync-fade  { transition: opacity var(--t-base) var(--ease); }
.xsync-clear { opacity: 0; }
.xsync-solid { opacity: 1; }

.xsync-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1051;
  width: 34rem;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--cr-surface);
  border-left: 1px solid var(--cr-border);
  box-shadow: var(--sh-lg);
}
.xsync-slide { transition: transform var(--t-slow) var(--ease); }
.xsync-off   { transform: translateX(100%); }
.xsync-on    { transform: translateX(0); }

/* — Head ——————————————————————————————————————————————————————————— */
.xsync-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.125rem 1.25rem 1rem;
  border-bottom: 1px solid var(--cr-border);
}
.xsync-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--cr-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cr-muted);
}
.xsync-dot {
  width: 3px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--cr-border-strong);
}
.xsync-title {
  margin: 0.375rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cr-text);
}
.xsync-close {
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--cr-muted);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.xsync-close:hover { background: var(--cr-surface-2); color: var(--cr-text); }

/* — Hero: how much money moved ————————————————————————————————————— */
.xsync-hero {
  flex: none;
  padding: 1.25rem;
  background: var(--cr-surface-2);
  border-bottom: 1px solid var(--cr-border);
}
.xsync-figure { display: flex; align-items: baseline; gap: 0.5rem; }
.xsync-figure-value {
  font-family: var(--cr-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cr-text);
}
.xsync-figure-label {
  font-size: 0.8125rem;
  color: var(--cr-muted);
}
.xsync-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.875rem 0 0;
}
.xsync-tally-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem;
  border-radius: var(--r-sm);
  font-size: 0.75rem;
}
.xsync-tally-item dt { font-weight: 500; }
.xsync-tally-item dd {
  margin: 0;
  font-family: var(--cr-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.xsync-tally-item.is-attention { background: var(--cr-danger-soft);  color: var(--cr-danger); }
.xsync-tally-item.is-updated   { background: var(--cr-success-soft); color: var(--cr-success-ink); }
.xsync-tally-item.is-cleared   { background: var(--cr-surface-3);    color: var(--cr-text-2); }
.xsync-stamp {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--cr-muted);
}

/* — Body & groups ——————————————————————————————————————————————————— */
.xsync-body { flex: 1; overflow-y: auto; }
.xsync-group + .xsync-group { border-top: 1px solid var(--cr-border); }
.xsync-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem 1.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cr-muted);
}
.xsync-group-head.is-attention { color: var(--cr-danger); }
.xsync-group-count {
  font-family: var(--cr-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--cr-muted);
}

/* — Row ————————————————————————————————————————————————————————————— */
.xsync-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.875rem;
  padding: 0.6875rem 1.25rem 0.6875rem 1.0625rem;
  border-left: 3px solid transparent;
  transition: background var(--t-fast) var(--ease);
}
.xsync-row + .xsync-row { border-top: 1px solid var(--cr-border); }
.xsync-row:hover { background: var(--cr-surface-2); }
.xsync-row.is-attention { border-left-color: var(--cr-danger); }
.xsync-row.is-updated   { border-left-color: var(--cr-success); }
.xsync-row.is-cleared   { border-left-color: var(--cr-border-strong); }

.xsync-row-ref { min-width: 0; }
.xsync-code {
  font-family: var(--cr-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cr-text);
}
.xsync-num {
  margin-left: 0.4375rem;
  font-family: var(--cr-font-mono);
  font-size: 0.8125rem;
  color: var(--cr-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--cr-border-2);
}
a.xsync-num:hover { color: var(--cr-text); border-bottom-color: var(--cr-border-strong); }
.xsync-note {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--cr-muted);
}
.xsync-row.is-attention .xsync-note { color: var(--cr-danger); }

.xsync-row-figures {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.0625rem;
  text-align: right;
}
.xsync-amount {
  font-family: var(--cr-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cr-text);
}
.xsync-owing {
  font-family: var(--cr-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--cr-muted);
}
.xsync-owing.is-over { color: var(--cr-danger); }

/* — Retry ——————————————————————————————————————————————————————————— */
.xsync-retry {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--cr-border-2);
  border-radius: var(--r-sm);
  background: var(--cr-surface);
  color: var(--cr-text-2);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.xsync-retry:hover { border-color: var(--cr-border-strong); color: var(--cr-text); }
.xsync-retry-icon { flex: none; }
/* Mid-request: spin the icon and lock the control. */
.xsync-retry.htmx-request { pointer-events: none; color: var(--cr-muted); }
.xsync-retry.htmx-request .xsync-retry-icon { animation: xsync-spin 700ms linear infinite; }
@keyframes xsync-spin { to { transform: rotate(360deg); } }

/* A row that just came back from a re-check settles out of a brief tint. */
.xsync-row.is-refreshed { animation: xsync-settle var(--t-slow) var(--ease); }
@keyframes xsync-settle {
  from { background: var(--cr-info-soft); }
  to   { background: transparent; }
}

/* — Empty & foot ———————————————————————————————————————————————————— */
.xsync-empty { padding: 3rem 1.5rem; text-align: center; }
.xsync-empty-title {
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--cr-text);
}
.xsync-empty-body {
  margin: 0 auto;
  max-width: 24rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--cr-muted);
}
.xsync-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--cr-border);
  background: var(--cr-surface-2);
}
.xsync-foot-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--cr-muted);
}

/* — Quality floor ——————————————————————————————————————————————————— */
.xsync-close:focus-visible,
.xsync-retry:focus-visible,
.xsync-num:focus-visible {
  outline: none;
  border-color: var(--cr-focus-border);
  box-shadow: var(--cr-focus-ring);
}
@media (max-width: 36rem) {
  .xsync-panel { width: 100vw; border-left: 0; }
  .xsync-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.5rem; }
  .xsync-retry { grid-column: 2; }
  .xsync-retry-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xsync-fade, .xsync-slide { transition: none; }
  .xsync-row.is-refreshed { animation: none; }
  .xsync-retry.htmx-request .xsync-retry-icon { animation: none; }
}

/* =========================================================================
   FIELD ERRORS — the message under an invalid field
   -------------------------------------------------------------------------
   .text-error wraps `{{ form.field.errors }}` at ~105 call sites across the
   app and had no rule anywhere: every one of those messages rendered in body
   ink at body size, so a failed validation looked like a caption. Django emits
   an <ul class="errorlist"> inside the span, hence the list reset.

   .invalid-feedback already carried the same treatment (and its own display
   gating), so it is left alone; this only gives .text-error the same read.
   Prefer .invalid-feedback.d-block in new markup — it is the class the rest of
   the form machinery already knows about.
   ========================================================================= */
.text-error {
  display: block;
  margin: 0.375rem 0 0 0.125rem;
  color: var(--cr-danger);
  font-size: var(--cr-font-size-sm);
  line-height: 1.4;
}
.text-error ul,
.text-error .errorlist {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}
.text-error:empty { display: none; }

/* =========================================================================
   SETTINGS SECTIONS — grouped fields inside a settings or details pane
   -------------------------------------------------------------------------
   A settings screen is a list of decisions, so each one gets a heading, a
   sentence saying what it does, and its controls — separated by a hairline
   rather than boxed in a card of its own. Used by Company Details, Client and
   Supplier options, Standard Categories.

   This lived in four page <style> blocks, byte-for-byte identical apart from
   the ancestor each was scoped to (#nav-settings / .settings-pane /
   .categories-page). Unscoped here, so the next settings screen inherits it.

   The toggle row is the one shape worth naming: name and description on the
   left, switch on the right, grouped by spacing alone (2px name→desc against
   1rem row→row) so it needs no borders.
   ========================================================================= */
.settings-section { padding: 1.5rem 0; }
.settings-section:first-child { padding-top: 0.25rem; }
.settings-section + .settings-section { border-top: 1px solid var(--cr-border); }

.settings-head { margin-bottom: 1rem; }
/* Section header with a control parked on the right. */
.settings-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.settings-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cr-text);
}
.settings-desc {
  margin: 0.25rem 0 0;
  max-width: 60ch;
  font-size: 0.8125rem;
  color: var(--cr-muted);
}

/* The eyebrow above a field or a group of them. */
.settings-label {
  display: block;
  margin-bottom: 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cr-muted);
}

/* In a multi-column grid of fields, a label long enough to wrap would otherwise
   drop its own input a line below the rest of the row. Every label reserves two
   lines and sits at the bottom of them, so the fields stay on one line. */
.settings-section [class*="row-cols"] .settings-label {
  display: flex;
  align-items: flex-end;
  min-height: 2.5em;
  line-height: 1.25;
}
.settings-section .form-text {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--cr-muted);
}

/* Buttons inside a section track the field height so they line up with them. */
.settings-section .btn {
  height: var(--cr-min-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Toggle row. */
.opt-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.opt-row + .opt-row { margin-top: 1rem; }
.opt-row-name {
  display: block;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cr-text);
  cursor: pointer;
}
.opt-row-desc {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--cr-muted);
}

/* The switch itself. .settings-switch is the same control under the name the
   client and supplier panes used; both are kept so neither markup has to move. */
.opt-switch,
.settings-switch {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
  margin: 0;
  padding-left: 0;
  min-height: 0;
}
.opt-switch .form-check-input,
.settings-switch .form-check-input {
  width: 2.5rem;
  height: 1.35rem;
  margin: 0;
  float: none;
  cursor: pointer;
}
.opt-switch-label,
.settings-switch .form-check-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cr-text-2);
  cursor: pointer;
}

/* Connection-status strip — a tinted band rather than a card inside a card. */
.settings-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.875rem 1rem;
  border-radius: var(--r-md);
  background: var(--cr-surface-2);
}
.settings-status-text {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--cr-text-2);
}

/* =========================================================================
   ADD-ONE-ITEM LISTS
   Settings categories, project rooms, project services, project rates.
   One add row on top (dashed, tinted — visibly a control, not a record),
   then the saved records below. See CLAUDE.md "Add-one-item lists".
   ========================================================================= */
.inline-list__add {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .625rem .75rem;
  margin-bottom: .25rem;
  border: 1px dashed var(--cr-border-strong);
  border-radius: var(--cr-radius);
  background: var(--cr-surface-2);
}

.inline-list__add-heading {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cr-muted);
  margin-bottom: .35rem;
}

.inline-list__rows-heading {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cr-muted);
  margin: 1rem 0 .35rem;
}

.inline-list__row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .375rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--cr-radius);
}
.inline-list__row + .inline-list__row { margin-top: .125rem; }
.inline-list__row:hover {
  background: var(--cr-surface-2);
  border-color: var(--cr-border);
}
/* The delete button only earns its space when the row is in play. */
.inline-list__row .inline-list__btn--danger { opacity: 0; }
.inline-list__row:hover .inline-list__btn--danger,
.inline-list__row:focus-within .inline-list__btn--danger { opacity: 1; }

/* Square action button that lines up with the inputs beside it, whatever the
   density class in play — .btn's own padding does not track --cr-min-h, and
   button margins from elsewhere in the cascade push it off the row, so both are
   zeroed here. Selectors are doubled up to outrank contextual .btn rules. */
.inline-list__add .inline-list__btn,
.inline-list__row .inline-list__btn,
.inline-list__btn {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--cr-min-h);
  height: var(--cr-min-h);
  min-height: var(--cr-min-h);
  margin: 0;
  padding: 0;
  line-height: 1;
}

.inline-list__fields {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
}
.inline-list__field { flex: 1 1 auto; min-width: 0; }
.inline-list__field--rate { flex: 0 0 9rem; }
.inline-list__field--seq { flex: 0 0 7rem; }
.inline-list__field--name { flex: 0 0 10rem; }

.inline-list__empty {
  color: var(--cr-muted);
  font-size: .8125rem;
  padding: .5rem .75rem;
  margin: 0;
}

.inline-list__error {
  color: var(--cr-danger, #e11d48);
  font-size: .75rem;
  margin-top: .25rem;
}

/* The amend modal's add row: same read as .inline-list__add — dashed and
   tinted, so it is visibly the control and not one of the saved entries. */
.cae-table .cae-row--new > td {
  background: var(--cr-surface-2);
  border-top: 1px dashed var(--cr-border-strong);
  border-bottom: 1px dashed var(--cr-border-strong);
}
.cae-table .cae-row--new > td:first-child { border-left: 1px dashed var(--cr-border-strong); }
.cae-table .cae-row--new > td:last-child  { border-right: 1px dashed var(--cr-border-strong); }
.cae-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--cr-primary);
  color: var(--cr-primary-ink);
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease);
}
.cae-add-btn:hover:not(:disabled) { filter: brightness(1.25); }
.cae-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cae-err {
  color: var(--cr-danger, #e11d48);
  font-size: .7rem;
  margin-top: .2rem;
}

/* =========================================================================
   17 · NOTYF TOASTS — surface cards on the --cr-* palette
   =========================================================================
   The vendor sheet paints a solid saturated block with 2px corners, which
   belongs to no palette in this file. Here a toast is an ordinary DSM surface
   card — white, --r-lg, --sh-lg — carrying its semantic in a coloured rail and
   icon rather than in a full-bleed fill.

   Notyf writes the type colour inline, either onto .notyf__ripple (the circle
   that wipes across the toast) or, with ripple off, onto the toast itself. The
   ripple is kept enabled and hidden here so no inline background can land on
   the card; the same inline colour still reaches the icon glyph, which is the
   one place it is wanted. The rail colour is set from the same --cr-* token by
   the per-type classes below.
   ========================================================================= */
.notyf { padding: 1rem; }

/* Colour carrier only — the visible accent is the rail and the icon. */
.notyf__ripple { display: none; }

.notyf__toast {
  --notyf-accent: var(--cr-primary);
  max-width: 22rem;
  padding: 0;
  background: var(--cr-surface);
  color: var(--cr-text);
  border: 1px solid var(--cr-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  font-family: var(--cr-font-sans);
}
.notyf__toast--success { --notyf-accent: var(--cr-success); }
.notyf__toast--error   { --notyf-accent: var(--cr-danger); }
.notyf__toast--warning { --notyf-accent: var(--cr-warning); }
.notyf__toast--info    { --notyf-accent: var(--cr-info); }

/* Accent rail. The toast is overflow:hidden, so it clips to the rounded corner. */
.notyf__toast::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--notyf-accent);
  z-index: 10;
}

.notyf__toast--upper { margin-bottom: 0.625rem; }
.notyf__toast--lower { margin-top: 0.625rem; }

.notyf__wrapper {
  align-items: flex-start;
  gap: var(--cr-icon-gap);
  padding: 0.8125rem 1rem 0.8125rem calc(1rem + 4px);
  border-radius: inherit;
}
.notyf__toast--dismissible .notyf__wrapper { padding-right: 2.5rem; }

.notyf__icon {
  width: 21px;
  flex: none;
  margin-right: 0;
  margin-top: 1px;
  font-size: 1rem;
  line-height: 21px;
}

/* Tinted disc behind the glyph. currentColor is the type colour Notyf sets
   inline on the <i>, so one rule covers all four types. */
.notyf__icon--success,
.notyf__icon--error,
.notyf__icon--warning,
.notyf__icon--info {
  height: 21px;
  width: 21px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 16%, var(--cr-surface));
  display: block;
  margin: 0 auto;
  position: relative;
}

/* Warning (!) and info (i) glyphs — the vendor sheet only draws success and
   error. Same 3px stroke geometry so all four discs read as one set. */
.notyf__icon--warning::before,
.notyf__icon--warning::after,
.notyf__icon--info::before,
.notyf__icon--info::after {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  left: 9px;
  border-radius: 3px;
  background: currentColor;
}
.notyf__icon--warning::before { top: 4px;  height: 9px; }
.notyf__icon--warning::after  { top: 15px; height: 3px; }
.notyf__icon--info::before    { top: 4px;  height: 3px; }
.notyf__icon--info::after     { top: 10px; height: 9px; }

.notyf__message {
  font-size: var(--cr-font-size);
  font-weight: 600;
  line-height: 1.45;
  color: var(--cr-text);
}

/* Dismiss — a quiet icon button in the corner, not the vendor's dark strip. */
.notyf__dismiss {
  top: 0.4375rem;
  right: 0.4375rem;
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 0;
  z-index: 15;
}
.notyf__dismiss-btn {
  background-color: transparent;
  border-radius: var(--r-sm);
  opacity: 1;
}
.notyf__dismiss-btn::before,
.notyf__dismiss-btn::after {
  background: var(--cr-muted);
  height: 10px;
  top: calc(50% - 5px);
}
.notyf__dismiss-btn:hover { background-color: var(--cr-surface-2); opacity: 1; }
.notyf__dismiss-btn:hover::before,
.notyf__dismiss-btn:hover::after { background: var(--cr-text); }

@media only screen and (max-width: 480px) {
  .notyf { padding: 0.75rem; }
  .notyf__toast {
    width: 100%;
    max-width: none;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
  }
}

/* =========================================================================
   18 · COMMENT THREADS — worksheet / WIP comment modal, kanban task modal
   =========================================================================
   One component behind every comment list in the app: an avatar gutter, a
   quiet meta line, and a soft bubble. A thread should read as prose, so the
   per-comment controls stay invisible until that comment is hovered or
   focused — and every accent is the --*-soft version of its colour, never
   the full-strength fill.
   ========================================================================= */

/* The modal shell. Rounder and deeper than the stock .modal-content, with a
   header that carries an icon plate rather than a bare string. */
.cmt-modal .modal-content {
  border: 1px solid var(--cr-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-pop);
  background: var(--cr-surface);
  overflow: hidden;
}
.cmt-modal .modal-header {
  align-items: center;
  gap: .625rem;
  padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--cr-border);
}
.cmt-modal .modal-title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--cr-text);
}
.cmt-modal .modal-body { padding: 1.125rem; }

.cmt-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--cr-primary-soft);
  color: var(--cr-text-2);
  font-size: .8125rem;
}

/* ---- Thread ------------------------------------------------------------ */
.cmt-thread {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.cmt-thread__label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cr-muted);
}

/* The negative margin lets a comment hover plate bleed past the text column
   while the scrollbar still sits at the panel edge. */
.cmt-list {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  max-height: 22rem;
  overflow-y: auto;
  margin: -.25rem -.5rem;
  padding: .25rem .5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--cr-border-2) transparent;
}
.cmt-list::-webkit-scrollbar { width: 10px; }
.cmt-list::-webkit-scrollbar-track { background: transparent; }
.cmt-list::-webkit-scrollbar-thumb {
  background: var(--cr-border-2);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: var(--r-pill);
}
.cmt-list::-webkit-scrollbar-thumb:hover {
  background: var(--cr-border-strong);
  background-clip: content-box;
}

/* ---- One comment ------------------------------------------------------- */
.cmt {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .625rem;
  padding: .375rem .5rem;
  border-radius: var(--r-lg);
  transition: background-color var(--t-fast) var(--ease);
}
.cmt:hover,
.cmt:focus-within { background: var(--cr-surface-2); }

.cmt__avatar {
  width: 2rem;
  height: 2rem;
  margin-top: .0625rem;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--cr-surface-2);
  box-shadow: 0 0 0 1px var(--cr-border);
}
.cmt__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cr-primary-soft);
  color: var(--cr-text-2);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.cmt__body { min-width: 0; }

.cmt__meta {
  display: flex;
  align-items: center;
  gap: .375rem;
  min-height: 1.625rem;
}

.cmt__author {
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cr-text);
}

.cmt__you {
  padding: .0625rem .3125rem;
  border-radius: var(--r-xs);
  background: var(--cr-primary-soft);
  color: var(--cr-muted);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cmt__time,
.cmt__edited {
  font-size: .6875rem;
  color: var(--cr-placeholder);
  white-space: nowrap;
}
.cmt__time::before {
  content: "\00b7";
  margin-right: .375rem;
}
.cmt__edited { font-style: italic; }

/* Urgent reads in the danger tint, never the flat danger fill. */
.cmt__flag {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .0625rem .4375rem;
  border-radius: var(--r-pill);
  background: var(--cr-danger-soft);
  color: var(--cr-danger);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cmt__flag::before {
  content: "";
  width: .3125rem;
  height: .3125rem;
  border-radius: var(--r-pill);
  background: currentColor;
}

/* ---- Row actions — present only while the comment is in play ----------- */
.cmt__actions {
  display: flex;
  align-items: center;
  gap: .125rem;
  margin-left: auto;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cmt:hover .cmt__actions,
.cmt:focus-within .cmt__actions {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.cmt__actions form { display: flex; margin: 0; }

.cmt__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--cr-placeholder);
  font-size: .6875rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cmt__action:hover {
  background: var(--cr-primary-soft);
  color: var(--cr-text);
}
.cmt__action--danger:hover {
  background: var(--cr-danger-soft);
  color: var(--cr-danger);
}
.cmt__action:focus-visible {
  outline: none;
  box-shadow: var(--cr-focus-ring);
}

/* Nothing hovers on a touch screen, so there the actions are always shown. */
@media (hover: none) {
  .cmt__actions { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---- Bubble ------------------------------------------------------------ */
.cmt__bubble {
  margin: .125rem 0 0;
  padding: .5rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  border-top-left-radius: var(--r-xs);
  background: var(--cr-surface-2);
  color: var(--cr-text-2);
  font-size: .8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cmt:hover .cmt__bubble,
.cmt:focus-within .cmt__bubble {
  border-color: var(--cr-border-2);
  box-shadow: var(--sh-xs);
}

/* Squaring both left corners lets the inset rail read as a straight bar
   rather than a tick floating inside a rounded edge. */
.cmt--urgent .cmt__bubble {
  border-radius: var(--r-xs) var(--r-lg) var(--r-lg) var(--r-xs);
  background: var(--cr-danger-soft);
  box-shadow: inset .1875rem 0 0 0 var(--cr-danger);
}
.cmt--urgent:hover .cmt__bubble,
.cmt--urgent:focus-within .cmt__bubble {
  border-color: var(--cr-danger-soft);
  box-shadow: inset .1875rem 0 0 0 var(--cr-danger), var(--sh-xs);
}

/* ---- Empty state ------------------------------------------------------- */
.cmt__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 2.25rem 1rem;
  text-align: center;
}
.cmt__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--cr-surface-2);
  color: var(--cr-placeholder);
  font-size: 1.125rem;
}
.cmt__empty-text {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--cr-text-2);
}
.cmt__empty-hint {
  margin: 0;
  font-size: .75rem;
  color: var(--cr-placeholder);
}

/* ---- Composer ---------------------------------------------------------- */
.cmt-composer {
  border: 1px solid var(--cr-border);
  border-radius: var(--r-lg);
  background: var(--cr-surface);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cmt-composer:focus-within {
  border-color: var(--cr-focus-border);
  box-shadow: var(--cr-focus-ring);
}

/* The card carries the border and the ring, so the field inside drops both. */
.cmt-composer__field,
.cmt-composer__field.form-control {
  display: block;
  width: 100%;
  min-height: 4.75rem;
  padding: .75rem .875rem .5rem;
  border: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: transparent;
  color: var(--cr-text);
  font-size: .8125rem;
  line-height: 1.55;
  resize: vertical;
}
.cmt-composer__field:focus,
.cmt-composer__field.form-control:focus {
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}
.cmt-composer__field::placeholder { color: var(--cr-placeholder); }

.cmt-composer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .5rem .5rem .875rem;
  border-top: 1px solid var(--cr-border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--cr-surface-2);
}

/* Urgent toggle — a pill that tints rather than a bare checkbox. */
.cmt-flagbox {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  margin: 0;
  padding: .25rem .5625rem;
  border-radius: var(--r-pill);
  color: var(--cr-muted);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cmt-flagbox:hover { background: var(--cr-surface-3); color: var(--cr-text-2); }
.cmt-flagbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cmt-flagbox__dot {
  width: .5rem;
  height: .5rem;
  border-radius: var(--r-pill);
  background: var(--cr-border-2);
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cmt-flagbox:has(input:checked) {
  background: var(--cr-danger-soft);
  color: var(--cr-danger);
}
.cmt-flagbox:has(input:checked) .cmt-flagbox__dot {
  background: var(--cr-danger);
  box-shadow: 0 0 0 3px var(--cr-danger-soft);
}
.cmt-flagbox:has(input:focus-visible) { box-shadow: var(--cr-focus-ring); }

/* ---- Buttons ----------------------------------------------------------- */
.cmt-send {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  margin: 0;
  padding: .4375rem .875rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--cr-save);
  color: var(--cr-save-ink);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.cmt-send:hover { background: var(--cr-save-hover); color: var(--cr-save-ink); }
.cmt-send:active { background: var(--cr-save-active); }
.cmt-send:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cr-save-ring);
}
.cmt-send.htmx-request { opacity: .6; pointer-events: none; }

.cmt-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin: 0;
  padding: .375rem .75rem;
  border: 1px solid var(--cr-border-2);
  border-radius: var(--r-md);
  background: var(--cr-surface);
  color: var(--cr-text-2);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cmt-btn:hover {
  background: var(--cr-surface-2);
  border-color: var(--cr-border-strong);
  color: var(--cr-text);
}
.cmt-btn:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }

/* ---- Inline editor ----------------------------------------------------- */
.cmt-editor {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .125rem;
}
.cmt-editor__field,
.cmt-editor__field.form-control {
  min-height: 4.25rem;
  padding: .5rem .75rem;
  border: 1px solid var(--cr-focus-border);
  border-radius: var(--r-md);
  background: var(--cr-surface);
  font-size: .8125rem;
  line-height: 1.55;
  resize: vertical;
}
.cmt-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}

@media (prefers-reduced-motion: reduce) {
  .cmt,
  .cmt__bubble,
  .cmt__actions,
  .cmt-composer,
  .cmt-flagbox,
  .cmt-flagbox__dot,
  .cmt-send,
  .cmt-btn { transition: none; }
}

/* A composer with no left-hand control keeps its button on the right. */
.cmt-composer__foot > .cmt-send:only-child { margin-left: auto; }

/* =========================================================================
   19 · ICON-ONLY BUTTONS — soft ghost
   -------------------------------------------------------------------------
   The one style for a button whose whole content is an icon: a row action,
   a card-header action, a close, a nav arrow. Transparent at rest so a row
   of them reads as icons rather than a row of boxes; on hover the icon keeps
   its own colour and sits on a soft wash of that same colour. Nothing ever
   inverts to a white glyph on a solid fill — that read as a state change
   rather than a hover, and made destructive actions shout on mouseover.

   Generalised from .cae-icon-btn, which already worked this way.

   ONE knob: --bi-tint, the icon colour. The wash is mixed from it, so a new
   variant is a single line and can never drift out of step with its icon.

   Applies only to .btn-icon — an explicit marker, because CSS cannot tell
   <button><svg class="lucide"></svg></button> from
   <button><svg class="lucide"></svg> Delete</button>: a text node is not
   selectable, and :has(> svg) matches both. The app has ~129 icon+text buttons
   sharing these exact classes, so anything implicit would have restyled them
   too. Add .btn-icon when the button has no text label.
   ========================================================================= */
.btn.btn-icon {
  --bi-tint: var(--cr-primary);
  --bi-wash: 12%;

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background-color: transparent;
  color: var(--bi-tint);
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

/* Sizes track the .btn scale so a .btn-icon lines up with the .btn-sm beside it. */
.btn.btn-icon.btn-sm { width: 2rem;    height: 2rem; }
.btn.btn-icon.btn-xs { width: 1.75rem; height: 1.75rem; }

/* The inline-list panels size their buttons off the field height so the add
   and delete squares stay level with the inputs at every density. */
.btn.btn-icon.inline-list__btn {
  width: var(--cr-min-h);
  height: var(--cr-min-h);
}

.btn.btn-icon:hover,
.btn.btn-icon:focus-visible,
.btn.btn-icon.active,
.btn.btn-icon:active {
  background-color: color-mix(in srgb, var(--bi-tint) var(--bi-wash), transparent);
  color: var(--bi-tint);
  border: 0;
  box-shadow: none;
}
.btn.btn-icon:active { --bi-wash: 18%; }

.btn.btn-icon:focus       { outline: 0; box-shadow: none; }
.btn.btn-icon:focus-visible { outline: 0; box-shadow: var(--cr-focus-ring); }

.btn.btn-icon:disabled,
.btn.btn-icon.disabled {
  background-color: transparent;
  color: var(--cr-border-strong);
  opacity: 0.55;
  pointer-events: none;
}

/* An icon carrying its own text-* utility keeps that colour (Bootstrap sets it
   !important); feed the same colour back into the wash so the two agree. */
.btn.btn-icon > i,
.btn.btn-icon > span { color: inherit; }

/* — Variants: one line each, wash derived ————————————————————————— */
.btn.btn-icon.btn-outline-primary   { --bi-tint: var(--cr-primary); }
.btn.btn-icon.btn-outline-secondary { --bi-tint: var(--cr-secondary-deep); }
.btn.btn-icon.btn-outline-tertiary  { --bi-tint: var(--cr-tertiary); }
.btn.btn-icon.btn-outline-info      { --bi-tint: var(--cr-info); }
.btn.btn-icon.btn-outline-success   { --bi-tint: var(--cr-success); }
.btn.btn-icon.btn-outline-warning   { --bi-tint: var(--cr-warning); }
.btn.btn-icon.btn-outline-danger    { --bi-tint: var(--cr-danger); }
.btn.btn-icon.btn-outline-client    { --bi-tint: var(--cr-client); }
.btn.btn-icon.btn-outline-supplier  { --bi-tint: var(--cr-supplier); }

/* Muted by default: footer chrome, kebabs, disclosure and nav arrows. These
   are wayfinding, not actions, so they stay grey until hovered. */
.btn.btn-icon.btn-outline-gray-300,
.btn.btn-icon.btn-outline-gray-400,
.btn.btn-icon.btn-outline-gray-500,
.btn.btn-icon.btn-link {
  --bi-tint: var(--cr-muted);
}
.btn.btn-icon.btn-link:hover,
.btn.btn-icon.btn-link:focus-visible { color: var(--cr-text); }

/* text-* utilities are !important on the colour, so mirror them onto the tint
   or the wash would be grey under a red glyph. */
.btn.btn-icon.text-danger  { --bi-tint: var(--cr-danger); }
.btn.btn-icon.text-success { --bi-tint: var(--cr-success); }
.btn.btn-icon.text-warning { --bi-tint: var(--cr-warning); }
.btn.btn-icon.text-info    { --bi-tint: var(--cr-info); }
.btn.btn-icon.text-primary { --bi-tint: var(--cr-primary); }

/* Same again when the colour sits on the icon rather than the button — the
   worksheet prev/next arrows are .btn-link (muted by default) wrapping a
   .text-primary glyph, which would otherwise wash grey under a navy arrow. */
.btn.btn-icon:has(> .text-primary) { --bi-tint: var(--cr-primary); }
.btn.btn-icon:has(> .text-danger)  { --bi-tint: var(--cr-danger); }
.btn.btn-icon:has(> .text-success) { --bi-tint: var(--cr-success); }
.btn.btn-icon:has(> .text-warning) { --bi-tint: var(--cr-warning); }
.btn.btn-icon:has(> .text-info)    { --bi-tint: var(--cr-info); }

@media (prefers-reduced-motion: reduce) {
  .btn.btn-icon { transition: none; }
}

/* =========================================================================
   BALANCE PAYMENTS MODAL (.bpay) — client & supplier invoice payments
   The user opens this to answer one question ("what is still owing?") and
   then perform one action ("record a payment"), so exactly one figure is
   allowed to be loud: the outstanding balance in the hero. The derivation
   beneath it, the invoice contents above it and the payment history below
   are all deliberately quieted — muted micro-labels, hairline rules, no
   competing weights — so the eye lands on the hero first every time.
   Money is set in tabular mono throughout so decimals column up.
   Brand-coded per side via --bpay-accent: client = teal, supplier = gold,
   matching the deposit-row convention further up this file.
   ========================================================================= */
.bpay {
  --bpay-accent: var(--cr-client);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 0.5rem;
}
.bpay--supplier { --bpay-accent: var(--cr-supplier); }

/* — Identity: who, which invoice, when ————————————————————————————— */
.bpay-party {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cr-text);
}
.bpay-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--cr-muted);
}
.bpay-meta__num {
  font-family: var(--cr-font-mono);
  font-weight: 600;
  color: var(--cr-text-2);
}
.bpay-meta__sep { color: var(--cr-border-2); }
/* The invoice date is editable in place. At rest it is just text in the meta
   line — the pencil only appears on hover, the way the inline-list rows reveal
   their delete. In edit mode the field and its two icon buttons are all built
   to the same 1.75rem height as the resting chip, so opening the editor does
   not shove the line around. Deliberately NOT .form-control: a 2.5rem field
   inside a 0.8125rem text line would dominate the whole identity block. */
.bpay-date { display: inline-flex; align-items: center; }
.bpay-date-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  padding: 0 0.4375rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 0.8125rem;
  color: var(--cr-muted);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.bpay-date-btn > .lucide-calendar { color: var(--cr-placeholder); }
.bpay-date-btn__pen {
  font-size: 0.625rem;
  color: var(--cr-placeholder);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.bpay-date-btn:hover,
.bpay-date-btn:focus-visible {
  background: var(--cr-surface-2);
  border-color: var(--cr-border);
  color: var(--cr-text-2);
  outline: 0;
}
.bpay-date-btn:hover .bpay-date-btn__pen,
.bpay-date-btn:focus-visible .bpay-date-btn__pen { opacity: 1; }

.bpay-date-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.bpay-date-input {
  height: 1.75rem;
  padding: 0 0.375rem;
  border: 1px solid var(--cr-border-2);
  border-radius: var(--r-sm);
  background: var(--cr-surface);
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--cr-text);
}
.bpay-date-input:focus {
  outline: 0;
  border-color: var(--cr-focus-border);
  box-shadow: var(--cr-focus-ring);
}
.bpay-date-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.bpay-date-act--ok {
  background: var(--cr-save);
  border-color: var(--cr-save);
  color: var(--cr-save-ink);
}
.bpay-date-act--ok:hover { background: var(--cr-save-hover); border-color: var(--cr-save-hover); }
.bpay-date-act--cancel { background: transparent; color: var(--cr-muted); }
.bpay-date-act--cancel:hover { background: var(--cr-surface-3); color: var(--cr-text-2); }

/* A saved date confirms itself in place rather than replacing the control
   with a bare tick — the value the user just set stays readable. */
@keyframes bpayDateSaved {
  from { background: var(--cr-success-soft); border-color: var(--cr-success); }
  to   { background: transparent; border-color: transparent; }
}
.bpay-date.is-just-saved .bpay-date-btn {
  animation: bpayDateSaved 1.8s var(--ease) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .bpay-date.is-just-saved .bpay-date-btn { animation: none; }
}

/* — Hero: the one figure this modal exists to show ————————————————— */
.bpay-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--cr-border);
  border-left: 3px solid var(--bpay-accent);
  border-radius: var(--r-lg);
  background: var(--cr-surface-2);
}
.bpay-eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cr-muted);
}
.bpay-figure {
  margin: 0.25rem 0 0;
  font-family: var(--cr-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--cr-text);
}
/* Nothing left to chase — the figure steps back and the chip carries the news. */
.bpay-hero.is-settled .bpay-figure { color: var(--cr-muted); }
.bpay-hero__of {
  margin: 0.3125rem 0 0;
  font-size: 0.8125rem;
  color: var(--cr-muted);
}
.bpay-hero__of b { font-weight: 600; color: var(--cr-text-2); }

.bpay-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.bpay-status--open {
  background: var(--cr-warning-soft);
  color: color-mix(in srgb, var(--cr-warning) 78%, #000);
}
.bpay-status--settled { background: var(--cr-success-soft); color: var(--cr-success-ink); }

/* — Section heads: labels, not headings ——————————————————————————— */
.bpay-section__title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cr-muted);
}
.bpay-count {
  font-family: var(--cr-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--cr-placeholder);
}

/* — What is on the invoice: a ruled list, not bullets ——————————————— */
.bpay-lines {
  margin: 0;
  padding: 0 1.125rem;
  list-style: none;
}
.bpay-lines li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4375rem 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--cr-text-2);
}
.bpay-lines li + li { border-top: 1px solid var(--cr-border); }
.bpay-lines__amount {
  flex: none;
  font-family: var(--cr-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cr-muted);
}

/* — Record a payment: tinted and dashed so it reads as a control ———— */
.bpay-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border: 1px dashed var(--cr-border-2);
  border-radius: var(--r-lg);
  background: var(--cr-surface-2);
}
.bpay-field { flex: 1 1 9rem; min-width: 0; max-width: 15rem; }
.bpay-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cr-text-2);
}
.bpay-form .btn { flex: 0 0 auto; min-height: var(--cr-min-h); }
.bpay-error {
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  color: var(--cr-danger);
}

/* — History: a rail-coded ledger of what has already been received ——— */
.bpay-history {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bpay-payment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0.75rem 0.5rem 0.9375rem;
  border-left: 3px solid var(--cr-border-2);
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) var(--ease);
}
.bpay-payment + .bpay-payment { margin-top: 0.25rem; }
.bpay-payment:hover { background: var(--cr-surface-2); }
.bpay-payment.is-synced { border-left-color: var(--cr-success); }
.bpay-payment__amount {
  font-family: var(--cr-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--cr-text);
}
.bpay-payment__date {
  margin: 0.0625rem 0 0;
  font-size: 0.75rem;
  color: var(--cr-muted);
}
.bpay-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--cr-success-soft);
  color: var(--cr-success-ink);
}
.bpay-empty {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  padding: 1.125rem;
  border: 1px dashed var(--cr-border);
  border-radius: var(--r-lg);
  font-size: 0.8125rem;
  color: var(--cr-muted);
}
.bpay-empty i { color: var(--cr-border-strong); }

/* =========================================================================
   20 · NOTIFICATION PANEL — the navbar bell and its categorised feed
   -------------------------------------------------------------------------
   An inbox, not a dropdown list. Three fixed regions — header, filter tabs,
   footer — bracket one scrolling feed, so the count, the filter and the
   "last 30 days" caveat never scroll out of reach of the rows they describe.

   The feed is grouped twice over. Vertically it is a timeline: an urgent
   "Needs attention" group pinned above Today / Yesterday / …, with a sticky
   header per group so the reader always knows how old the row under the
   cursor is. Horizontally each row is colour-keyed by where it came from —
   a 3px rail in the domain tone (worksheet = project blue, system = deep
   system blue, urgent = danger) plus a matching mark. That rail is the whole
   categorisation cue; nothing else needs to shout.

   Filtering is CSS only. The feed carries data-filter and every row carries
   data-kind, so All / Worksheets / System is three display rules. Groups
   advertise the kinds they hold via data-has-worksheet / data-has-system, so
   a group the filter empties takes its own header down with it — impossible
   to strand a "Yesterday" heading above nothing.
   ========================================================================= */

/* — Bell ————————————————————————————————————————————————————————
   The navbar carries .navbar-dark, whose `.navbar-dark .navbar-nav .nav-link`
   paints links white for a dark bar this app never actually renders — on the
   light dashboard bar that leaves the bell invisible. The old markup escaped
   it with .text-dark utilities; these selectors out-specify it instead, so the
   bell needs no utility classes to be seen. */
.navbar .navbar-nav .nav-link.noti-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--r-md);
  color: var(--cr-text);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.navbar .navbar-nav .nav-link.noti-bell:hover,
.navbar .navbar-nav .nav-link.noti-bell:focus,
.navbar .navbar-nav .nav-link.noti-bell:focus-visible,
.navbar .navbar-nav .show > .nav-link.noti-bell,
.navbar .navbar-nav .nav-link.noti-bell[aria-expanded="true"] {
  background-color: var(--cr-primary-soft);
  color: var(--cr-text);
}
.noti-bell:focus         { outline: 0; box-shadow: none; }
.noti-bell:focus-visible { outline: 0; box-shadow: var(--cr-focus-ring); }
.noti-bell .icon { color: inherit; }

/* The bell sits between the search field and the avatar with nothing between
   them; its own margin is what keeps the count pill off both. */
.navbar .navbar-nav .nav-item.noti { margin: 0 0.625rem 0 0.75rem; }

/* The count sits where the old bare dot did, but says how many. It is a pill
   so 2- and 3-digit counts grow sideways instead of squashing.

   Anchored from .noti-bell because the theme's `.nav-link span { position:
   relative }` out-specifies a lone class - which dropped the count back into
   the flow beside the bell glyph and stretched the button around the pair. */
.noti-bell .noti-bell__count {
  position: absolute;
  top: 0.125rem;
  right: -0.0625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border: 2px solid var(--cr-bg);
  border-radius: var(--r-pill);
  background: var(--cr-primary);
  color: var(--cr-primary-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
}
/* Anything urgent in the feed promotes the count to the danger tone — the one
   signal that survives the panel being shut. */
.noti-bell .noti-bell__count.is-urgent { background: var(--cr-danger); }

/* — Panel shell ——————————————————————————————————————————————————— */
/* Bootstrap stamps data-bs-popper on the menu as it opens and its own
   `.dropdown-menu[data-bs-popper] { left: 0 }` out-specifies a lone class —
   which pinned the panel to the bell's LEFT edge and threw 26rem of it off the
   right of the viewport, then snapped back on the next toggle. Anchoring from
   .dropdown-menu.noti-panel matches that specificity and, sitting later in the
   file, wins for good. Every other declaration is anchored there too, because
   the theme's `.navbar-nav .dropdown-menu` block (two classes) also hands the
   menu `position: relative`, `display: block`, `opacity: 0` and
   `pointer-events: none`, restoring the last two only through its own .show
   rules. The panel drives its own visibility from `display`, so it states
   position, opacity and pointer-events outright rather than depending on which
   .show rule the theme happens to apply. */
.dropdown-menu.noti-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  display: none;
  width: 26rem;
  max-width: calc(100vw - 1.5rem);
  max-height: min(34rem, calc(100vh - 6rem));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cr-border);
  border-radius: var(--r-lg);
  background: var(--cr-surface);
  box-shadow: var(--sh-pop);
}
.dropdown-menu.noti-panel.show {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

/* Volt squares every <span> in a dropdown to a 30px icon slot - both
   `.dropdown-menu span` and `.navbar .navbar-nav .dropdown .dropdown-menu span`
   - which out-specified the panel's own single-class rules and clipped each
   row's body to 30px, two clamped characters wide. Reset it at matching
   specificity from .noti-panel, then hand the avatar mark its size back. */
.dropdown-menu.noti-panel span,
.navbar .navbar-nav .dropdown .dropdown-menu.noti-panel span {
  width: auto;
}
.dropdown-menu.noti-panel .noti-item__mark,
.navbar .navbar-nav .dropdown .dropdown-menu.noti-panel .noti-item__mark {
  width: 2rem;
}

/* — Header ————————————————————————————————————————————————————————— */
.noti-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem 0.75rem;
}
.noti-panel__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cr-text);
}
.noti-panel__sub {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--cr-muted);
}

.noti-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--cr-muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.noti-clear:hover:not(:disabled) {
  background: var(--cr-primary-soft);
  color: var(--cr-text);
}
.noti-clear:disabled { opacity: 0.4; cursor: default; }
.noti-clear i { font-size: 0.6875rem; }

/* — Filter tabs ———————————————————————————————————————————————————
   A segmented control on a recessed track, so the three categories read as
   one control rather than three loose buttons. */
.noti-tabs {
  display: flex;
  gap: 0.125rem;
  margin: 0 1rem 0.75rem;
  padding: 0.1875rem;
  border-radius: var(--r-md);
  background: var(--cr-surface-2);
}
.noti-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: calc(var(--r-md) - 0.1875rem);
  background: transparent;
  color: var(--cr-muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.noti-tab:hover { color: var(--cr-text-2); }
.noti-tab.is-active {
  background: var(--cr-surface);
  color: var(--cr-text);
  box-shadow: var(--sh-sm);
}
.noti-tab__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  padding: 0 0.25rem;
  border-radius: var(--r-pill);
  background: var(--cr-primary-soft);
  color: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.noti-tab.is-active .noti-tab__n {
  background: var(--cr-primary);
  color: var(--cr-primary-ink);
}

/* — Feed ——————————————————————————————————————————————————————————— */
.noti-feed {
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--cr-border);
}
.noti-group { position: relative; }

.noti-group__head {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.5rem 1rem 0.375rem;
  background: color-mix(in srgb, var(--cr-surface) 92%, transparent);
  backdrop-filter: blur(6px);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr-muted);
}
.noti-group[data-tone="urgent"] .noti-group__head { color: var(--cr-danger); }

/* — Row ————————————————————————————————————————————————————————————
   Rail, mark, body. The rail is the category; the mark is the actor. */
.noti-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6875rem;
  padding: 0.625rem 1rem 0.6875rem 0.8125rem;
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.noti-item + .noti-item { box-shadow: inset 0 1px 0 var(--cr-border); }
.noti-item:hover           { background: var(--cr-surface-2); text-decoration: none; }
.noti-item:focus-visible   { outline: 0; box-shadow: var(--cr-focus-ring); }

.noti-item[data-kind="worksheet"] { border-left-color: var(--cr-project); }
.noti-item[data-kind="system"]    { border-left-color: var(--cr-system); }
.noti-item[data-urgent]           { border-left-color: var(--cr-danger); }
.noti-item[data-urgent]           { background: var(--cr-danger-soft); }
.noti-item[data-urgent]:hover     { background: color-mix(in srgb, var(--cr-danger) 16%, var(--cr-surface)); }

/* A pre-deep-link system row has nowhere to go; it stays a record, not a link. */
.noti-item.is-inert { pointer-events: none; }

.noti-item__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin-top: 0.125rem;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--cr-surface-2);
}
.noti-item__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.noti-item__mark--system {
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cr-system) 12%, transparent);
  color: var(--cr-system);
  font-size: 0.8125rem;
}

.noti-item__body { min-width: 0; }
.noti-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.noti-item__who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--cr-text);
}
.noti-item__time {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  color: var(--cr-placeholder);
  white-space: nowrap;
}
/* Two lines is the whole budget: enough to tell what happened, never enough
   for one chatty comment to push the rest of the feed off-screen. */
.noti-item__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.0625rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--cr-text-2);
}
.noti-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-top: 0.375rem;
}

.noti-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--r-xs);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.noti-tag--code {
  background: color-mix(in srgb, var(--cr-project) 12%, transparent);
  color: var(--cr-project);
  font-family: var(--cr-font-mono);
  letter-spacing: 0;
}
.noti-tag--urgent {
  background: var(--cr-danger-soft);
  color: var(--cr-danger);
  text-transform: uppercase;
}
.noti-tag i { font-size: 0.5625rem; }

/* — Category filter — pure CSS ————————————————————————————————————— */
.noti-feed[data-filter="worksheet"] .noti-item[data-kind="system"],
.noti-feed[data-filter="system"]    .noti-item[data-kind="worksheet"] { display: none; }
.noti-feed[data-filter="worksheet"] .noti-group:not([data-has-worksheet]),
.noti-feed[data-filter="system"]    .noti-group:not([data-has-system])  { display: none; }

/* — Empty state ———————————————————————————————————————————————————— */
.noti-empty {
  padding: 2.25rem 1.5rem 2.5rem;
  border-top: 1px solid var(--cr-border);
  text-align: center;
}
.noti-empty i {
  font-size: 1.375rem;
  color: var(--cr-border-strong);
}
.noti-empty__title {
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--cr-text-2);
}
.noti-empty__sub {
  margin: 0.1875rem 0 0;
  font-size: 0.75rem;
  color: var(--cr-muted);
}

/* — Footer ————————————————————————————————————————————————————————— */
.noti-panel__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5625rem 1rem;
  border-top: 1px solid var(--cr-border);
  background: var(--cr-surface-2);
  font-size: 0.6875rem;
  color: var(--cr-muted);
}

/* — Responsive ————————————————————————————————————————————————————
   The navbar's mobile rule stretches every .navbar-nav .dropdown-menu to
   100% and strips its shadow; the panel is a floating sheet at every width,
   so it opts out. */
@media (max-width: 991.98px) {
  .navbar-nav .noti-panel {
    width: 22rem;
    box-shadow: var(--sh-pop);
  }
}

/* =========================================================================
   21 · CLIENT COMMENT LEDGER (.ccm) — the comment feed on a client record
   -------------------------------------------------------------------------
   The app has two comment surfaces, and they are two different things:

     .cmt-*  a THREAD. Worksheet and kanban-task discussion — avatar gutter,
             quiet meta, soft bubble, read as prose. Section 18.
     .ccm-*  a LEDGER. Everything ever noted against a client account, grouped
             under the day it was written, with a sticky day header and a
             per-author tinted disc on the rail, so the left edge answers "who
             and when" before you read a word.

   Use the thread where people are talking to each other about one item; use
   the ledger where the record is the point.

   This block lived in a <style> in client.html. head-support swaps page
   stylesheets on boosted navigation, so page-level CSS leaks between pages —
   and 130 lines of it is not page-level anyway.
   ========================================================================= */

/* Client comments — the ledger.
   Read as an account record, not a chat: entries hang off a ruled margin,
   grouped under the day they were written. The avatar discs sit on the rail
   and are tinted per author, so the left edge answers "who and when" before
   you read a word. Everything else stays quiet. */
.ccm__card { padding: 1.25rem; }

.ccm__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.875rem; margin-bottom: 1rem; border-bottom: 1px solid var(--cr-border);
}
.ccm__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--cr-text); }
.ccm__sub { margin: 0.1875rem 0 0; font-size: 0.75rem; color: var(--cr-muted); }

/* Segmented range switcher — one track, the active segment lifted onto the surface */
.ccm__range { display: inline-flex; gap: 0.125rem; padding: 0.1875rem; border-radius: var(--r-pill); background: var(--cr-surface-2); flex: none; }
.ccm__range-btn {
  padding: 0.25rem 0.625rem; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--cr-muted);
  font-size: 0.6875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.ccm__range-btn:hover { color: var(--cr-text-2); }
.ccm__range-btn.is-on { background: var(--cr-surface); color: var(--cr-text); box-shadow: var(--sh-xs); }
.ccm__range-btn:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }

/* Composer sits at the top: the feed is newest-first, so writing belongs where reading starts */
.ccm-composer {
  border: 1px solid var(--cr-border); border-radius: var(--r-lg); background: var(--cr-surface);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ccm-composer:focus-within { border-color: var(--cr-focus-border); box-shadow: var(--cr-focus-ring); }
.ccm-composer__field,
.ccm-composer__field.form-control {
  display: block; width: 100%; min-height: 4.5rem;
  padding: 0.75rem 0.875rem 0.5rem; border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: transparent; color: var(--cr-text); font-size: 0.8125rem; line-height: 1.55; resize: vertical;
}
.ccm-composer__field:focus { border: 0; outline: none; box-shadow: none; background: transparent; }
.ccm-composer__field::placeholder { color: var(--cr-placeholder); }
.ccm-composer__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  border-top: 1px solid var(--cr-border); border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--cr-surface-2);
}
.ccm-composer__who { font-size: 0.6875rem; color: var(--cr-muted); }
.ccm-composer__error { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--cr-danger); }

/* Feed — the ruled margin runs behind the avatar column */
.ccm__feed {
  position: relative; margin-top: 1.25rem;
  max-height: 32rem; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--cr-border-2) transparent;
}
.ccm__feed::-webkit-scrollbar { width: 10px; }
.ccm__feed::-webkit-scrollbar-track { background: transparent; }
.ccm__feed::-webkit-scrollbar-thumb {
  background: var(--cr-border-2); background-clip: content-box;
  border: 3px solid transparent; border-radius: var(--r-pill);
}
.ccm__feed::-webkit-scrollbar-thumb:hover { background: var(--cr-border-strong); background-clip: content-box; }
.ccm__feed::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0.9375rem;
  width: 1px; background: var(--cr-border); pointer-events: none;
}
.ccm__feed:has(.ccm__empty)::before { display: none; }

/* Day heading interrupts the rail and pins while its day scrolls */
.ccm__day {
  position: sticky; top: 0; z-index: 2;
  margin: 0; padding: 0.375rem 0 0.5rem;
  background: var(--cr-surface);
  font-size: 0.6875rem; font-weight: 600; color: var(--cr-muted);
}
.ccm-note + .ccm__day { margin-top: 0.75rem; padding-top: 0.75rem; }

/* One note */
.ccm-note {
  position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem; padding: 0.4375rem 0.5rem 0.4375rem 0;
  border-radius: var(--r-lg);
  transition: background-color var(--t-fast) var(--ease);
}
.ccm-note:hover { background: var(--cr-surface-2); }
.ccm-note:hover .ccm-note__av { box-shadow: 0 0 0 1px var(--cr-border-2), 0 0 0 4px var(--cr-surface-2); }

/* The disc punches through the rail with a surface-coloured ring */
.ccm-note__av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--r-pill);
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: 0 0 0 1px var(--cr-border-2), 0 0 0 4px var(--cr-surface);
  transition: box-shadow var(--t-fast) var(--ease);
}
.ccm-note__av--1 { color: var(--cr-project);  background: color-mix(in srgb, var(--cr-project) 14%, var(--cr-surface)); }
.ccm-note__av--2 { color: var(--cr-client);   background: color-mix(in srgb, var(--cr-client) 14%, var(--cr-surface)); }
.ccm-note__av--3 { color: var(--cr-supplier); background: color-mix(in srgb, var(--cr-supplier) 16%, var(--cr-surface)); }
.ccm-note__av--4 { color: var(--cr-tertiary); background: color-mix(in srgb, var(--cr-tertiary) 12%, var(--cr-surface)); }
.ccm-note__av--5 { color: var(--cr-system);   background: color-mix(in srgb, var(--cr-system) 12%, var(--cr-surface)); }

.ccm-note__body { min-width: 0; }
.ccm-note__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.375rem; min-height: 1.375rem; }
.ccm-note__author { font-size: 0.8125rem; font-weight: 700; line-height: 1.3; color: var(--cr-text); }
.ccm-note__time { font-size: 0.6875rem; color: var(--cr-placeholder); white-space: nowrap; }
/* A project chip only appears when the note is actually filed against one */
.ccm-note__project {
  padding: 0.0625rem 0.4375rem; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--cr-project) 10%, var(--cr-surface));
  color: var(--cr-project); font-size: 0.6875rem; font-weight: 600; line-height: 1.4;
}
.ccm-note__text {
  margin: 0.125rem 0 0; color: var(--cr-text-2);
  font-size: 0.8125rem; line-height: 1.6; max-width: 62ch;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.ccm__empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.75rem 1rem; text-align: center; }
.ccm__empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill);
  background: var(--cr-surface-2); color: var(--cr-placeholder); font-size: 1.125rem;
}
.ccm__empty-text { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--cr-text-2); }
.ccm__empty-hint { margin: 0; font-size: 0.75rem; color: var(--cr-placeholder); }

@media (max-width: 575.98px) {
  .ccm__head { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .ccm-note, .ccm-note__av, .ccm-composer, .ccm__range-btn { transition: none; }
}

/* =========================================================================
   LUCIDE ICONS
   -------------------------------------------------------------------------
   Every icon in the app is a Lucide SVG rendered by the "icon" template tag
   (dsm/templatetags/lucide.py); the artwork lives in dsm/lucide_icons.py.
   NB: this file is served as a static asset, not rendered as a template, so
   a template tag written here would reach the browser verbatim rather than
   being evaluated. Keep it plain CSS.

   An icon sizes itself from the surrounding font-size and takes its colour
   from `currentColor`, so a text-* utility on the icon or its parent colours
   it — there is nothing to set per icon.
   ========================================================================= */
.lucide {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Size steps, for the few places an icon must outgrow its text. */
.lucide-sm { width: 0.875em; height: 0.875em; }
.lucide-lg { width: 1.333em; height: 1.333em; }
.lucide-2x { width: 2em; height: 2em; }
.lucide-3x { width: 3em; height: 3em; }

/* Leading icon in a flex row of text: stretches the icon's box to the body
   line-height so the artwork centres on the FIRST line rather than sitting
   above it, while the row stays align-items-start for wrapped text. */
.lucide-line { height: 1.5em; }

/* Spinners: pair with the "loader-circle" icon. */
.lucide-spin { animation: lucide-spin 1s linear infinite; transform-origin: center; }
@keyframes lucide-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lucide-spin { animation: none; }
}

/* -------------------------------------------------------------------------
   Notyf toast icons
   Notyf writes its icon element with textContent, so it cannot take SVG
   markup - the icon has to arrive through CSS. Each type masks the Lucide
   artwork and paints it with the colour Notyf sets inline on the element.
   Keep these in step with the icon names in notify.js.
   ------------------------------------------------------------------------- */
.notyf__icon--lucide {
  display: block;
  width: 21px;
  height: 21px;
  margin: 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--notyf-icon) center / contain no-repeat;
          mask: var(--notyf-icon) center / contain no-repeat;
}
.notyf__icon--bell { --notyf-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10.268%2021a2%202%200%200%200%203.464%200'/%3E%20%3Cpath%20d='M3.262%2015.326A1%201%200%200%200%204%2017h16a1%201%200%200%200%20.74-1.673C19.41%2013.956%2018%2012.499%2018%208A6%206%200%200%200%206%208c0%204.499-1.411%205.956-2.738%207.326'/%3E%3C/svg%3E"); }
.notyf__icon--info { --notyf-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%20%3Cpath%20d='M12%2016v-4'/%3E%20%3Cpath%20d='M12%208h.01'/%3E%3C/svg%3E"); }
.notyf__icon--circle-check { --notyf-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%20%3Cpath%20d='m16%209-5.5%205.5L8%2012'/%3E%3C/svg%3E"); }
.notyf__icon--triangle-alert { --notyf-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3'/%3E%20%3Cpath%20d='M12%209v4'/%3E%20%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E"); }
.notyf__icon--bug { --notyf-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020v-9'/%3E%20%3Cpath%20d='M14%207a4%204%200%200%201%204%204v3a6%206%200%200%201-12%200v-3a4%204%200%200%201%204-4z'/%3E%20%3Cpath%20d='M14.12%203.88%2016%202'/%3E%20%3Cpath%20d='M21%2021a4%204%200%200%200-3.81-4'/%3E%20%3Cpath%20d='M21%205a4%204%200%200%201-3.55%203.97'/%3E%20%3Cpath%20d='M22%2013h-4'/%3E%20%3Cpath%20d='M3%2021a4%204%200%200%201%203.81-4'/%3E%20%3Cpath%20d='M3%205a4%204%200%200%200%203.55%203.97'/%3E%20%3Cpath%20d='M6%2013H2'/%3E%20%3Cpath%20d='m8%202%201.88%201.88'/%3E%20%3Cpath%20d='M9%207.13V6a3%203%200%201%201%206%200v1.13'/%3E%3C/svg%3E"); }
.notyf__icon--x { --notyf-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%206%206%2018'/%3E%20%3Cpath%20d='m6%206%2012%2012'/%3E%3C/svg%3E"); }
.notyf__icon--refresh-cw { --notyf-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2523000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012a9%209%200%200%201%209-9%209.75%209.75%200%200%201%206.74%202.74L21%208'/%3E%20%3Cpath%20d='M21%203v5h-5'/%3E%20%3Cpath%20d='M21%2012a9%209%200%200%201-9%209%209.75%209.75%200%200%201-6.74-2.74L3%2016'/%3E%20%3Cpath%20d='M8%2016H3v5'/%3E%3C/svg%3E"); }

/* =========================================================================
   "POSTED TO XERO" MARKER
   -------------------------------------------------------------------------
   A solid cloud in Xero's blue. Lucide draws outlines, so a filled icon needs
   `fill` as well as the stroke colour; setting them on the icon rather than
   inheriting means the marker keeps its colour whatever control it sits in.

   These markers report state and are not clickable, so they sit on disabled
   buttons — and .btn-icon greys and fades anything disabled, which would mute
   the brand colour doing the work. A control carrying the marker keeps full
   strength; it is still disabled, just not dimmed.
   ========================================================================= */
.lucide-xero {
  fill: var(--cr-xero);
  stroke: var(--cr-xero);
}

.btn.btn-icon:disabled:has(.lucide-xero),
.btn.btn-icon.disabled:has(.lucide-xero) {
  opacity: 1;
}

/* =========================================================================
   22 · WORKSHEET JOURNEY (.wj) — the run of documents an item passes through
   -------------------------------------------------------------------------
   Proposal → purchase order → supplier invoice → client invoice, left to
   right, in the order they are raised. It replaced four "Go to …" buttons that
   each appeared only once their own document existed, so the panel could say
   where an item had been but never how far along it was or what came next.

   Wordless by design: a glyph and a two-letter code. It lives in a third-width
   column beside a form — anything spelled out would either wrap to three lines
   or set the column's width — so the naming, the reference and the invitation
   to click are all in the tooltip, which every stage carries whether it is
   reached or not.

   It has no card of its own: no ground, no edge, no shadow. The nodes float on
   the page and the connectors are the only structure, which is what keeps a
   diagram sitting under a toolbar from reading as a second toolbar.

   Colour is carried by the NODES alone — the connectors stay neutral at every
   state. One knob per stage: --wj-accent, in the domain tone (§1.6 — client
   money in is teal, supplier money out is gold), with --wj-ink derived from it
   at the same 72% mix .deposit-lbl--* uses, so the two agree. Pending stages
   never read the knob, which is why a stage can carry its variant class
   unconditionally.

   Reached is a filled node, pending is an outlined one (§5 — hierarchy comes
   from fill). That is not decoration: with no card, the tile sits on --cr-bg,
   and --cr-surface-2 is the very same value in the cool tone, so a filled
   pending tile would be invisible.
   ========================================================================= */
.wj {
  /* --wj-pad-t is read by .wj-arrow to find the tile's centreline; the two
     must stay in step, hence the token rather than a literal in both. */
  --wj-tile: 2rem;
  --wj-pad-t: 0.125rem;
  padding: 0;
}

/* No gap: the cells have to touch for the connectors to meet across the
   boundary. The breathing room is the hit area's own padding. */
.wj-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wj-stage {
  --wj-accent: var(--cr-border-strong);
  --wj-ink: var(--cr-text);
  position: relative; /* the arrow hangs off the cell's right edge */
  min-width: 0;
}
.wj-stage--client {
  --wj-accent: var(--cr-client);
  --wj-ink: color-mix(in srgb, var(--cr-client) 72%, #000);
}
.wj-stage--supplier {
  --wj-accent: var(--cr-supplier);
  --wj-ink: color-mix(in srgb, var(--cr-supplier) 72%, #000);
}

.wj-stage__hit {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--wj-pad-t) 0.25rem 0.25rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
/* A stage with nothing to open is not a link; the cursor says so, and the
   tooltip is the whole reason it is still hoverable. */
div.wj-stage__hit { cursor: help; }
a.wj-stage__hit:hover { text-decoration: none; }
a.wj-stage__hit:focus-visible {
  outline: none;
  box-shadow: var(--cr-focus-ring);
}

/* The tile's row. The connectors hang off it so they sit on the tile's
   centreline whatever the padding above resolves to, and stop short of the
   cell edge to leave the arrow a clean gap to sit in. */
.wj-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.wj-node::before,
.wj-node::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--cr-border-2);
  transition: background-color var(--t-fast) var(--ease);
}
.wj-node::before {
  left: 0.1875rem;
  right: 50%;
  margin-right: calc(var(--wj-tile) / 2 + 0.3125rem);
}
.wj-node::after {
  left: 50%;
  right: 0.1875rem;
  margin-left: calc(var(--wj-tile) / 2 + 0.3125rem);
}
.wj-stage:first-child .wj-node::before,
.wj-stage:last-child  .wj-node::after { content: none; }

/* .icon-tile supplies the circle; .wj-tile sizes it and carries the state.
   Its --cr-surface-2 ground is overridden away: unreached is an outline. */
.icon-tile.wj-tile {
  position: relative; /* over the connectors */
  z-index: 1;
  flex: none;
  width: var(--wj-tile);
  height: var(--wj-tile);
  font-size: 0.875rem;
  background: transparent;
  border: 1px solid var(--cr-border-2);
  color: var(--cr-placeholder);
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.wj-stage.is-done .icon-tile.wj-tile {
  background: color-mix(in srgb, var(--wj-accent) 14%, var(--cr-surface));
  border-color: color-mix(in srgb, var(--wj-accent) 40%, transparent);
  color: var(--wj-ink);
}
/* Nothing inverts on hover (§9) — the tile deepens the tint it already has.
   Washing the whole cell instead (the obvious move) drops a blunt rectangle
   into the middle of a line drawing; the tile is the thing being pointed at. */
.wj-stage__hit:hover .icon-tile.wj-tile,
.wj-stage__hit:focus-visible .icon-tile.wj-tile {
  border-color: var(--cr-border-strong);
  color: var(--cr-muted);
}
.wj-stage.is-done .wj-stage__hit:hover .icon-tile.wj-tile,
.wj-stage.is-done .wj-stage__hit:focus-visible .icon-tile.wj-tile {
  background: color-mix(in srgb, var(--wj-accent) 26%, var(--cr-surface));
  border-color: color-mix(in srgb, var(--wj-accent) 65%, transparent);
}

/* Sits on the cell boundary, on the tile's centreline. */
.wj-arrow {
  position: absolute;
  top: calc(var(--wj-pad-t) + var(--wj-tile) / 2);
  right: 0;
  display: inline-flex;
  transform: translate(50%, -50%);
  font-size: 0.75rem;
  color: var(--cr-border-strong);
  pointer-events: none;
}
.wj-stage:last-child .wj-arrow { display: none; }

/* PR / PO / SI / CI — already capitals, so no text-transform to undo. */
.wj-code {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--cr-muted);
  transition: color var(--t-fast) var(--ease);
}
.wj-stage.is-done .wj-code { color: var(--wj-ink); }