@charset "UTF-8";
/* Import all styles first - @import must come before other statements */
/* Light mode styles */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --text-secondary: #4b5563; /* Darker gray for better contrast in light mode */
  --card-bg: #ffffff;
  --border-color: #e5e7eb;
  --highlight-bg: #f3f4f6;
  --highlight-text: #1f2937;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Dark mode CSS variables */
.dark {
  --bg-color: #1f2937;
  --text-color: #f3f4f6;
  --text-secondary: #e5e7eb; /* Much lighter gray for better contrast in dark mode */
  --card-bg: #111827;
  --border-color: #374151;
  --highlight-bg: #374151;
  --highlight-text: #f9fafb;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
/* Dark mode styles for the EventEditor component */
.dark .bg-white {
  background-color: #ffffff;
  background-color: var(--card-bg);
}
.dark .border {
  border-color: #e5e7eb;
  border-color: var(--border-color);
}
.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-900 {
  color: #333333;
  color: var(--text-color);
}
.dark .bg-gray-50 {
  background-color: #f3f4f6;
  background-color: var(--highlight-bg);
}
.dark .shadow-lg {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow);
}
/* Theme transition */
html,
html.dark,
body,
.bg-white,
.border,
.text-gray-600,
.text-gray-700,
.text-gray-900,
.bg-gray-50,
.shadow-lg {
  transition: all 0.3s ease;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
 * Jumpstart Pro default styles
 * Remove these if you'd like to use TailwindUI which expects a clean slate
*/
:root,
.light {
  /*Primary*/
  --bg-primary: #ec1c24;
  --bg-primary-hover: #f16222;
  --text-on-primary: #fff;
  --border-primary: #f16222;
  --border-primary-hover: #f16222;
  --text-primary: #ec1c24;
  --text-primary-hover: #f16222;

  /*Secondary*/
  --bg-secondary: #fff;
  --text-on-secondary: #1e293b;
  --bg-secondary-hover: #f1f5f9;
  --text-on-secondary-hover: #334155;
  --border-secondary: #cbd5e1;

  /*Danger*/
  --bg-danger: #b91c1c;
  --bg-danger-hover: #dc2626;
  --text-on-danger: #fff;
  --border-danger: #ef4444;
  --border-danger-focus: #ef4444;
  --text-danger: #b91c1c;
  --bg-danger-secondary: #fef2f2;
  --text-on-danger-secondary: #b91c1c;
  --icon-on-danger-secondary: #dc2626;

  /*Success*/
  --bg-success: #166534;
  --bg-success-hover: #15803d;
  --text-on-success: #fff;
  --border-success: #16a34a;
  --border-success-focus: #22c55e;
  --text-success: #166534;
  --bg-success-secondary: #f0fdf4;
  --text-on-success-secondary: #15803d;
  --icon-on-success-secondary: #16a34a;

  /*Info*/
  --bg-info-secondary: #eff6ff;
  --text-on-info-secondary: #1d4ed8;
  --icon-on-info-secondary: #3b82f6;

  /*Warning*/
  --bg-warning-secondary: #fffbeb;
  --text-on-warning-secondary: #b45309;
  --icon-on-warning-secondary: #b45309;

  /*Accent*/
  --bg-accent: #2883c4;
  --text-on-accent: #fff;
  --border-accent: #2883c4;
  --text-accent: #2883c4;

  /*Light*/
  --bg-light: #fff;
  --bg-light-hover: #f8fafc;
  --text-on-light: #1e293b;
  --text-on-light-outline: #1e293b;
  --border-light: #cbd5e1;

  /*Dark*/
  --bg-dark: #1e293b;
  --bg-dark-secondary: #64748b;
  --bg-dark-hover: #334155;
  --text-on-dark: #fff;
  --text-on-dark-outline: #1e293b;
  --border-dark: #334155;
  --border-dark-focus: #64748b;

  /*Disabled*/
  --bg-disabled: #e2e8f0;
  --bg-disabled-selected: #94a3b8;
  --text-on-disabled-selected: #e2e8f0;
  --border-disabled: #cbd5e1;
  --bg-disabled-secondary: #cbd5e1;
  --icon-disabled: #94a3b8;

  /*Base*/
  --base-text: #050707;
  --base-text-secondary: #374151;
  --base-text-tertiary: #6b7280;
  --base-text-disabled: #9ca3af;
  --base-icon: #2883c4;
  --base-bg-backdrop: #050707;
  --base-bg-highest: #eee2ce;
  --base-bg-high: #eee2ce;
  --base-bg-base: #eee2ce;
  --base-bg-low: #fff;
  --base-bg-lowest: #eee2ce;
  --base-border-primary: #2883c4;
  --base-border-secondary: #f6a081;
  --base-border-tertiary: #eee2ce;
  --base-border-focus: #ec1c24;
  --base-bg-selected: #ec1c24;
  --base-bg-hover: #eee2ce;
  --base-bg-tooltip: #050707;
  --base-text-on-tooltip: #fff;

  /* Background */
  background-color: #ffffff;

  /* Shared colour tokens */
  --color-black: #000000;
  --color-gray-200: #e5e7eb;
  --color-gray-700: #374151;
  --color-red-50: #fef2f2;
  --color-red-500: #ef4444;
}
/* BLUME D2 "Flow" design system — namespaced .bz tokens + primitives (additive,
   cannot collide with the un-ported screens). See app/assets/stylesheets/design-system/ */
/* ================================================================
   BLUME Design System — master entry ("D2 Flow")
   Load order is deliberate: raw palette → semantic tokens →
   primitives → status. Everything is .bz-namespaced and additive,
   so it never collides with un-ported screens. Imported once from
   application.tailwind.css. See design_handoff_blume_flow/ for the
   source handoff and DESIGN_SYSTEM.md for the usage rules.
   ================================================================ */
/* ================================================================
   BLUME Design System — PALETTE
   The ONLY place raw colour values live. Rebrand = edit this file.
   Semantic roles (tokens.css) and components reference these vars;
   never hardcode hex anywhere else (see DESIGN_SYSTEM.md).
   Scoped to .bz so it cannot affect un-ported screens.
   ================================================================ */
.bz {
  /* — Ink / neutrals — */
  --c-ink:          #1B1A17;  /* deep warm ink: primary text + primary button */
  --c-ink-hover:    #141310;  /* primary button hover */
  --c-white:        #FFFFFF;  /* panels, fields */
  --c-chrome-ink:   #1B1A17;  /* dark chrome (d3 direction) */

  /* Grounds */
  --c-paper-cream:  #F7F3EA;  /* base warm ground; also primary-button text */
  --c-paper-d2:     #FBFAF7;  /* D2 ground (the chosen direction) */
  --c-chrome-cream: #EFE7D7;  /* cream nav/sidebar (base direction) */

  /* Alpha-ink (text, hairlines, washes — based on #1B1A17) */
  --c-ink-a45:  rgba(27, 26, 23, 0.45);  /* modal drop shadow */
  --c-ink-a56:  rgba(27, 26, 23, 0.56);
  --c-ink-a36:  rgba(27, 26, 23, 0.36);
  --c-ink-a11:  rgba(27, 26, 23, 0.11);
  --c-ink-a08:  rgba(27, 26, 23, 0.08);
  --c-ink-a07:  rgba(27, 26, 23, 0.07);
  --c-ink-a06:  rgba(27, 26, 23, 0.06);
  --c-ink-a05:  rgba(27, 26, 23, 0.05);
  --c-ink-a04:  rgba(27, 26, 23, 0.04);
  --c-ink-a025: rgba(27, 26, 23, 0.025);

  /* — Brand accents (use sparingly — see DESIGN_SYSTEM.md) — */
  --c-clay:       #F16222;                 /* live total + active marker ONLY */
  --c-clay-hover: #D9531A;                 /* clay button hover */
  --c-clay-a08:   rgba(241, 98, 34, 0.08); /* clay outline-button hover wash */
  --c-danger:     #C9302B;                 /* destructive / over-budget ONLY */
  --c-danger-a08: rgba(201, 48, 43, 0.08);

  /* Tinted-button washes — soft fill + hover fill, paired with a base colour
     token for text/border. The shared vocabulary for the action buttons
     (Save-draft green · Send red · Sync blue · Customise clay · Download green). */
  --c-blue:        #2883C5;                  /* integrations / Xero actions */
  --c-blue-bg:     rgba(40, 131, 197, 0.12);
  --c-blue-bg-hi:  rgba(40, 131, 197, 0.20);
  --c-danger-bg:    rgba(201, 48, 43, 0.10);
  --c-danger-bg-hi: rgba(201, 48, 43, 0.18);
  --c-clay-bg:      rgba(241, 98, 34, 0.12);
  --c-clay-bg-hi:   rgba(241, 98, 34, 0.20);
  --c-green:        #3E6B47;
  --c-green-bg:     rgba(94, 148, 104, 0.14);
  --c-green-bg-hi:  rgba(94, 148, 104, 0.22);

  /* — Status hues (dot / bg / fg) — dot is the brand identity colour;
     bg is the same hue at low alpha, fg a darkened shade for readable text. — */
  --c-status-quick-quote-dot:     #A89B86;
  --c-status-quick-quote-bg:      rgba(168, 155, 134, 0.16);
  --c-status-quick-quote-fg:      #73685A;
  --c-status-inquiry-dot:         #2F7FE0;
  --c-status-inquiry-bg:          rgba(47, 127, 224, 0.12);
  --c-status-inquiry-fg:          #1E5BB0;
  --c-status-quote-sent-dot:      #F5A300;
  --c-status-quote-sent-bg:       rgba(245, 163, 0, 0.14);
  --c-status-quote-sent-fg:       #8A6300;
  --c-status-quote-confirmed-dot: #1FA855;
  --c-status-quote-confirmed-bg:  rgba(31, 168, 85, 0.13);
  --c-status-quote-confirmed-fg:  #157A3D;
  --c-status-quote-declined-dot:  #E5483A;
  --c-status-quote-declined-bg:   rgba(229, 72, 58, 0.12);
  --c-status-quote-declined-fg:   #B0291E;
  --c-status-in-progress-dot:     #7C5CE6;
  --c-status-in-progress-bg:      rgba(124, 92, 230, 0.13);
  --c-status-in-progress-fg:      #553BA8;
  --c-status-deposit-paid-dot:    #00ABAB;
  --c-status-deposit-paid-bg:     rgba(0, 171, 171, 0.13);
  --c-status-deposit-paid-fg:     #017373;
  --c-status-completed-dot:       #2E8B57;
  --c-status-completed-bg:        rgba(46, 139, 87, 0.11);
  --c-status-completed-fg:        #226641;
  --c-status-cancelled-dot:       #9A9590;
  --c-status-cancelled-bg:        rgba(27, 26, 23, 0.06);
  --c-status-cancelled-fg:        #6B6660;
  /* Non-status calendar entries (flower arrival = rose, pickup = orange) */
  --c-status-flower-arrival-dot:  #E0568C;
  --c-status-flower-arrival-bg:   rgba(224, 86, 140, 0.13);
  --c-status-flower-arrival-fg:   #A8345F;
  --c-status-flower-pickup-dot:   #F2790B;
  --c-status-flower-pickup-bg:    rgba(242, 121, 11, 0.13);
  --c-status-flower-pickup-fg:    #9A4D00;

  /* Budget-health meter (over = --c-danger) */
  --c-budget-ok:   #5E9468;
  --c-budget-warn: #8A6A1E;

  /* Header banners + warning feedback (warm amber — calmer than the old #f59e0b) */
  --c-warn-bg:   #F4E8CE;
  --c-warn-fg:   #6E5414;
  --c-warn-line: rgba(110, 84, 20, 0.22);

  /* Tip / help callout — light clay wash (hover help, see .bz-tip / InfoTooltip) */
  --c-tip-bg:   #FCEFE9;
  --c-tip-line: rgba(200, 82, 28, 0.18);
}
/* Modal scrim — exposed globally (not just under .bz) because overlays are a
   full-screen, app-wide concern and must work on not-yet-ported (legacy) modals
   too. The raw value still lives only here in the palette. Used by .bz-scrim. */
:root {
  --bz-scrim: rgba(27, 26, 23, 0.34);
}
/* ================================================================
   BLUME Design System — SEMANTIC TOKENS
   Roles that components consume. These reference palette.css only —
   components must never reach past this layer to raw hex.
   Direction wrappers (.bz-d2) override grounds. The app uses .bz-d2.
   ================================================================ */
.bz {
  /* Text */
  --ink:   var(--c-ink);
  --mute:  var(--c-ink-a56);
  --faint: var(--c-ink-a36);

  /* Lines / surfaces */
  --line:       var(--c-ink-a11);
  --line-soft:  var(--c-ink-a07);
  --paper:      var(--c-paper-cream);
  --panel:      var(--c-white);
  --chrome:     var(--c-chrome-cream);
  --chrome-ink: var(--c-chrome-ink);
  --field:      var(--c-white);

  /* "Soft but defined" elevation — a warm-ink hairline + a layered drop shadow
     (a tight 1–2px shadow for crispness plus a wider, very soft shadow for
     lift). Used together on surfaces (cards, tables, search bars, inputs); the
     hairline alone is the internal divider (row separators, heading underline). */
  --hairline:   var(--c-ink-a08);
  --elevation:  0 1px 2px var(--c-ink-a08), 0 8px 22px -8px var(--c-ink-a08);

  /* Accents */
  --accent: var(--c-clay);
  --danger: var(--c-danger);

  /* Tip callout — hover help box + trigger badge (InfoTooltip) */
  --tip-bg:    var(--c-tip-bg);
  --tip-line:  var(--c-tip-line);
  --tip-label: var(--c-clay);
  --tip-fg:    var(--c-ink);

  /* Type */
  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'Geist Mono', ui-monospace, Menlo, monospace;

  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bz *, .bz *::before, .bz *::after { box-sizing: border-box; }
/* Direction ground — D2 is the chosen, shipping direction */
.bz-d2 { --paper: var(--c-paper-d2); --chrome: var(--c-white); }
/* Page ground — the warm paper that fills the viewport below the 70px header,
   so a short or empty table never reveals the white body underneath. Apply to
   the outermost wrapper of a ported index/show screen alongside `bz bz-d2`. */
.bz-page { min-height: calc(100vh - 70px); }
/* ── Type helpers ─────────────────────────────────────────── */
.bz-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.bz-eyebrow a { color: inherit; -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; }
.bz-title   { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.bz-mono    { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.bz-sans    { font-family: var(--sans); }
.bz-serif   { font-family: var(--serif); }
/* ================================================================
   BLUME Design System — PRIMITIVES
   Shared .bz-* components. Consume semantic tokens only; no raw hex.
   Radius / shadow / colour rules are documented in DESIGN_SYSTEM.md.
   ================================================================ */
/* ── Buttons (square corners by design) ───────────────────── */
.bz-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600;
  font-size:14px; letter-spacing:-0.01em; border-radius:0; border:1px solid transparent; cursor:pointer;
  padding:11px 18px; white-space:nowrap; transition: background .18s, color .18s, border-color .18s; }
.bz-btn-primary { background: var(--ink); color: var(--c-paper-cream); }
/* flat — no shadow */
/* color asserted on hover so the legacy global `a:hover` orange (base.css) can't
   win on anchor-rendered primary buttons (link_to ... class: "bz-btn-primary") */
.bz-btn-primary:hover { background: var(--c-ink-hover); color: var(--c-paper-cream); }
.bz-btn-ghost { background: var(--c-ink-a05); color: var(--ink); border-color: transparent; box-shadow: var(--elevation); }
.bz-btn-ghost:hover { background: var(--c-ink-a08); border-color: var(--ink); }
.bz-btn-danger { background: var(--c-danger-a08); color: var(--danger); border-color: transparent; }
.bz-btn-danger:hover { border-color: var(--danger); }
.bz-btn-sm { padding:8px 13px; font-size:13px; border-radius:0; }
.bz-btn:disabled { opacity:0.5; cursor:default; }
.bz-btn:disabled:hover { border-color:transparent; }
/* Clay accent actions — filled + outline (square corners, like every other
   button). The quote editor's Add arrangement / Add hire item. NOTE: these
   intentionally use --accent on a button, which the rest of the system
   reserves for the live total; scoped to deliberate primary actions only. */
.bz-btn-accent { background: var(--accent); color: var(--c-paper-cream); }
.bz-btn-accent:hover { background: var(--c-clay-hover); }
.bz-btn-accent-outline { background: var(--c-white); color: var(--accent); border-color: var(--accent); }
.bz-btn-accent-outline:hover { background: var(--c-clay-a08); }
/* ── Fields ───────────────────────────────────────────────── */
.bz-label { display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--faint); margin-bottom:8px; }
/* Fields are barely-lifted white surfaces: hairline edge + tight drop shadow. */
.bz-field { width:100%; background: var(--field); border:1px solid var(--hairline); border-radius:7px; padding:11px 13px;
  font-family:var(--sans); font-size:15px; color:var(--ink); box-shadow: var(--elevation); outline:none; }
.bz-field:focus { border-color: var(--ink); background: var(--field); }
.bz-field::-moz-placeholder { color: var(--faint); }
.bz-field::placeholder { color: var(--faint); }
/* @tailwindcss/forms (base strategy) styles bare [type='text']/textarea/select at
   equal specificity but loads later, so its white bg + grey border would override
   the field surface. Re-assert under .bz (higher specificity → wins, no
   !important needed). */
.bz input.bz-field, .bz textarea.bz-field, .bz select.bz-field {
  background: var(--field); border:1px solid var(--hairline); border-radius:7px;
  color: var(--ink); box-shadow: var(--elevation); }
.bz input.bz-field, .bz textarea.bz-field { padding:11px 13px; }
.bz input.bz-field:focus, .bz textarea.bz-field:focus, .bz select.bz-field:focus {
  border-color: var(--ink); background: var(--field); box-shadow: var(--elevation); outline: none; }
/* ── Tables (internal dividers are the warm-ink hairline) ──── */
.bz-th { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);
  font-weight:500; text-align:left; padding:0 0 14px; }
.bz-td { font-family:var(--sans); font-size:14.5px; color:var(--ink); padding:16px 0; border-top:1px solid var(--hairline); vertical-align:middle; }
/* ── Card surface: barely-lifted (hairline edge + tight drop shadow) ─ */
.bz-card { background: var(--panel); border-radius:11px; border:1px solid var(--hairline); box-shadow: var(--elevation); }
/* ── Avatar (initials fallback when no photo) ─────────────── */
.bz-avatar-initials { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  border-radius:999px; background: var(--c-ink-a08); color: var(--mute);
  font-family: var(--mono); font-weight:600; font-size:0.8rem; letter-spacing:0.02em; text-transform:uppercase; overflow:hidden; }
/* ── Status pill (colours via .bz-pill--<status> in status.css) ─ */
.bz-pill { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  padding:4px 10px 4px 9px; border-radius:999px; white-space:nowrap; }
/* Secondary payment badge — sits under the pipeline pill; a touch smaller/quieter
   so the pipeline status stays the primary read. */
.bz-pill--payment { font-size:10px; padding:2px 8px 2px 7px; gap:5px; }
.bz-pill--payment .bz-dot { width:5px; height:5px; }
.bz-dot { width:6px; height:6px; border-radius:50%; flex:0 0 auto; background: currentColor; background: var(--dot, currentColor); }
/* Status pill rendered as a button that opens the status & notes modal.
   The trailing arrow lives inside the pill and inherits the status colour. */
.bz-status-cell { position:relative; }
.bz-status-trigger { border:none; background:transparent; padding:0; margin:0; font:inherit; cursor:pointer; display:inline-flex; }
.bz-status-trigger:hover .bz-pill { filter:brightness(0.97); }
/* Arrow is hidden (but keeps its box, so no layout shift) until the row/cell is
   hovered or the trigger is keyboard-focused. */
.bz-status-arrow { margin-left:1px; opacity:0; transition:opacity .12s ease; flex:0 0 auto; }
.bz-status-cell:hover .bz-status-arrow,
.bz-evt-row:hover .bz-status-arrow,
.bz-status-trigger:focus-visible .bz-status-arrow { opacity:1; }
/* ================================================================
   BLUME Design System — STATUS PILLS
   One modifier class per status; each sets the dot colour (--dot),
   background and text from palette.css. Colours live in the palette;
   the Ruby helper (BzStatusHelper) maps Event::Statusable enum values
   onto these classes + display labels.
   ================================================================ */
.bz-pill--quick-quote     { --dot: var(--c-status-quick-quote-dot);     background: var(--c-status-quick-quote-bg);     color: var(--c-status-quick-quote-fg); }
.bz-pill--inquiry         { --dot: var(--c-status-inquiry-dot);         background: var(--c-status-inquiry-bg);         color: var(--c-status-inquiry-fg); }
.bz-pill--quote-sent      { --dot: var(--c-status-quote-sent-dot);      background: var(--c-status-quote-sent-bg);      color: var(--c-status-quote-sent-fg); }
.bz-pill--quote-confirmed { --dot: var(--c-status-quote-confirmed-dot); background: var(--c-status-quote-confirmed-bg); color: var(--c-status-quote-confirmed-fg); }
.bz-pill--quote-declined  { --dot: var(--c-status-quote-declined-dot);  background: var(--c-status-quote-declined-bg);  color: var(--c-status-quote-declined-fg); }
.bz-pill--in-progress     { --dot: var(--c-status-in-progress-dot);     background: var(--c-status-in-progress-bg);     color: var(--c-status-in-progress-fg); }
.bz-pill--deposit-paid    { --dot: var(--c-status-deposit-paid-dot);    background: var(--c-status-deposit-paid-bg);    color: var(--c-status-deposit-paid-fg); }
.bz-pill--completed       { --dot: var(--c-status-completed-dot);       background: var(--c-status-completed-bg);       color: var(--c-status-completed-fg); }
.bz-pill--cancelled       { --dot: var(--c-status-cancelled-dot);       background: var(--c-status-cancelled-bg);       color: var(--c-status-cancelled-fg); }
/* ================================================================
   BLUME Design System — PIPELINE SEGMENT BAR (events index)
   The florist's mental model as a single control:
   All · Quick Quote · Inquiry · Quote · Confirmed · In Progress · Completed,
   with a detached "Archived" pill. Each segment links to its status_filter[]
   set (see EventsHelper::EVENT_PIPELINE_SEGMENTS). Colours come from the
   ink-alpha palette; no raw values here.
   ================================================================ */
.bz-segbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.bz-segbar__track {
  display: flex;
  align-items: center;
  gap: 2px;
  /* 40px overall height to match the events toolbar controls (search field,
     Filters/New-event buttons in events-table.css). Vertical padding gives way
     to the fixed height; align-items centres the segments within it. */
  height: 40px;
  padding: 0 4px;
  background: var(--panel);
  border-radius: 11px;
  box-shadow: var(--elevation);
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.bz-segbar__divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 6px;
  flex: 0 0 auto;
}
.bz-segbar__chevron {
  display: flex;
  align-items: center;
  color: var(--faint);
  padding: 0 1px;
  flex: 0 0 auto;
}
.bz-seg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  cursor: pointer;
  font: inherit;
  border-radius: 7px;
  padding: 7px 11px;
  white-space: nowrap;
  flex: 0 0 auto;
  -webkit-text-decoration: none;
  text-decoration: none;
  /* Resting coloured chips carry a soft tinted fill (the faint wash token
     doubled via an inset flood so the pastel reads on the white track) + dot +
     tinted label, dimmed to a calm 78% so the row sits quietly. Hover lifts to
     full opacity; selecting keeps the same hue but reads stronger via full
     opacity plus a solid coloured border + ring. */
  background: transparent;
  background: var(--seg-bg, transparent);
  color: var(--seg-fg, var(--mute));
  box-shadow: inset 0 0 0 100px transparent;
  box-shadow: inset 0 0 0 100px var(--seg-bg, transparent);
  opacity: .78;
  transition: background .15s, color .15s, box-shadow .15s, opacity .15s;
}
/* Coloured status dot before the label (omitted on the neutral "All"). */
.bz-seg__dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--seg-dot, var(--mute)); }
/* ── Per-segment status hue ───────────────────────────────────
   Each pipeline stage carries its Event::Statusable colour: a soft wash
   fill + dot + tinted label at rest, and a bolder selected state (stronger
   tint, a solid coloured border and a soft outer ring). "All" sets no
   --seg-* vars, so it stays neutral ink. Keyed off the data-segment label
   (set in _pipeline.html.erb). */
.bz-seg[data-segment="quick-quote"] { --seg-dot: var(--c-status-quick-quote-dot);     --seg-bg: var(--c-status-quick-quote-bg);     --seg-fg: var(--c-status-quick-quote-fg); }
.bz-seg[data-segment="inquiry"]     { --seg-dot: var(--c-status-inquiry-dot);         --seg-bg: var(--c-status-inquiry-bg);         --seg-fg: var(--c-status-inquiry-fg); }
.bz-seg[data-segment="quote"]       { --seg-dot: var(--c-status-quote-sent-dot);      --seg-bg: var(--c-status-quote-sent-bg);      --seg-fg: var(--c-status-quote-sent-fg); }
.bz-seg[data-segment="confirmed"]   { --seg-dot: var(--c-status-quote-confirmed-dot); --seg-bg: var(--c-status-quote-confirmed-bg); --seg-fg: var(--c-status-quote-confirmed-fg); }
.bz-seg[data-segment="in-progress"] { --seg-dot: var(--c-status-in-progress-dot);     --seg-bg: var(--c-status-in-progress-bg);     --seg-fg: var(--c-status-in-progress-fg); }
.bz-seg[data-segment="completed"]   { --seg-dot: var(--c-status-completed-dot);       --seg-bg: var(--c-status-completed-bg);       --seg-fg: var(--c-status-completed-fg); }
.bz-seg[data-segment="archived"]    { --seg-dot: var(--c-status-cancelled-dot);       --seg-bg: var(--c-status-cancelled-bg);       --seg-fg: var(--c-status-cancelled-fg); }
/* Hover — no opacity flash or outline; the label just goes bold. Colour is
   re-asserted to its status hue to override the legacy global `a:hover` orange
   (base.css), which would otherwise win on these anchor-rendered chips. */
.bz-seg:hover { color: var(--seg-fg, var(--mute)); }
.bz-seg:hover .bz-seg__label { font-weight: 600; }
/* Active — stronger tint (a second wash layer via the inset flood), a
   solid coloured border (1.5px inset ring), and a soft outer ring. The
   neutral "All" has no --seg-* vars, so it falls back to a solid ink
   border on a clean (unfilled) ground. */
.bz-seg--active,
.bz-seg--active:hover {
  opacity: 1;
  color: var(--seg-fg, var(--ink));
  box-shadow:
    inset 0 0 0 1.5px var(--seg-dot, var(--ink)),
    inset 0 0 0 100px transparent,
    0 0 0 3px var(--seg-bg, var(--c-ink-a05));
  box-shadow:
    inset 0 0 0 1.5px var(--seg-dot, var(--ink)),
    inset 0 0 0 100px var(--seg-bg, transparent),
    0 0 0 3px var(--seg-bg, var(--c-ink-a05));
}
.bz-seg__label { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
.bz-seg--active .bz-seg__label { font-weight: 600; }
.bz-seg__count {
  font-size: 11px;
  line-height: 1;
  color: var(--faint);
  background: transparent;
  border-radius: 5px;
  padding: 2px 5px;
  min-width: 18px;
  text-align: center;
}
.bz-seg--active .bz-seg__count { color: var(--seg-fg, var(--ink)); background: var(--seg-bg, var(--c-ink-a08)); }
/* Detached, right-aligned "Archived" pill — its own raised surface. */
.bz-segbar__archived {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-radius: 11px;
  padding: 0 11px;
  background: var(--panel);
  box-shadow: var(--elevation);
}
.bz-segbar__archived:hover { background: var(--panel); }
.bz-segbar__archived .bz-seg__label { padding-left: 3px; }
/* ================================================================
   BLUME Design System — BUDGET-HEALTH METER (events table)
   A one-glance bar: how much of the client's budget the quote uses, with the
   exact headroom (or overage) beneath. Green normally, amber from 85%, danger
   when over. State + numbers come from EventsHelper#event_budget_health.
   ================================================================ */
.bz-meter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-top: 6px;
}
.bz-meter__track {
  width: 100%;
  max-width: 92px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-ink-a08);
  overflow: hidden;
}
.bz-meter__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--meter-color);
}
.bz-meter__label {
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--meter-color);
}
.bz-meter--ok   { --meter-color: var(--c-status-completed-fg); }
/* green  */
.bz-meter--near { --meter-color: var(--c-status-quote-sent-fg); }
/* amber  */
.bz-meter--over { --meter-color: var(--danger); }
/* danger */
/* ================================================================
   BLUME Design System — EVENTS INDEX TABLE
   Screen-specific layout on top of the .bz-th / .bz-td primitives:
   column paddings, right-aligned numerics, the clickable row + hover,
   and the merged Event / Updated cells. Colours are tokens only.
   ================================================================ */
.bz-evt-table {
  width: 100%;
  border-collapse: collapse;
}
.bz-evt-table thead tr {
  background: var(--c-ink-a04);
  border-bottom: 1px solid var(--hairline);
}
.bz-evt-table .bz-th {
  padding: 15px 12px 13px;
}
.bz-evt-table .bz-th:first-child {
  padding-left: 26px;
}
.bz-evt-table .bz-th:last-child {
  padding-right: 22px;
}
.bz-evt-table .bz-td {
  padding: 13px 12px;
  border-top: 1px solid var(--hairline);
}
.bz-evt-table .bz-td:first-child {
  padding-left: 26px;
}
.bz-evt-table .bz-td:last-child {
  padding-right: 22px;
}
.bz-evt-table tbody tr:first-child .bz-td {
  border-top: none;
}
/* Right-aligned numeric columns (budgeted / total / slush). */
.bz-evt-num {
  text-align: right;
  white-space: nowrap;
}
/* Clickable row (Stimulus event-row#showEvent drives navigation). */
.bz-evt-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
.bz-evt-row:hover {
  background: var(--c-ink-a025);
}
.bz-evt-row--archived {
  opacity: 0.7;
}
.bz-evt-name {
  font-weight: 600;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bz-evt-sub {
  color: var(--mute);
  font-size: 13px;
  margin-top: 2px;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bz-evt-muted {
  color: var(--mute);
  font-size: 13.5px;
  white-space: nowrap;
}
.bz-evt-faint {
  color: var(--faint);
}
/* Subtle tax-basis tag beside the Total figure ("incl. tax" / "excl. tax"). */
.bz-evt-taxtag {
  color: var(--faint);
  font-size: 11px;
  font-weight: 400;
}
/* Location truncates rather than widening the column (matches the handoff). */
.bz-evt-loc {
  display: block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bz-evt-updated {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.bz-evt-updated .bz-evt-time {
  font-family: var(--mono);
  color: var(--faint);
  font-size: 12.5px;
}
/* Empty state. */
.bz-evt-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--mute);
}
.bz-evt-empty__title {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  margin: 12px 0 4px;
}
/* ── Filter toolbar (search · count · Filters popover · New event) ─ */
.bz-evt-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Matches the 16px segbar→table gap below the status bar, so the
     search→status and status→table gaps read as equal. */
  margin-bottom: 16px;
}
.bz-evt-search {
  flex: 0 1 440px;
}
/* search sits left, doesn't fill the row */
.bz-evt-toolbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Toolbar controls + the pipeline segment bar share one height (40px) so the
   search field, Filters/New-event buttons, and status bar read as a set.
   Kept in sync with .bz-segbar__track in segbar.css. */
.bz-evt-search input.bz-field,
.bz-evt-filters__toggle,
.bz-evt-toolbar__actions > .bz-btn-primary {
  height: 40px;
}
/* The borderless + 11px-radius surface is shared by every DB-page search bar
   (see .bz-cat-search input.bz-field in catalog.css); events only adds height. */
/* Selects styled as fields; the native chevron stays (no extra markup/hex). */
.bz-select {
  cursor: pointer;
  min-width: 100%;
}
select.bz-field {
  padding-right: 34px;
}
/* Filters popover — a <details> whose <summary> is the ghost button. */
.bz-evt-filters {
  position: relative;
}
.bz-evt-filters__toggle {
  list-style: none;
  background: var(--c-white);
  border-color: var(--hairline);
  box-shadow: var(--elevation);
}
.bz-evt-filters__toggle:hover {
  background: var(--c-white);
  border-color: var(--ink);
  box-shadow: var(--elevation);
}
.bz-evt-filters__toggle::-webkit-details-marker {
  display: none;
}
.bz-evt-filters__toggle::marker {
  content: '';
}
.bz-evt-filters__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 12px 32px -12px var(--c-ink-a45);
  padding: 18px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bz-evt-filters__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Sort group: the order select + a square direction toggle. */
.bz-evt-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bz-evt-sort .bz-field {
  flex: 1;
}
/* ================================================================
   BLUME Design System — CATALOG SCREENS
   The shared layout for the five directory/catalog index screens
   (Flowers · Materials · Hire items · Clients · Suppliers): a page
   header with eyebrow + title, a toolbar (search · count · add), and
   a .bz-card table built on the .bz-th / .bz-td primitives. Mirrors
   the events table; colours are tokens only. Inline-edit keeps its
   dual-cell (.display-mode / .edit-mode) structure — this layer only
   styles surface, type and layout.
   ================================================================ */
/* --- Page header ------------------------------------------------ */
/* Title block on the left, a short description on the right (wraps below on
   narrow viewports). */
.bz-cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: 22px; }
/* override the global `h1` padding (typography.css) so the title hugs its box */
.bz-cat-head__title { font-size: 25px; margin-top: 2px; line-height: 1; padding: 0; }
.bz-cat-head__desc { flex: 0 1 440px; max-width: 440px; margin: 0; color: var(--mute); font-size: 15px; line-height: 1.45; }
/* Toolbar: search grows, count + actions sit to the right. */
.bz-cat-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bz-cat-search { position: relative; flex: 1; min-width: 0; }
.bz-cat-search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--faint); pointer-events: none; display: flex;
}
/* Borderless search surface on the same soft elevation as the .bz-field
   primitive, with the rounded radius shared by every DB-page search bar (and
   the events status/segment bar). Leading padding makes room for the icon. */
.bz-cat-search input.bz-field {
  width: 100%;
  padding-left: 40px;
  border: none;
  border-radius: 11px;
}
.bz-cat-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
/* --- Table ------------------------------------------------------ */
.bz-cat-table { width: 100%; border-collapse: collapse; }
.bz-cat-table thead tr { background: var(--c-ink-a04); border-bottom: 1px solid var(--hairline); }
.bz-cat-table .bz-th { padding: 15px 14px 13px; }
.bz-cat-table .bz-th:first-child { padding-left: 26px; }
.bz-cat-table .bz-th:last-child { padding-right: 26px; }
.bz-cat-table .bz-td { padding: 13px 14px; border-top: 1px solid var(--hairline); vertical-align: middle; }
.bz-cat-table .bz-td:first-child { padding-left: 26px; }
.bz-cat-table .bz-td:last-child { padding-right: 26px; }
.bz-cat-table tbody tr:first-child .bz-td { border-top: none; }
/* Right-aligned numeric columns (prices, counts). */
.bz-cat-num { text-align: right; white-space: nowrap; font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.bz-cat-table .bz-th--num { text-align: right; }
/* The row: hover wash; an editing row gets a calm highlight. */
.bz-cat-row { transition: background .12s ease; }
.bz-cat-row:hover { background: var(--c-ink-a025); }
.bz-cat-row.is-editing { background: var(--c-ink-a04); }
.bz-cat-name { font-weight: 600; color: var(--ink); }
.bz-cat-sub  { color: var(--mute); font-size: 13px; margin-top: 2px; }
.bz-cat-muted { color: var(--mute); }
.bz-cat-faint { color: var(--faint); }
/* Stacked edit inputs inside a cell. */
.bz-cat-edit { display: flex; flex-direction: column; gap: 8px; }
/* --- Row actions ------------------------------------------------ */
.bz-cat-actions { text-align: right; white-space: nowrap; }
.bz-cat-actions__group { display: inline-flex; justify-content: flex-end; gap: 8px; }
.bz-cat-kebab {
  display: inline-flex; border: none; background: transparent; color: var(--mute);
  cursor: pointer; padding: 6px; margin: -6px; border-radius: 8px;
}
.bz-cat-kebab:hover { background: var(--c-ink-a05); color: var(--ink); }
/* The fixed-positioned dropdown menu (position set inline by JS). */
.bz-cat-menu {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 12px 32px -12px var(--c-ink-a45);
  overflow: hidden;
  min-width: 168px;
}
.bz-cat-menu__item {
  display: block; width: 100%; text-align: left;
  padding: 11px 16px; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: transparent; border: none; cursor: pointer;
}
.bz-cat-menu__item:hover { background: var(--c-ink-a04); }
.bz-cat-menu__item--danger { color: var(--danger); }
/* --- Empty state ------------------------------------------------ */
.bz-cat-empty { text-align: center; padding: 56px 24px; color: var(--mute); }
.bz-cat-empty__icon { color: var(--faint); margin: 0 auto; }
.bz-cat-empty__title { font-family: var(--sans); font-weight: 600; color: var(--ink); margin: 12px 0 4px; }
.bz-cat-empty__sub { font-size: 14px; color: var(--mute); margin-bottom: 18px; }
/* ================================================================
   BLUME Design System — SETTINGS + PROFILE
   The Account-&-team settings screen (accounts#show), the Profile &
   Security screen (devise/registrations) and the preferences screen
   (users/settings#show). Ported from
   design_handoff_blume_flow/blume-settings.jsx (AccountScreen /
   ProfileScreen / Integration / Plan). Consumes semantic tokens + the
   status palette only; no raw hex. See DESIGN_SYSTEM.md.

   Inline edit-in-place: each editable card holds a .display-mode block
   and a hidden .edit-mode <form>; settings_edit_controller toggles the
   .hidden utility between them (Edit / Cancel) and the form submits to
   the existing update action.
   ================================================================ */
/* ── Page scaffold ────────────────────────────────────────── */
.bz-settings { display: flex; flex-direction: column; gap: 14px; padding: 24px 0 48px; }
.bz-settings__head { display: flex; align-items: center; gap: 16px; }
.bz-settings__title { font-size: 23px; line-height: 1.05; }
/* pairs with .bz-title */
.bz-settings__headmeta { flex: 1; min-width: 0; }
/* Square account avatar in the head */
.bz-settings__avatar { width: 44px; height: 44px; border-radius: 8px; flex: 0 0 auto; -o-object-fit: cover; object-fit: cover; }
.bz-settings__avatar--initials { display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-ink-a08); color: var(--ink); font-family: var(--mono); font-weight: 600;
  font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
/* ── Card (built on the .bz-card surface) ─────────────────── */
.bz-set-card { background: var(--panel); border-radius: 11px; border: 1px solid var(--hairline);
  box-shadow: var(--elevation); overflow: hidden; }
.bz-set-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 24px 0; }
.bz-set-card__headtext { min-width: 0; }
.bz-set-card__title { font-size: 13.5px; letter-spacing: 0.01em; }
/* pairs with .bz-title */
.bz-set-card__desc { font-size: 12.5px; color: var(--mute); margin: 4px 0 0; line-height: 1.45; }
.bz-set-card__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.bz-set-card__body { padding: 18px 24px; }
.bz-set-card__body--tight { padding: 2px 24px 18px; }
/* ── Field grid (display + edit share it) ─────────────────── */
.bz-set-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px 22px; gap: 14px 22px; }
.bz-set-grid__span2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .bz-set-grid { grid-template-columns: 1fr; } }
/* Read-only display field (the handoff DField) */
.bz-dfield__label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.bz-dfield__value { font-size: 15px; color: var(--ink); font-family: var(--sans); }
.bz-dfield__value--mono { font-family: var(--mono); }
.bz-dfield__value--empty { color: var(--faint); }
.bz-dfield__value--pre { white-space: pre-line; line-height: 1.5; }
/* ── Inset sub-panel (branding / billing / integration grounds) ─ */
.bz-set-tile { background: var(--c-ink-a025); border-radius: 12px; padding: 18px; }
.bz-set-tile__label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.bz-set-tilegrid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 22px; gap: 22px; }
@media (max-width: 640px) { .bz-set-tilegrid { grid-template-columns: 1fr; } }
.bz-set-tilegrid--stack { grid-template-columns: 1fr; }
/* ── Logo / avatar upload row (base64-upload preserved) ───── */
.bz-set-upload { display: flex; align-items: center; gap: 16px; }
.bz-set-upload__preview { width: 64px; height: 64px; border-radius: 10px; background: var(--panel);
  box-shadow: 0 1px 4px var(--c-ink-a08); display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-family: var(--mono); font-size: 18px; flex: 0 0 auto; -o-object-fit: contain; object-fit: contain; overflow: hidden; }
.bz-set-upload__preview--round { border-radius: 50%; }
.bz-set-upload__hint { font-size: 12px; color: var(--faint); margin: 0 0 10px; max-width: 260px; line-height: 1.5; }
/* Native file input → ink "Choose file" affordance */
.bz-set-file { display: block; width: 100%; font-family: var(--sans); font-size: 13px; color: var(--mute); cursor: pointer; }
.bz-set-file::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 0;
  font-family: var(--sans); font-size: 13px; font-weight: 600; background: var(--ink); color: var(--c-paper-cream); cursor: pointer; }
.bz-set-file::file-selector-button:hover { background: var(--c-ink-hover); }
/* ── Integration tile ─────────────────────────────────────── */
.bz-integration { display: flex; flex-direction: column; padding: 18px; background: var(--c-ink-a025);
  border-radius: 12px; height: 100%; }
.bz-integration__head { display: flex; align-items: flex-start; gap: 12px; }
.bz-integration__logo { width: 40px; height: 40px; border-radius: 10px; background: var(--panel); color: var(--ink);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 1px 3px var(--c-ink-a08); }
.bz-integration__meta { flex: 1; min-width: 0; }
.bz-integration__name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bz-integration__name { font-size: 15px; font-weight: 600; color: var(--ink); }
.bz-integration__desc { font-size: 13px; color: var(--mute); line-height: 1.5; margin: 3px 0 0; }
.bz-integration__head-actions { flex: 0 0 auto; margin-left: 12px; }
/* Full-bleed "connected as · last synced" banner */
.bz-integration__synced { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 16px -18px 0; padding: 10px 18px; background: var(--c-ink-a025);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 12.5px; color: var(--mute); }
.bz-integration__synced svg { color: var(--faint); flex: 0 0 auto; }
.bz-integration__synced-sep { color: var(--faint); }
/* Two-column body: what-gets-synced | sync-direction, divider between */
.bz-integration__sync-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; margin-top: 18px; }
.bz-integration__sync-grid--single { grid-template-columns: 1fr; }
.bz-integration__sync-col { padding: 4px 0; min-width: 0; }
.bz-integration__sync-grid:not(.bz-integration__sync-grid--single) > .bz-integration__sync-col:first-child { padding-right: 32px; }
.bz-integration__sync-grid:not(.bz-integration__sync-grid--single) > .bz-integration__sync-col + .bz-integration__sync-col {
  border-left: 1px solid var(--line-soft); padding-left: 32px; }
@media (max-width: 640px) {
  .bz-integration__sync-grid { grid-template-columns: 1fr; }
  .bz-integration__sync-grid > .bz-integration__sync-col:first-child { padding-right: 0; }
  .bz-integration__sync-grid > .bz-integration__sync-col + .bz-integration__sync-col {
    border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); margin-top: 18px; padding-top: 18px; }
}
.bz-integration__col-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 18px; }
/* What-gets-synced checklist */
.bz-synclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.bz-synclist__item { display: flex; align-items: flex-start; gap: 12px; }
.bz-synclist__check { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-status-completed-bg); color: var(--c-status-completed-fg); }
/* Xero's checklist uses the brand-blue accent reserved for the integration, and
   lays its four items out in two columns rather than a single tall column. */
.bz-synclist--xero { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 18px 28px; gap: 18px 28px; }
.bz-synclist--xero .bz-synclist__check { background: var(--c-blue-bg); color: var(--c-blue); }
@media (max-width: 640px) { .bz-synclist--xero { grid-template-columns: 1fr; } }
.bz-synclist__title { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.bz-synclist__sub { display: block; font-size: 13px; color: var(--mute); margin-top: 2px; line-height: 1.45; }
/* Sync-direction radios as selectable cards */
.bz-set-radio { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 10px;
  transition: border-color .15s, background .15s; }
.bz-set-radio:hover { border-color: var(--c-ink-a11); }
.bz-set-radio input[type="radio"] { margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }
.bz-set-radio:has(input[type="radio"]:checked) { border-color: var(--accent); background: var(--c-clay-a08); }
.bz-set-radio__title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bz-set-radio__sub { display: block; font-size: 12px; color: var(--mute); margin: 2px 0 0; line-height: 1.45; }
/* ── Billing / plan tile ──────────────────────────────────── */
.bz-plan { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--c-ink-a04); border-radius: 12px; }
.bz-plan__head { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 10px; padding: 14px 16px; }
.bz-plan__name { font-size: 15px; font-weight: 600; color: var(--ink); }
.bz-plan__pricewrap { text-align: right; white-space: nowrap; }
.bz-plan__price { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.bz-plan__cycle { font-size: 13px; color: var(--faint); font-family: var(--mono); }
.bz-plan__desc { font-size: 13px; color: var(--mute); line-height: 1.5; }
.bz-plan__meta { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; gap: 10px; }
.bz-plan__metacell { padding: 10px 12px; background: var(--panel); border-radius: 8px; }
.bz-plan__metacell .bz-dfield__value { font-family: var(--mono); font-size: 13.5px; }
.bz-plan__foot { margin-top: 2px; display: flex; justify-content: flex-end; gap: 8px; }
.bz-plan__price--hero { font-size: 28px; }
.bz-plan--empty { align-items: flex-start; gap: 12px; text-align: left; }
.bz-plan__empty-text { font-size: 13px; color: var(--mute); }
/* ── Plan-selection card (subscriptions#edit) + checkout feature list ── */
.bz-plan-card { display: flex; flex-direction: column; flex: 1 1 280px; max-width: 360px; }
.bz-plan-card__title { font-size: 16px; }
/* pairs with .bz-title */
.bz-plan-card__body { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.bz-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bz-feature-list__item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink); }
.bz-feature-list__check { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--c-budget-ok); }
/* Modifiers that retire one-off inline overrides */
.bz-set-card__body--flush-top { padding-top: 0; }
.bz-set-card__desc--warn { color: var(--danger); }
.bz-settings__head .bz-eyebrow { margin-bottom: 6px; }
/* ── Team table ───────────────────────────────────────────── */
.bz-set-team { width: 100%; border-collapse: collapse; }
.bz-set-team thead tr { background: var(--c-ink-a025); }
.bz-set-team .bz-th { padding: 14px 14px 12px; }
.bz-set-team .bz-th:first-child { padding-left: 26px; }
.bz-set-team .bz-th:last-child { padding-right: 26px; text-align: right; }
.bz-set-team .bz-td { padding: 16px 14px; border-top: 1px solid var(--hairline); }
.bz-set-team .bz-td:first-child { padding-left: 26px; }
.bz-set-team .bz-td:last-child { padding-right: 26px; text-align: right; }
.bz-set-team__user { display: flex; align-items: center; gap: 12px; }
.bz-set-team__name { font-weight: 600; color: var(--ink); }
.bz-set-team__email { font-size: 12.5px; color: var(--faint); font-family: var(--mono); }
.bz-set-team__pending td { background: var(--c-warn-bg); }
.bz-roletags { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-roletag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; background: var(--c-ink-a06); color: var(--mute); }
.bz-roletag--owner { background: var(--ink); color: var(--c-paper-cream); }
.bz-roletag--pending { background: var(--c-warn-bg); color: var(--c-warn-fg); }
.bz-set-team__rowactions { display: inline-flex; align-items: center; gap: 14px; justify-content: flex-end; }
/* ── Danger row ───────────────────────────────────────────── */
.bz-set-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; }
.bz-set-danger__title { font-size: 17px; }
/* pairs with .bz-title */
.bz-set-danger__desc { font-size: 13px; color: var(--mute); margin: 5px 0 0; }
/* ── Profile & Security two-column grid + photo rail ──────── */
.bz-profile-grid { display: grid; grid-template-columns: 1fr 320px; grid-gap: 14px; gap: 14px; align-items: start; }
.bz-profile-grid__main { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 880px) { .bz-profile-grid { grid-template-columns: 1fr; } }
.bz-set-photo { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 22px 24px; }
.bz-set-photo__hint { font-size: 12.5px; color: var(--mute); margin: 0; line-height: 1.5; }
.bz-set-photo__avatar { width: 84px; height: 84px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; }
/* Security read state */
.bz-set-security { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 14px; }
.bz-set-security__icon { color: var(--c-budget-ok); display: flex; flex: 0 0 auto; }
.bz-set-help { font-size: 12px; color: var(--faint); margin: 4px 0 0; }
/* ── Preferences (users/settings#show) card spacing ───────── */
.bz-set-section { display: flex; flex-direction: column; gap: 14px; }
/* ── Vue settings apps (Internationalization / DefaultTerms / ESignature)
   These mount inside a .bz bz-d2 card body; helpers let the Vue <template>s
   consume tokens without raw hex / dark: variants. Inputs/labels reuse
   .bz-field / .bz-label. ── */
.bz-vue-stack { display: flex; flex-direction: column; gap: 20px; }
.bz-vue-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 18px; gap: 18px; }
@media (max-width: 640px) { .bz-vue-row { grid-template-columns: 1fr; } }
.bz-vue-i18ngrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 18px; gap: 18px; }
@media (max-width: 720px) { .bz-vue-i18ngrid { grid-template-columns: 1fr; } }
.bz-vue-h { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-size: 15px; margin: 0 0 4px; }
.bz-vue-desc { font-size: 13px; color: var(--mute); margin: 0 0 4px; line-height: 1.5; }
.bz-vue-suffix { position: relative; display: block; }
.bz-vue-suffix__unit { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center;
  padding-right: 13px; pointer-events: none; color: var(--faint); font-family: var(--mono); font-size: 13px; }
.bz-vue-suffix .bz-field { padding-right: 36px; }
.bz-vue-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--c-ink-a04);
  border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--mute); }
.bz-vue-status__ok { color: var(--c-budget-ok); display: flex; flex: 0 0 auto; }
.bz-vue-status__spin { color: var(--mute); display: flex; flex: 0 0 auto; }
/* Inline help tooltip (DefaultTerms) — ink, replaces the raw-hex inline box */
.bz-vue-tipwrap { position: relative; display: inline-flex; margin-left: 4px; }
.bz-vue-tipicon { width: 16px; height: 16px; color: var(--faint); cursor: help; transition: color .12s; }
.bz-vue-tipicon:hover { color: var(--mute); }
.bz-vue-tip { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px;
  min-width: 300px; padding: 10px 12px; z-index: 50; font-size: 12px; line-height: 1.5;
  background: var(--ink); color: var(--c-paper-cream); border-radius: 7px; box-shadow: 0 8px 20px var(--c-ink-a45); }
.bz-vue-labelrow { display: flex; align-items: center; margin-bottom: 8px; }
/* ================================================================
   BLUME Design System — AUTH (Devise screens)
   Sign in / sign up / password reset / confirmation / unlock / OTP.
   Editorial, left-aligned single column on the warm paper ground —
   no card chrome. Filled, borderless fields; ghost OAuth buttons; a
   black ink primary action. Consumes tokens + primitives only; no
   raw hex. The .bz-oauth ghost button is shared with the
   connected-accounts settings screen. See DESIGN_SYSTEM.md.
   ================================================================ */
/* ── Page ground (sits below the 70px app header) ─────────────── */
.bz-auth {
  min-height: calc(100vh - 70px);
  background: var(--paper);
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* <main> carries 12px side padding + a white background below 1024px;
     break out of it so the paper ground is full-bleed on mobile. */
  margin-left: -12px;
  margin-right: -12px;
}
@media (min-width: 1024px) {
  .bz-auth {
    margin-left: 0;
    margin-right: 0;
  }
}
/* Top utility link (e.g. "New here? See pricing →") — pinned to the very top
   of the page, in line with the logo. Fixed (not absolute) so it escapes the
   <main> stacking context and sits clickable above the transparent header. */
.bz-auth__top { position: fixed; top: 28px; right: 24px; z-index: 101; }
@media (min-width: 1024px) { .bz-auth__top { right: 32px; } }
.bz-auth__toplink {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint);
}
.bz-auth__toplink strong { color: var(--ink); font-weight: 600; }
.bz-auth__toplink:hover strong { color: var(--accent); }
/* ── Centred single column (content left-aligned within) ──────── */
.bz-auth__card { width: 100%; max-width: 460px; margin: 0 auto; padding-top: 0; }
/* ── Heading block ────────────────────────────────────────────── */
.bz-auth__head { margin-bottom: 22px; }
.bz-auth__eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 9px;
}
.bz-auth__title {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em;
  font-size: 54px; line-height: 0.98; color: var(--ink); margin: 0;
  /* reset the global `h1` padding (typography.css) so the title hugs its box */
  padding: 0;
}
.bz-auth__title em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.bz-auth__title--sm { font-size: 31px; line-height: 1.1; }
.bz-auth__sub { margin: 9px 0 0; font-size: 16px; line-height: 1.45; color: var(--mute); }
/* ── OAuth provider buttons (also used on settings) ───────────── */
.bz-auth__oauth { display: flex; flex-direction: column; gap: 10px; }
.bz-oauth { justify-content: center; gap: 11px; }
.bz-oauth__logo { width: 18px; height: 18px; flex: 0 0 auto; }
.bz-auth .bz-oauth { width: 100%; padding-top: 15px; padding-bottom: 15px; font-size: 15px; }
/* ── "or" divider (hairline · label · hairline) ───────────────── */
.bz-auth__or {
  display: flex; align-items: center; gap: 16px; margin: 22px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint);
}
.bz-auth__or::before, .bz-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
/* ── Fields (filled, borderless, rounded — auth only) ─────────── */
.bz-auth__group { margin-bottom: 13px; }
.bz-auth__labelrow { display: flex; align-items: baseline; justify-content: space-between; }
.bz-auth .bz-field, .bz-auth input.bz-field {
  background: var(--c-ink-a04); border-color: transparent; border-radius: 11px;
  box-shadow: none; padding: 9px 15px; font-size: 15px;
}
.bz-auth .bz-field:focus, .bz-auth input.bz-field:focus {
  background: var(--c-ink-a05); border-color: var(--hairline); box-shadow: none;
}
.bz-auth .bz-field::-moz-placeholder { color: var(--faint); }
.bz-auth .bz-field::placeholder { color: var(--faint); }
.bz-auth__hint { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--mute); }
/* Field with an inline trailing action (the password Show/Hide toggle) */
.bz-auth__field { position: relative; }
.bz-auth__field .bz-field { padding-right: 64px; }
.bz-auth__reveal { position: absolute; top: 50%; right: 17px; transform: translateY(-50%); }
/* Micro action links — uppercase mono (Forgot? / Show) */
.bz-auth__action {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); background: none; border: 0; padding: 0; cursor: pointer;
}
.bz-auth__action:hover { color: var(--ink); }
.bz-auth__action--strong { color: var(--ink); font-weight: 600; }
.bz-auth__action--strong:hover { color: var(--accent); }
/* ── Consent / checkbox rows ──────────────────────────────────── */
.bz-auth__check { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 20px; }
.bz-auth__check input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto;
  accent-color: var(--ink); border-radius: 4px;
}
.bz-auth__check label { font-size: 15px; line-height: 1.5; color: var(--mute); margin: 0; }
/* ── Submit (full-width ink primary) ──────────────────────────── */
.bz-auth__submit { width: 100%; justify-content: center; padding: 17px 18px; font-size: 15px; }
/* ── Footer (centred) ─────────────────────────────────────────── */
.bz-auth__foot { margin-top: 24px; text-align: center; font-size: 15px; color: var(--mute); }
.bz-auth__link { color: var(--ink); font-weight: 600; -webkit-text-decoration: none; text-decoration: none; }
.bz-auth__link:hover { color: var(--accent); }
.bz-auth__foot--ruled { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.bz-auth__foot .bz-auth__link + .bz-auth__link { margin-left: 14px; }
/* Inline links inside copy (ToS consent, etc.) */
.bz-auth__inline { color: var(--ink); font-weight: 600; -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; }
.bz-auth__inline:hover { color: var(--accent); }
/* ── Invitation banner (sign-up via account invite) ───────────── */
.bz-auth__invite {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 22px; padding: 12px 14px; border-radius: 10px;
  background: var(--c-status-inquiry-bg); border: 1px solid var(--c-status-inquiry-dot);
  font-size: 13.5px; color: var(--c-status-inquiry-fg);
}
/* ── Notice / alert chips (confirmation-instructions screen) ──── */
.bz-auth__notice {
  padding: 12px 14px; margin-bottom: 16px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; border: 1px solid transparent;
}
.bz-auth__notice--ok  { background: var(--c-status-quote-confirmed-bg); color: var(--c-status-quote-confirmed-fg); border-color: var(--c-status-quote-confirmed-dot); }
.bz-auth__notice--err { background: var(--c-danger-a08); color: var(--danger); border-color: var(--danger); }
/* ── Confirmation success card (post sign-up) ─────────────────── */
.bz-auth__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
  background: var(--c-clay-a08); color: var(--accent); margin-bottom: 16px;
}
.bz-auth__help {
  padding: 14px 16px; margin: 22px 0; border-radius: 12px;
  background: var(--c-ink-a04); border: 1px solid var(--hairline);
}
.bz-auth__help-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.bz-auth__help ul { margin: 0; padding-left: 18px; list-style: disc; }
.bz-auth__help li { font-size: 13px; line-height: 1.7; color: var(--mute); }
/* ================================================================
   BLUME Design System — MARKETING / STATIC
   Public pages on the application layout: legal documents
   (terms / privacy / refund / acceptable-use) and the pricing grid.
   Editorial prose on the warm paper ground. Tokens + primitives
   only; no raw hex. See DESIGN_SYSTEM.md.
   ================================================================ */
/* ── Page ground ──────────────────────────────────────────────── */
.bz-static {
  min-height: calc(100vh - 70px);
  background: var(--paper);
  padding: 56px 16px 80px;
  /* <main> carries 12px side padding + a white background below 1024px;
     break out of it so the paper ground is full-bleed on mobile. */
  margin-left: -12px;
  margin-right: -12px;
}
@media (min-width: 1024px) {
  .bz-static {
    margin-left: 0;
    margin-right: 0;
  }
}
/* Pull content up directly under the (bare) header — e.g. pricing. */
.bz-static--flush {
  padding-top: 24px;
}
/* ── Legal documents ──────────────────────────────────────────── */
.bz-legal {
  max-width: 760px;
  margin: 0 auto;
}
.bz-legal__title {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 42px;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 18px;
}
.bz-legal__meta {
  font-size: 13px;
  color: var(--faint);
  margin: 0 0 28px;
}
/* Prose — descendant selectors so existing markup needs no per-element
   classes (they out-specify leftover Tailwind text-* utilities). */
.bz-prose {
  font-family: var(--sans);
  color: var(--mute);
  font-size: 15.5px;
  line-height: 1.7;
}
.bz-prose section {
  margin-bottom: 36px;
}
.bz-prose h2 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 14px;
}
.bz-prose h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 22px 0 10px;
}
.bz-prose p {
  margin: 0 0 16px;
  color: var(--mute);
}
.bz-prose strong {
  color: var(--ink);
  font-weight: 600;
}
.bz-prose ul,
.bz-prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--mute);
}
.bz-prose li {
  margin-bottom: 8px;
  line-height: 1.65;
}
.bz-prose a {
  color: var(--accent);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bz-prose a:hover {
  color: var(--c-clay-hover);
}
/* ── Pricing (left-aligned editorial cards) ───────────────────── */
.bz-pricing {
  max-width: 1120px;
  margin: 0 auto;
}
/* Top utility link ("Already have an account? Sign in →") — pinned top-right,
   in line with the logo, mirroring the auth screens. */
.bz-pricing__top {
  position: fixed;
  top: 28px;
  right: 24px;
  z-index: 101;
}
@media (min-width: 1024px) {
  .bz-pricing__top {
    right: 32px;
  }
}
.bz-pricing__toplink {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.bz-pricing__toplink strong {
  color: var(--ink);
  font-weight: 600;
}
.bz-pricing__toplink:hover strong {
  color: var(--accent);
}
/* Page header — eyebrow · mixed sans/serif display · lede */
.bz-pricing__header {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
}
.bz-pricing__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0px;
}
.bz-pricing__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 58px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.bz-pricing__title em {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
}
.bz-pricing__lede {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.5;
  color: var(--mute);
  max-width: 600px;
  margin: 14px auto 0;
}
@media (max-width: 640px) {
  .bz-pricing__title {
    font-size: 40px;
  }
  .bz-pricing__lede {
    font-size: 17px;
  }
}
.bz-pricing__grid {
  display: grid;
  grid-gap: 28px;
  gap: 28px;
  justify-content: center;
  grid-template-columns: minmax(0, 960px);
}
.bz-price-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 44px;
  padding: 44px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--elevation);
  transition:
    box-shadow 0.2s, transform 0.2s;
}
/* Left pane — identity, price, CTA (CTA pinned to the bottom) */
.bz-price-card__main {
  display: flex;
  flex-direction: column;
  flex: 0 0 38%;
}
/* Right pane — feature list, divided from the main pane by a hairline */
.bz-price-card__aside {
  flex: 1 1 auto;
  padding-left: 44px;
  border-left: 1px solid var(--hairline);
}
/* Single-pane variant (empty state) — keep the original vertical stack */
.bz-price-card--stack {
  flex-direction: column;
  gap: 0;
}
@media (max-width: 768px) {
  .bz-price-card {
    flex-direction: column;
    gap: 32px;
    padding: 36px;
  }
  .bz-price-card__main {
    flex-basis: auto;
  }
  .bz-price-card__aside {
    padding-left: 0;
    padding-top: 32px;
    border-left: none;
    border-top: 1px solid var(--hairline);
  }
}
.bz-price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px var(--c-ink-a08);
}
.bz-price-card__name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 31px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.bz-price-card__desc {
  font-size: 16px;
  line-height: 1.45;
  color: var(--mute);
  margin: 14px 0 0;
}
/* Price: small currency · large ink number · cycle */
.bz-price-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 28px 0 0;
}
.bz-price-card__cur {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--faint);
}
.bz-price-card__amt {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 44px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.bz-price-card__per {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--faint);
}
.bz-price-card__cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
  padding: 17px 18px;
  font-size: 15px;
}
.bz-price-card__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}
.bz-price-card__features {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  grid-gap: 15px 26px;
  gap: 15px 26px;
}
.bz-price-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  color: var(--ink);
}
.bz-price-card__check {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--accent);
}
.bz-price-card__empty {
  font-size: 15px;
  color: var(--faint);
  font-style: italic;
  margin: 0;
}
/* ================================================================
   BLUME Design System — QUOTE BUILDER (Vue event editor)
   Shared primitives for the quote builder, arrangement editor and
   Review screen (Phase 4). Source: design_handoff_blume_flow/
   blume-d1.jsx + blume-flow-review.jsx. Colours are tokens only;
   --accent is reserved for the live grand total + active markers.
   Everything renders inside the .bz bz-d2 editor root.
   ================================================================ */
/* ── Collapsible / section panel ───────────────────────────────
   The barely-lifted surface that wraps each editor section
   (Arrangements, Hire items, Quote summary). A hairline divides the
   header from the body; the chevron rotates on open. CollapsiblePanel
   drives the open/close state — this layer only styles surface + type. */
.bz-panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: 11px;
  box-shadow: var(--elevation); overflow: hidden; margin-bottom: 16px; }
.bz-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 16px 18px; background: transparent; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: var(--ink); transition: background .12s ease; }
.bz-panel__head:hover { background: var(--c-ink-a025); }
.bz-panel__titlewrap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.bz-panel__title { font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.bz-panel__sub { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.bz-panel__chev { flex: 0 0 auto; color: var(--faint); transition: transform .2s ease; }
.bz-panel__chev--open { transform: rotate(180deg); }
/* ── Bare section header (no card) ─────────────────────────────
   Top-level editor sections (Arrangements, Event hire items) that
   read as headings directly on the paper background rather than
   inside a panel card. The title + faint mono count form a clickable
   toggle (left caret rotates open) so the section stays collapsible;
   an optional action (e.g. Add hire item) sits on the right. */
.bz-section { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.bz-section__toggle { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0;
  background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
.bz-section__caret { flex: 0 0 auto; align-self: center; color: var(--faint); transition: transform .2s ease; }
.bz-section__caret--open { transform: rotate(90deg); }
.bz-section__title { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.bz-section__sub { font-family: var(--mono); font-size: 12px; color: var(--faint); }
/* Body sits below a hairline divider on a soft paper well, so the white
   arrangement cards / hire-items table inside read clearly as nested content
   while the panel itself reads as the enclosing section card. */
.bz-panel__body { border-top: 1px solid var(--hairline); padding: 18px; background: var(--paper); }
/* ── Inline table field (grey, borderless, compact) ────────────
   For inputs that live inside a data table row (e.g. the arrangement
   flower table): a soft warm-grey fill instead of the white card field,
   no border/shadow, tighter padding. Scoped under .bz so it wins over
   @tailwindcss/forms' later base rules without !important. */
/* A soft warm-grey filled field (always on), slightly darker on hover/focus.
   No width here — callers set the column width with a utility (w-14/w-20/…);
   a width here would out-specify those utilities. Scoped under .bz so it wins
   over @tailwindcss/forms' later base rules without !important. */
.bz input.bz-field-inline, .bz select.bz-field-inline, .bz textarea.bz-field-inline {
  max-width: 100%;
  background: var(--c-ink-a05);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 7px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  box-shadow: none;
  outline: none;
}
.bz .bz-field-inline::-moz-placeholder { color: var(--faint); }
.bz .bz-field-inline::placeholder { color: var(--faint); }
.bz input.bz-field-inline:hover, .bz select.bz-field-inline:hover, .bz textarea.bz-field-inline:hover { background: var(--c-ink-a08); }
.bz input.bz-field-inline:focus, .bz select.bz-field-inline:focus, .bz textarea.bz-field-inline:focus {
  background: var(--c-ink-a08); border-color: var(--c-ink-a11); box-shadow: none;
}
/* ── Grey fields across the quote editor ───────────────────────
   On the editor page every .bz-field reads as a soft grey fill (matching the
   inline table fields) rather than the white card field. Scoped to the editor
   root (.bz-quote-editor) so the rest of the app keeps the white .bz-field.
   The input/select/textarea variants match the forms-plugin override's
   specificity so they win on source order (quote.css loads after primitives). */
.bz-quote-editor .bz-field,
.bz-quote-editor input.bz-field,
.bz-quote-editor select.bz-field,
.bz-quote-editor textarea.bz-field {
  background: var(--c-ink-a05);
  border-color: transparent;
  box-shadow: none;
}
.bz-quote-editor .bz-field:hover,
.bz-quote-editor input.bz-field:hover,
.bz-quote-editor select.bz-field:hover,
.bz-quote-editor textarea.bz-field:hover {
  background: var(--c-ink-a08);
}
.bz-quote-editor .bz-field:focus,
.bz-quote-editor input.bz-field:focus,
.bz-quote-editor select.bz-field:focus,
.bz-quote-editor textarea.bz-field:focus {
  background: var(--c-ink-a08);
  border-color: var(--c-ink-a11);
  box-shadow: none;
}
/* ── Summary lines (live quote rail + cost summaries) ──────────
   A label/value row with mono tabular numerals. `--strong` is the
   subtotal emphasis. --accent appears ONLY on .bz-live-total below. */
.bz-sumline { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; }
.bz-sumline__k { font-family: var(--sans); font-size: 13.5px; color: var(--mute); }
.bz-sumline__v { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.bz-sumline--strong .bz-sumline__k { color: var(--ink); font-weight: 600; font-size: 14px; }
.bz-sumline--strong .bz-sumline__v { font-weight: 600; font-size: 15px; }
.bz-sumline__divider { border-top: 1px solid var(--hairline); margin: 8px 0; }
/* Positive / negative deltas (under vs over budget). */
.bz-sumline--ok .bz-sumline__k, .bz-sumline--ok .bz-sumline__v { color: var(--c-budget-ok); }
.bz-sumline--over .bz-sumline__k, .bz-sumline--over .bz-sumline__v { color: var(--danger); }
/* ── Live quote rail ───────────────────────────────────────────
   The barely-lifted summary surface; the grand total sits in a warm
   inset footer and is the single place --accent (clay) is used. */
.bz-live-rail { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: var(--elevation); overflow: hidden; }
.bz-live-rail__body { padding: 20px 22px 8px; }
.bz-live-rail__foot { padding: 18px 22px; background: var(--paper); border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.bz-live-rail__foot-label { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bz-live-total { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 27px;
  font-weight: 600; color: var(--accent); letter-spacing: -0.01em; }
/* ================================================================
   BLUME Design System — Documents (".bz-doc-*")
   ----------------------------------------------------------------
   The printable documents of the Review step: client quote, florist
   worksheet and supplier order (plus the on-screen cost breakdown).

   HARD CONSTRAINT — these rules MUST stay un-scoped and global. The
   single HTML→PDF engine (Documents::HtmlToPdf) serializes a Vue
   document component's DOM and re-renders it server-side in headless
   Chrome with this compiled stylesheet injected. Vue's scoped-CSS
   data attributes do NOT survive that round-trip, so anything the
   documents rely on lives here, namespaced under .bz-doc so it can
   never collide with the editor chrome.

   Built on the shared primitives (.bz-th/.bz-td/.bz-mono/.bz-label/
   .bz-eyebrow/.bz-title) — this file adds only document LAYOUT, never
   re-declares a primitive. Mirrors design_handoff_blume_flow/
   blume-flow-review.jsx. Imported once from design-system.css.
   ================================================================ */
/* ---- Page shell -------------------------------------------------
   .bz-doc is one printed page. On screen it sits inside a preview
   card; in the PDF it IS the page (the engine wraps it in
   <body class="bz bz-d2"> and zeroes the @page margin), so the shell
   owns its own internal padding via the section bands below. */
.bz-doc {
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  /* A4 portrait aspect on screen; print ignores max-width. */
  width: 100%;
  margin: 0;
}
/* Header band — wordmark + sender on the left, document title + ref
   on the right. */
.bz-doc__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 40px 26px;
  border-bottom: 1px solid var(--line);
}
.bz-doc__wordmark {
  height: 18px;
  margin-bottom: 14px;
}
/* Account name as the header wordmark (shown on its own, or beneath the logo). */
.bz-doc__brand-name {
  font-size: 18px;
}
/* Account logo in the document header — capped so tall/wide uploads stay
   in proportion, with the account name sitting just beneath. */
.bz-doc__logo {
  display: block;
  max-height: 48px;
  max-width: 220px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 8px;
}
/* When the logo is present the name is a quiet caption under it, not a
   second wordmark. */
.bz-doc__brand-name--with-logo {
  font-size: 12.5px;
  color: var(--mute);
}
.bz-doc__sender {
  font-size: 12.5px;
  color: var(--mute);
  line-height: 1.6;
}
.bz-doc__heading-group {
  text-align: right;
  flex: 0 0 auto;
}
.bz-doc__heading {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: 26px;
  margin: 0;
}
.bz-doc__ref {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  margin-top: 6px;
  line-height: 1.7;
}
/* Inline count next to a heading (e.g. "Worksheet  4 arrangements"). Same
   font size as the heading; lighter weight + faint to read as a count. */
.bz-doc__heading-count {
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--faint);
  margin-left: 8px;
}
/* Parties band — "prepared for" / "event date" two-up. */
.bz-doc__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  padding: 22px 40px;
  border-bottom: 1px solid var(--line);
}
.bz-doc__party-name {
  font-size: 15.5px;
  font-weight: 600;
  margin-top: 2px;
}
.bz-doc__party-sub {
  font-size: 13px;
  color: var(--mute);
  margin-top: 3px;
}
/* Generic padded section + an internal eyebrow heading. */
.bz-doc__section {
  padding: 8px 40px 16px;
}
.bz-doc__section-title {
  margin-bottom: 12px;
}
/* ---- Line-item table -------------------------------------------
   Reuses .bz-th / .bz-td for cell typography; this only handles
   widths, alignment and the desc/detail/note stack. */
.bz-doc__table {
  width: 100%;
  border-collapse: collapse;
}
.bz-doc__col-qty {
  text-align: center;
  width: 70px;
}
.bz-doc__col-amount {
  text-align: right;
  width: 110px;
}
.bz-doc__line-title {
  font-weight: 600;
  font-size: 14.5px;
}
.bz-doc__line-detail {
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 2px;
}
/* Per-arrangement, client-facing note (new in the Flow review). Set
   off from the internal detail line by the accent rule. */
.bz-doc__line-note {
  font-size: 12.5px;
  color: var(--mute);
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
  line-height: 1.55;
}
/* ---- Totals block ----------------------------------------------- */
.bz-doc__totals-wrap {
  padding: 4px 40px 30px;
  display: flex;
  justify-content: flex-end;
}
.bz-doc__totals {
  width: 300px;
}
.bz-doc__total-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--mute);
}
.bz-doc__total-row--grand {
  padding: 13px 0 0;
  margin-top: 6px;
  border-top: 1px solid var(--ink);
  align-items: baseline;
  color: var(--ink);
}
.bz-doc__total-grand-label {
  font-size: 15px;
  font-weight: 600;
}
.bz-doc__total-grand-value {
  font-family: var(--mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
}
.bz-doc__total-row--deposit {
  padding: 10px 0 0;
  font-size: 12.5px;
  color: var(--faint);
}
/* ---- Terms + signature (client quote only) ---------------------- */
.bz-doc__terms {
  padding: 20px 40px 34px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.bz-doc__terms-body {
  font-size: 12.5px;
  color: var(--mute);
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 68ch;
  /* Florist-authored terms may carry intentional line breaks. */
  white-space: pre-line;
}
/* Footer line beneath the signature block — quiet, centred sign-off. */
.bz-doc__terms-footer {
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.6;
  margin: 22px 0 0;
  text-align: center;
  white-space: pre-line;
}
.bz-doc__sign {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  gap: 40px;
}
/* Each column stacks the (server-baked) value slot above its labelled line.
   min-width:0 lets a wide baked signature shrink instead of overflowing. */
.bz-doc__sign-col {
  min-width: 0;
}
.bz-doc__sign-line {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Value slot above each sign line. Reserves a consistent area so the server can
   bake the drawn signature / date in exactly where the client placed them — the
   content bottom-aligns to sit directly on the line. Empty on the unsigned
   quote (renders as blank signing space). */
.bz-doc__sign-value {
  display: flex;
  align-items: flex-end;
  min-height: 46px;
  padding-bottom: 4px;
}
.bz-doc__sign-img {
  display: block;
  max-height: 46px;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.bz-doc__sign-date {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}
.bz-doc__sign-date-fmt {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--faint);
  margin-left: 5px;
}
/* ---- Internal breakdown rows (cost breakdown + worksheet/supplier
   subtotals). A compact key/value line used outside the main table. */
.bz-doc__kv {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 13px;
}
.bz-doc__kv-k {
  color: var(--mute);
}
.bz-doc__kv-v {
  font-family: var(--mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.bz-doc__kv--strong .bz-doc__kv-k,
.bz-doc__kv--strong .bz-doc__kv-v {
  color: var(--ink);
  font-weight: 600;
}
.bz-doc__rule {
  border-top: 1px solid var(--line);
  margin: 7px 0;
}
/* ---- Worksheet / supplier grouping ------------------------------
   Internal documents group rows under a supplier or arrangement
   heading. */
.bz-doc__group {
  margin-top: 4px;
}
.bz-doc__group + .bz-doc__group {
  margin-top: 22px;
}
.bz-doc__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
}
.bz-doc__group-title {
  font-size: 15px;
  font-weight: 600;
}
.bz-doc__group-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}
/* ---- Landscape worksheet (allocation sheet) ---------------------
   A wide single table grouped by arrangement. The component renders
   with .bz-doc--landscape; the PDF is rendered landscape server-side. */
.bz-doc--landscape {
  /* Roomier base width so the 8-column table breathes on screen; the PDF
     uses real A4-landscape geometry. */
  min-width: 920px;
}
/* Meta header strip — client / date / reference / labour. */
.bz-doc__wsmeta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 18px 24px;
  gap: 18px 24px;
  padding: 20px 40px;
  border-bottom: 1px solid var(--line);
}
.bz-doc__wsmeta-v {
  font-size: 14px;
  font-weight: 600;
  margin-top: 3px;
}
/* The long allocation table. Tighter cells than the quote table, with a
   ruled header and shaded per-arrangement group rows. */
.bz-doc__wstable {
  table-layout: fixed;
}
.bz-doc__wstable .bz-th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--ink);
}
.bz-doc__wstable .bz-td {
  padding: 9px 8px;
  font-size: 12.5px;
  vertical-align: top;
  word-break: break-word;
}
.bz-doc__wsgroup .bz-td {
  background: var(--chrome, var(--paper));
  border-top: 1px solid var(--ink);
  font-weight: 600;
}
.bz-doc__wsgroup-title {
  font-size: 13.5px;
  font-weight: 600;
}
.bz-doc__wsgroup-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  margin-left: 8px;
}
.bz-doc__wsmuted {
  color: var(--faint);
  font-style: italic;
}
/* Print: drop screen-only chrome and let content flow to the page. */
@media print {
  .bz-doc {
    box-shadow: none;
    border-radius: 0;
  }
  .bz-doc--landscape {
    min-width: 0;
  }
}
/* ================================================================
   BLUME Design System — DASHBOARD CALENDAR
   The dashboard month/day/year calendar + the two read-only sidebars
   (Upcoming events / Recent activity). Ported from
   design_handoff_blume_flow/blume-flow-dash.jsx. Consumes semantic
   tokens + the status palette only; no raw hex. Replaces the retired
   entrypoints/dashboard.css and components/calendar.css — the z-index
   hierarchy that lived there (scattered !important) is reconciled into
   the --bz-z-* tokens below. See DESIGN_SYSTEM.md.
   ================================================================ */
/* ── z-index hierarchy (was 19 !important rules in calendar.css) ──
   Layered so calendar dropdowns/context-menu portal above the page but
   below the profile sidebar (which sits at 999999 inline). The legacy
   "lower everything while the sidebar is open" hack is preserved via
   body:has(...) at the bottom of this file. */
.bz {
  --bz-z-cal-base:     0;       /* grid, day-events container, #event-calendar */
  --bz-z-cal-pill:    10;       /* event chips (so their dropdown anchors) */
  --bz-z-cal-menu: 99999;       /* day right-click context menu */
  --bz-z-cal-drop: 999999;      /* event/arrival/pickup action dropdowns (portaled) */
}
/* ── Calendar card ────────────────────────────────────────── */
.bz-cal { background: var(--panel); border-radius: 14px; border: 1px solid var(--hairline);
  box-shadow: var(--elevation); overflow: hidden; }
/* Keep the views area from collapsing between Day/Month/Year (was a 600px
   min-height in the retired dashboard.css). */
.bz #event-calendar { min-height: 540px; }
.bz-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; flex-wrap: wrap; }
.bz-cal__headgroup { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bz-cal__headgroup.hidden { display: none; }
/* calendar-view hides the inactive period nav */
.bz-cal__title { font-size: 22px; }
/* pairs with .bz-title */
.bz-cal__nav { display: flex; align-items: center; gap: 7px; }
/* Square ghost nav buttons (prev/next month·day·year, Refresh) */
.bz-cal-navbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; min-width: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px;
  background: var(--c-ink-a05); color: var(--mute); font-family: var(--sans); font-size: 13px;
  font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.bz-cal-navbtn:hover { background: var(--c-ink-a08); color: var(--ink); }
.bz-cal-navbtn svg { width: 16px; height: 16px; }
.bz-cal__today { font-size: 13px; font-weight: 600; color: var(--ink);
  padding: 6px 10px; border-radius: 7px; -webkit-text-decoration: none; text-decoration: none; transition: background .15s; }
.bz-cal__today:hover { background: var(--c-ink-a05); }
/* ── Segmented Day/Month/Year control ─────────────────────── */
.bz-cal-seg { display: inline-flex; border-radius: 0; overflow: hidden; }
.bz-cal-seg__btn { padding: 8px 16px; font-family: var(--sans); font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; background: var(--c-ink-a05); color: var(--mute);
  transition: background .15s, color .15s; }
.bz-cal-seg__btn:hover { background: var(--c-ink-a08); color: var(--ink); }
/* Active segment — the controller toggles .is-active in lockstep */
.bz-cal-seg__btn.is-active { background: var(--panel); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--c-ink-a08); }
/* ── Month grid ───────────────────────────────────────────── */
.bz-cal__weekhead { display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--paper); background: var(--c-ink-a025); }
.bz-cal__weekday { padding: 12px 14px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); border-left: 1px solid var(--paper); }
.bz-cal__weekday:first-child { border-left: none; }
.bz-cal__week { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--paper);
  position: relative; z-index: var(--bz-z-cal-base); }
.bz-cal__week:last-child { border-bottom: none; }
.bz-cal-cell { min-height: 110px; padding: 9px 9px 11px; border-left: 1px solid var(--paper);
  background: transparent; cursor: pointer; transition: background .12s; }
.bz-cal-cell:first-child { border-left: none; }
.bz-cal-cell:hover { background: var(--c-ink-a04); }
.bz-cal-cell--other { background: var(--c-ink-a025); }
.bz-cal-cell--other:hover { background: var(--c-ink-a04); }
/* Today — the one place --accent (clay) appears on the dashboard */
.bz-cal-cell--today { background: var(--c-clay-a08); }
.bz-cal-cell--today:hover { background: var(--c-clay-a08); }
.bz-cal-cell__head { display: flex; justify-content: flex-end; margin-bottom: 7px; }
.bz-cal-cell__num { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 12.5px;
  color: var(--mute); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.bz-cal-cell--other .bz-cal-cell__num { color: var(--faint); }
.bz-cal-cell--today .bz-cal-cell__num { color: var(--accent); font-weight: 700; }
.bz-cal-cell__events { display: flex; flex-direction: column; gap: 4px;
  position: relative; z-index: var(--bz-z-cal-base); }
/* ── Event chip — layout only; colour comes from a .bz-pill--<status>
   modifier (status.css) set alongside it. Square-ish, truncating. ── */
/* overflow stays visible so the hover tooltip + action dropdown can pop out of
   the chip (the old .calendar-event-pill forced overflow:visible for this); the
   label truncates itself. */
.bz-cal-evt { display: flex; align-items: center; gap: 6px; border-radius: 5px; padding: 3px 7px;
  font-family: var(--sans); font-size: 11.5px; line-height: 1.2; font-weight: 500;
  white-space: nowrap; cursor: pointer; border: none; -webkit-text-decoration: none; text-decoration: none;
  position: relative; z-index: var(--bz-z-cal-pill); }
.bz-cal-evt__dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 5px; background: currentColor; background: var(--dot, currentColor); }
.bz-cal-evt__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Non-status calendar entries (no raw hex — see palette.css):
   flower arrival = rose, pickup = orange, Google = lilac (shares In Progress). */
.bz-cal-evt--arrival { --dot: var(--c-status-flower-arrival-dot); background: var(--c-status-flower-arrival-bg); color: var(--c-status-flower-arrival-fg); }
.bz-cal-evt--pickup  { --dot: var(--c-status-flower-pickup-dot);  background: var(--c-status-flower-pickup-bg);  color: var(--c-status-flower-pickup-fg); }
.bz-cal-evt--gcal    { --dot: var(--c-status-in-progress-dot);    background: var(--c-status-in-progress-bg);    color: var(--c-status-in-progress-fg); }
/* The legacy delegated hooks (.event-item / .calendar-event-pill) need the same
   stacking context so their portaled dropdown anchors correctly. */
.bz .event-item, .bz .calendar-event-pill { position: relative; z-index: var(--bz-z-cal-pill); }
/* ── Day-view rows (rendered by calendar_day_view_controller) ─ */
.bz-cal-dayrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; background: var(--panel); border: 1px solid var(--hairline); border-radius: 7px;
  box-shadow: var(--elevation); position: relative; }
.bz-cal-dayrow__main { min-width: 0; }
.bz-cal-dayrow__name { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-cal-dayrow__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.bz-cal-dayrow__empty { font-family: var(--sans); font-size: 14px; color: var(--faint); font-style: italic; padding: 4px 0; }
/* ── Year-view month tiles (rendered by calendar_year_view_controller) ─ */
.bz-cal-monthtile { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  text-align: left; padding: 16px 18px; background: var(--panel); border: 1px solid var(--hairline);
  border-radius: 7px; box-shadow: var(--elevation); cursor: pointer; transition: background .15s; }
.bz-cal-monthtile:hover { background: var(--c-ink-a04); }
.bz-cal-monthtile__name { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.bz-cal-monthtile__count { font-family: var(--mono); font-size: 12px; color: var(--mute); margin-top: 2px; }
.bz-cal-monthtile__chev { width: 18px; height: 18px; color: var(--faint); flex-shrink: 0; }
/* A small text link used inside calendar rows ("View event" / "View status") */
.bz-cal-link { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--mute);
  background: none; border: none; padding: 0; cursor: pointer; -webkit-text-decoration: none; text-decoration: none; transition: color .12s; }
.bz-cal-link:hover { color: var(--ink); }
/* ── Hover tooltip (neutral ink, not status-coloured) ─────────
   .event-tooltip / .event-hover-tooltip are toggled by
   calendar_tooltip_controller via the .hidden class. */
.bz .event-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px;
  background: var(--ink); color: var(--c-paper-cream); font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  padding: 7px 10px; border-radius: 7px; box-shadow: 0 8px 20px var(--c-ink-a45); white-space: nowrap;
  pointer-events: none; transition: opacity .18s ease; z-index: 50; }
.bz .event-tooltip__sub { color: var(--c-paper-cream); opacity: 0.7; }
.bz .event-tooltip.hidden { opacity: 0; visibility: hidden; }
.bz .event-tooltip:not(.hidden) { opacity: 1; visibility: visible; }
/* Tooltip arrow */
.bz .event-tooltip__arrow { position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid var(--ink); }
/* ── Action dropdowns (event / arrival / pickup) ──────────────
   Surface only — the legacy JS portals these into
   #global-dropdown-container and sets position:fixed + the z-index
   inline, so this layer styles the panel, not its placement. */
.bz .event-dropdown, .bz .arrival-dropdown, .bz .pickup-dropdown {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: 0; min-width: 10rem;
  box-shadow: 0 10px 24px -6px var(--c-ink-a45); }
.bz-cal-menu { padding: 4px 0; }
.bz-cal-menu__item { display: block; width: 100%; text-align: right; padding: 9px 16px 9px 0;
  font-family: var(--sans); font-size: 13px; color: var(--ink); background: none; border: none;
  cursor: pointer; -webkit-text-decoration: none; text-decoration: none; transition: background .12s; }
.bz-cal-menu__item:hover { background: var(--c-ink-a05); }
.bz-cal-menu__item--danger { color: var(--danger); }
/* ── Right-click "Create event" context menu ──────────────── */
.bz-cal-context { background: var(--panel); border: 1px solid var(--hairline); border-radius: 7px;
  box-shadow: 0 10px 24px -6px var(--c-ink-a45); padding: 4px 0; min-width: 180px;
  z-index: var(--bz-z-cal-menu); }
.bz-cal-context__item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 16px; font-family: var(--sans); font-size: 13px; color: var(--ink); background: none;
  border: none; cursor: pointer; transition: background .12s; }
.bz-cal-context__item:hover { background: var(--c-ink-a05); }
.bz-cal-context__item svg { width: 16px; height: 16px; }
/* ── Headline stats strip (above the calendar card) ──────────
   Inline, centered values + a Hide/Show toggle persisted in localStorage by
   stats_toggle_controller. The toggle row stays put; only the strip collapses. */
.bz-dash-stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 10px; }
.bz-dash-stats.hidden { display: none; }
.bz-dash-stats__item { display: inline-flex; align-items: baseline; gap: 6px; }
/* A stat carrying an explanation: dotted-underline the label and reveal a
   dark tooltip bubble below it on hover/focus (pure CSS, no controller). */
.bz-dash-stats__item--tip { position: relative; cursor: help; }
.bz-dash-stats__item--tip .bz-dash-stats__label { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted;
  text-decoration-color: var(--line); text-underline-offset: 3px; }
.bz-dash-stats__tip { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: -moz-max-content;
  width: max-content; max-width: 260px; text-align: left; background: var(--ink); color: var(--c-paper-cream);
  font-family: var(--sans); font-size: 12px; font-weight: 400; line-height: 1.45; padding: 9px 11px;
  border-radius: 8px; box-shadow: 0 8px 20px var(--c-ink-a45); opacity: 0; visibility: hidden;
  pointer-events: none; transition: opacity .15s ease; z-index: 60; }
.bz-dash-stats__tip::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--ink); }
.bz-dash-stats__item--tip:hover .bz-dash-stats__tip,
.bz-dash-stats__item--tip:focus-within .bz-dash-stats__tip { opacity: 1; visibility: visible; }
/* A stat that links somewhere (Outstanding balance → filtered events index).
   Rendered as an <a>; overrides the tip's help-cursor and nudges on hover. */
.bz-dash-stats__item--link { cursor: pointer; -webkit-text-decoration: none; text-decoration: none; color: inherit; }
.bz-dash-stats__item--link:hover .bz-dash-stats__value { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 3px; }
.bz-dash-stats__value { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.bz-dash-stats__label { font-size: 13px; color: var(--mute); }
.bz-dash-stats__div { width: 1px; height: 14px; background: var(--line); margin: 0 16px; }
.bz-dash-stats__toggle-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.bz-dash-stats__toggle { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: none;
  background: transparent; cursor: pointer; font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  color: var(--mute); transition: color .12s; }
.bz-dash-stats__toggle:hover { color: var(--ink); }
.bz-dash-stats__chev { width: 14px; height: 14px; transition: transform .15s; }
.bz-dash-stats__chev.is-open { transform: rotate(180deg); }
/* ── Status legend (sits on the paper below the calendar card) ─ */
.bz-cal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin-top: 18px; padding: 0 2px; }
.bz-cal-legend__item { display: flex; align-items: center; gap: 8px; }
.bz-cal-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--mute)); }
.bz-cal-legend__label { font-family: var(--sans); font-size: 12.5px; color: var(--mute); }
/* ── Inline stat strip (Upcoming / Recent sidebars header rhythm) ─ */
.bz-dash-side { margin-top: 32px; }
.bz-dash-side__title { font-size: 16px; margin-bottom: 14px; }
/* pairs with .bz-title */
.bz-dash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--hairline); }
.bz-dash-row:first-child { border-top: none; }
.bz-dash-row__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bz-dash-row__name { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-dash-row__sub { font-family: var(--sans); font-size: 13px; color: var(--mute); margin-top: 1px; }
.bz-dash-row__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.bz-dash-row__icon { width: 38px; height: 38px; border-radius: 8px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; background: var(--c-ink-a08); color: var(--mute); }
.bz-dash-row__icon svg { width: 18px; height: 18px; }
.bz-dash-empty { font-family: var(--sans); font-size: 14px; color: var(--faint); text-align: center; padding: 18px 0; }
/* ── Profile-sidebar-open z-index lowering (preserved from
   calendar.css). When the slide-over is open, drop the calendar's
   pills + portaled dropdowns beneath it. ── */
body:has(#profile-sidebar.open) .bz .event-item,
body:has(#profile-sidebar.open) .bz .calendar-event-pill,
body:has(#profile-sidebar.open) .bz-cal-evt { z-index: 1; }
body:has(#profile-sidebar.open) .event-dropdown,
body:has(#profile-sidebar.open) .arrival-dropdown,
body:has(#profile-sidebar.open) .pickup-dropdown { z-index: 1; }
/* ================================================================
   BLUME Design System — XERO SYNC INDICATOR
   A neutral mono "Xero · Synced" glyph+label (no trademark). Green when the
   event is synced to Xero, faint otherwise. Rendered by EventsHelper#bz_xero_indicator.
   (BLUME tracks sync state only — not invoice payment status — so this is a
   sync indicator, not the handoff's full invoice pill.)
   ================================================================ */
.bz-xero {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--faint);
}
.bz-xero__icon { display: inline-flex; }
.bz-xero--synced { color: var(--c-status-completed-fg); }
/* ================================================================
   BLUME Design System — MODAL (Event Status & Notes)
   A centred-top card over a dim scrim. Visibility is toggled by the
   `.hidden` utility in JS — this layer only styles surface, type and
   layout, never `display` on the panel itself.
   ================================================================ */
.bz-modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 72px 24px;
  z-index: 200;
}
/* The .bz base paints an opaque --paper background and, once compiled, lands after
   this file — so a single-class override loses on source order. Use a two-class
   selector (the overlay root always carries .bz) to clear it regardless of order,
   letting the page show through the translucent .bz-modal-backdrop scrim. */
.bz.bz-modal-overlay { background: transparent; }
/* Reusable scrim — self-contained (no .bz ancestor required) so legacy modals
   can adopt the warm, page-revealing backdrop. Page shows through, dimmed. */
.bz-scrim {
  background: rgba(27, 26, 23, 0.34);
  background: var(--bz-scrim);
  backdrop-filter: blur(2px);
}
.bz-modal-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(27, 26, 23, 0.34);
  background: var(--bz-scrim);
  backdrop-filter: blur(2px);
}
.bz-modal-panel {
  position: relative;
  z-index: 1;
  background: var(--panel);
  border-radius: 16px;
  width: min(900px, 100%);
  max-height: calc(100vh - 144px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px -20px var(--c-ink-a45);
  overflow: hidden;
}
.bz-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 30px 22px;
}
.bz-modal-title {
  margin: 0;
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bz-modal-close {
  display: inline-flex;
  border: none;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  padding: 6px;
  margin: -6px;
  border-radius: 8px;
}
.bz-modal-close:hover { background: var(--c-ink-a05); color: var(--ink); }
.bz-modal-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bz-modal-body { flex: 1; overflow-y: auto; padding: 0 30px; }
.bz-modal-field { margin-bottom: 24px; }
.bz-modal-field--last { margin-bottom: 30px; }
/* Two fields side by side (e.g. Pipeline stage + Payment status). Its children's
   own margin-bottom provides the row's spacing; collapses to one column when narrow. */
.bz-modal-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; gap: 20px; }
@media (max-width: 480px) { .bz-modal-row { grid-template-columns: 1fr; gap: 0; } }
.bz-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 30px 24px;
  border-top: 1px solid var(--line);
}
.bz-modal-section-title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}
/* Status history list */
.bz-modal-history { display: flex; flex-direction: column; gap: 2px; }
.bz-modal-history__row { background: var(--paper); border-radius: 10px; padding: 14px 16px; }
.bz-modal-history__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bz-modal-history__when { font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.bz-modal-history__by { font-size: 13.5px; color: var(--mute); margin-top: 9px; }
.bz-modal-history__note { font-size: 14.5px; color: var(--ink); margin-top: 5px; white-space: pre-wrap; }
.bz-modal-history__empty { font-size: 14px; color: var(--mute); font-style: italic; }
/* A select styled as a .bz-field with a chevron affordance. */
.bz-modal-select-wrap { position: relative; }
.bz-modal-select-wrap select.bz-field { -moz-appearance: none; appearance: none; -webkit-appearance: none; font-size: 16px; padding: 13px 15px; cursor: pointer; }
.bz-modal-select-wrap .bz-modal-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--mute); pointer-events: none; display: flex; }
/* ================================================================
   BLUME Design System — FEEDBACK (header banners + toasts)
   Shared alert chrome. Consume tokens / status palette — no raw hex.
   • .bz-banner   — full-bleed header notices (subscription paused…)
   • .bz-toast    — floating notifications (window.showNotification /
                    showToast) and the server flash partial.
   Variants map onto the calm status palette so every alert tracks the
   one source of colour (palette.css). See DESIGN_SYSTEM.md.
   ================================================================ */
/* ── Header banners ───────────────────────────────────────────── */
.bz-banner {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px 16px;
  border-bottom: 1px solid transparent;
}
.bz-banner--warn { background: var(--c-warn-bg); color: var(--c-warn-fg); border-bottom-color: var(--c-warn-line); }
.bz-banner__action { color: inherit; -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; margin-left: 12px; }
.bz-banner__action:hover { opacity: 0.78; }
/* ── Toasts (layout utilities stay in markup; colour lives here) ─ */
.bz-toast { font-family: var(--sans); color: var(--ink); }
.bz-toast p { color: inherit; }
.bz-toast svg { color: inherit; }
.bz-toast--success { background: var(--c-status-quote-confirmed-bg); color: var(--c-status-quote-confirmed-fg); border-color: var(--c-status-quote-confirmed-dot); }
.bz-toast--error   { background: var(--c-danger-a08);               color: var(--danger);                       border-color: var(--danger); }
.bz-toast--info    { background: var(--c-status-inquiry-bg);        color: var(--c-status-inquiry-fg);          border-color: var(--c-status-inquiry-dot); }
.bz-toast--warning { background: var(--c-warn-bg);                  color: var(--c-warn-fg);                    border-color: var(--c-warn-line); }
/* ── Form error summary (validation errors above a form) ──────── */
.bz-formerr {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 20px; border-radius: 12px;
  background: var(--c-danger-a08); border: 1px solid var(--danger);
  font-family: var(--sans);
}
.bz-formerr__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--danger); }
.bz-formerr__body { min-width: 0; }
.bz-formerr__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--danger); }
.bz-formerr__list { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.bz-formerr__list li { font-size: 13.5px; line-height: 1.6; color: var(--danger); }
/* ================================================================
   BLUME Design System — TOP NAV (D2 "Flow" header)
   Scoped under .bz-nav so it only restyles the new WEB header; the
   Turbo Native navbar keeps using components/nav.css untouched.
   Structural class names (.top-nav / .nav-container / .nav-user-controls
   / .logo) are preserved so existing JS selectors keep working; nav
   links use the new .bz-nav__link class to sidestep nav.css's !important.
   ================================================================ */
/* Bar */
.bz-nav.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  min-height: 70px;
  padding: 0 16px;
  background: var(--chrome);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--elevation);
}
@media (min-width: 1024px) { .bz-nav.top-nav { padding: 0 32px; } }
/* Bare header (auth + public marketing pages): blend the bar into the page
   ground — paper background, no divider, no shadow, logo only. */
.bz-nav.top-nav.bz-nav--bare {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* Logo (pinned left) */
.bz-nav .logo { position: absolute; left: 16px; display: flex; align-items: center; height: 100%; z-index: 10; }
.bz-nav .logo img { height: 22px; width: auto; display: block; }
@media (min-width: 1024px) { .bz-nav .logo { left: 32px; } }
/* Centre nav */
.bz-nav .nav-container { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 100%; }
.bz-nav .nav-container--right { justify-content: flex-end; padding-right: 56px; }
.bz-nav .nav-container nav { display: inline-flex; align-items: center; gap: 4px; }
/* Links */
.bz-nav__link {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--mute); -webkit-text-decoration: none; text-decoration: none;
  padding: 7px 14px; border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.bz-nav__link:hover { color: var(--ink); background: var(--c-ink-a04); }
.bz-nav__link.active { color: var(--ink); font-weight: 600; background: var(--c-ink-a05); }
/* User controls (pinned right) */
.bz-nav .nav-user-controls { position: absolute; right: 16px; display: flex; align-items: center; gap: 14px; height: 100%; z-index: 10; }
@media (min-width: 1024px) { .bz-nav .nav-user-controls { right: 32px; } }
/* Avatar trigger */
.bz-nav #profile-sidebar-btn { display: inline-flex; align-items: center; justify-content: center; padding: 2px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.bz-nav #profile-sidebar-btn img { width: 32px; height: 32px; border-radius: 999px; display: block; -o-object-fit: cover; object-fit: cover; }
/* Events dropdown panel */
.bz-nav .events-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 50;
  min-width: 280px; max-width: 320px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 18px 50px -28px rgba(27, 26, 23, 0.30);
  overflow: hidden;
}
.bz-nav .events-dropdown .events-dropdown-item:hover { background: var(--c-ink-a04); }
/* ================================================================
   BLUME Design System — PROFILE SLIDE-OVER (.bz-sidebar)
   Rebuilds the account/profile slide-over onto the handoff's
   "ProfileDrawer": eyebrow header, avatar + name + mono email, two-
   line nav items, and a clay "Sign out" pinned to the bottom.
   Open/close is driven by inline JS in _account_menu.html.erb, which
   sets display:flex / none — this file owns flex-direction so the
   bottom-pinned foot (margin-top:auto) works once the panel is open.
   ================================================================ */
.bz-sidebar {
  width: 380px;
  max-width: 90vw;
  flex-direction: column;          /* meaningful once JS sets display:flex */
  background: var(--panel);
  color: var(--ink);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 80px -40px rgba(27, 26, 23, 0.40);
}
/* Header — eyebrow + close */
.bz-sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.bz-sidebar__close { display: flex; color: var(--mute); border-radius: 8px; padding: 6px; margin: -6px; border: 0; background: transparent; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.bz-sidebar__close:hover { color: var(--ink); background: var(--c-ink-a04); }
/* Identity block */
.bz-sidebar__user { display: flex; align-items: center; gap: 14px; padding: 22px; }
.bz-sidebar__user .bz-avatar-initials { font-size: 16px; }
.bz-sidebar__name  { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; line-height: 1.25; }
.bz-sidebar__email { font-family: var(--mono); font-size: 12.5px; color: var(--mute); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Item groups */
.bz-sidebar__items { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; overflow-y: auto; padding: 6px 12px 12px; border-top: 1px solid var(--line); }
.bz-sidebar__group-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 12px 14px 4px; }
.bz-sidebar__foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); }
/* Item (two-line: label + sub) — links and form buttons share this */
.bz-sidebar__item {
  display: flex; align-items: center; gap: 13px; width: 100%;
  text-align: left; -webkit-text-decoration: none; text-decoration: none;
  padding: 12px 14px; border-radius: 10px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink); font-family: var(--sans);
  transition: background-color .15s ease;
}
.bz-sidebar__item:hover { background: var(--c-ink-a04); }
.bz-sidebar__item-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--mute); }
.bz-sidebar__item-icon svg { width: 19px; height: 19px; }
.bz-sidebar__item-avatar { width: 26px; height: 26px; border-radius: 999px; -o-object-fit: cover; object-fit: cover; display: block; }
.bz-sidebar__item-text  { min-width: 0; }
.bz-sidebar__item-label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.bz-sidebar__item-sub   { display: block; font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Danger item (sign out) */
.bz-sidebar__item--danger { color: var(--danger); }
.bz-sidebar__item--danger .bz-sidebar__item-icon,
.bz-sidebar__item--danger .bz-sidebar__item-label { color: var(--danger); }
.bz-sidebar__item--danger:hover { background: var(--c-danger-a08); }
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-row-gap: 0;
  row-gap: 0;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  line-height: 1.5;
  background-color: #ffffff;
}
main {
  padding-left: 12px;
  padding-right: 12px;
  background-color: #ffffff;
  border: none !important;
}
@media (min-width: 1024px) {
main {
    padding-left: 0px;
    padding-right: 0px;
}
  }
/* Override container class to use wider margins */
.container {
  max-width: 1400px !important;
}
a {
  color: #ec1c24;
  color: var(--text-primary);
}
a:hover,a:focus {
    color: #f16222;
    color: var(--text-primary-hover);
    transform: none;
  }
ul {
  list-style-type: disc;
  list-style-position: inside;
}
ol {
  list-style-type: decimal;
  list-style-position: inside;
}
.table {
  width: 100%;

}
.table th,.table td {
    vertical-align: top;
  }
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}
/* We need to override trix.css’s image gallery styles to accommodate the
  <action-text-attachment> element we wrap around attachments. Otherwise,
  images in galleries will be squished by the max-width: 33%; rule.
*/
.link_to_embed {
  white-space: normal;
  margin-top: 1rem
}
@media (min-width: 768px){
  .link_to_embed{
    margin-left: 1rem;
  }
}
.link_to_embed [data-behavior='embed_url']{
  display: block;
}
@media (min-width: 768px){
.link_to_embed [data-behavior='embed_url']{
    margin-left: 0.75rem;
  }
}
@media (min-width: 768px){
.link_to_embed [data-behavior='embed_url']{
    display: inline-block;
  }
}
.trix-content img {
    display: inline-block;
    max-width: 100%;
    height: auto;
  }
.trix-content .attachment-gallery  > action-text-attachment,.trix-content .attachment-gallery  > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }
.trix-content .attachment-gallery.attachment-gallery--2  > action-text-attachment,.trix-content .attachment-gallery.attachment-gallery--4  > action-text-attachment,.trix-content .attachment-gallery.attachment-gallery--2  > .attachment,.trix-content .attachment-gallery.attachment-gallery--4  > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
.trix-content .embed {
    display: inline-block;
    line-height: 1;
    margin: 1em 0 !important;
    padding: 0 !important;
    width: 100%;
  }
.trix-content iframe,.trix-content twitter-widget {
    display: inline-block !important;
  }
/* Trix attachment formatting */
.attachment--preview {
  margin: 0.6em 0;
  text-align: center;
  width: 100%;
}
/* Tribute styles */
.tribute-container {
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 0 4px rgba(0,0,0,0.1), 0 5px 20px rgba(0,0,0,0.05);
}
.tribute-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
.tribute-container li {
    background: #fff;
    padding: 0.2em 1em;
    min-width: 15em;
    max-width: 100%;
  }
.tribute-container .highlight{
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, 1);
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity, 1));
}
.tribute-container .highlight {
    color: #fff;
  }
.tribute-container .highlight span {
      font-weight: bold;
    }
/* Tweet embeds */
blockquote.twitter-tweet {
    display: inline-block;
    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    border-color: #eee #ddd #bbb;
    border-radius: 5px;
    border-width: 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    margin: 10px 5px;
    padding: 0 16px 16px;
    max-width: 468px
}
blockquote.twitter-tweet p {
    font-size: 16px;
    font-weight: normal;
    line-height: 20px
}
blockquote.twitter-tweet a {
    color: inherit;
    font-weight: normal;
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: 0 none
}
blockquote.twitter-tweet a:hover,blockquote.twitter-tweet a:focus {
    -webkit-text-decoration: underline;
    text-decoration: underline
}
blockquote.twitter-tweet {
    position: relative;
    background: white;
    padding: 72px 20px 28px !important;
    box-shadow: none;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    margin: 0;
    font-style: normal;
    text-align: left;
    width: 500px;
    max-width: 100%
}
@media (max-width: 369px) {
    blockquote.twitter-tweet {
        padding:60px 17.5px 21.5px !important
    }
}
blockquote.twitter-tweet:before {
    content: 'Follow';
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5.5px 12px 6.5px 33px;
    background: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.89 7.012c.808-.496 1.343-1.173 1.605-2.034-.786.417-1.569.703-2.351.861-.703-.756-1.593-1.14-2.66-1.14-1.043 0-1.924.366-2.643 1.078-.715.717-1.076 1.588-1.076 2.605 0 .309.039.585.117.819-3.076-.105-5.622-1.381-7.628-3.837-.34.601-.51 1.213-.51 1.846 0 1.301.549 2.332 1.645 3.089-.625-.053-1.176-.211-1.645-.47 0 .929.273 1.705.82 2.388.549.676 1.254 1.107 2.115 1.291-.312.08-.641.118-.979.118-.312 0-.533-.026-.664-.083.23.757.664 1.371 1.291 1.841.625.472 1.344.721 2.152.743-1.332 1.045-2.855 1.562-4.578 1.562-.422 0-.721-.006-.902-.038 1.697 1.102 3.586 1.649 5.676 1.649 2.139 0 4.029-.542 5.674-1.626 1.645-1.078 2.859-2.408 3.639-3.974.784-1.564 1.172-3.192 1.172-4.892v-.468c.758-.57 1.371-1.212 1.84-1.921-.68.293-1.383.492-2.11.593z' fill='%23ccc'/%3E%3C/svg%3E") 9px center no-repeat;
    background-size: 21px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #ccc;
    font-size: 14px
}
@media (max-width: 369px) {
    blockquote.twitter-tweet:before {
        display:none
    }
}
blockquote.twitter-tweet:after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
    background: #eee url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 12c2.21 0 4-1.795 4-4 0-2.21-1.79-4-4-4s-4 1.79-4 4c0 2.205 1.79 4 4 4zm0 2c-2.665 0-8 1.335-8 4v2h16v-2c0-2.665-5.335-4-8-4z' fill='%23444'/%3E%3C/svg%3E") center center no-repeat;
    border-radius: 4px
}
@media (max-width: 369px) {
    blockquote.twitter-tweet:after {
        top:17.5px;
        left: 17.5px
    }
}
blockquote.twitter-tweet p {
    white-space: pre-wrap;
    margin: 0 0 28px
}
@media (max-width: 369px) {
    blockquote.twitter-tweet p {
        font-size:14px;
        margin-bottom: 16px
    }
}
blockquote.twitter-tweet a {
    border: 0;
    box-shadow: none;
    color: #2b7bb9
}
blockquote.twitter-tweet>a {
    color: #888
}
.alert,
.banner {
  background: #eee2ce;
  background: var(--base-bg-base);
  color: #374151;
  color: var(--base-text-secondary);
  padding: 16px;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: center;
  font-family: Inter;
  font-size: 14px;
  line-height: 20px;
}
.alert svg,.banner svg {
    height: 20px;
    width: 20px;
    color: #2883c4;
    color: var(--base-icon);
    flex-shrink: 0;
  }
.alert h4 a,.banner h4 a,.alert p a,.banner p a {
    display: inline;
    margin-right: 0px;
  }
.alert p,.banner p {
    font-weight: 400;
    color: #374151;
    color: var(--base-text-secondary);
  }
.alert {
  font-weight: 600;
  border-radius: 4px;
  gap: 16px;
}
.alert svg {
    align-self: start;
  }
.alert h4 {
    font-size: 14px;
  }
.alert a {
    color: #ec1c24;
    color: var(--text-primary);
    display: inline-block;
    font-weight: 600;
    margin-top: 16px;
    margin-right: 24px;
  }
.alert li {
    color: #ec1c24;
    color: var(--text-primary);
    font-weight: 400;
  }
.alert.alert-info {
    background: #eff6ff;
    background: var(--bg-info-secondary);
    color: #1d4ed8;
    color: var(--text-on-info-secondary);
  }
.alert.alert-info svg {
      color: #3b82f6;
      color: var(--icon-on-info-secondary);
    }
.alert.alert-info a,.alert.alert-info li {
      color: #1d4ed8;
      color: var(--text-on-info-secondary);
    }
.alert.alert-success {
    background: #f0fdf4;
    background: var(--bg-success-secondary);
    color: #15803d;
    color: var(--text-on-success-secondary);
  }
.alert.alert-success svg {
      color: #16a34a;
      color: var(--icon-on-success-secondary);
    }
.alert.alert-success a,.alert.alert-success li {
      color: #15803d;
      color: var(--text-on-success-secondary);
    }
.alert.alert-error {
    background: #fef2f2;
    background: var(--bg-danger-secondary);
    color: #b91c1c;
    color: var(--text-on-danger-secondary);
  }
.alert.alert-error svg {
      color: #dc2626;
      color: var(--icon-on-danger-secondary);
    }
.alert.alert-error a,.alert.alert-error li {
      color: #b91c1c;
      color: var(--text-on-danger-secondary);
    }
.alert.alert-warning {
    background: #fffbeb;
    background: var(--bg-warning-secondary);
    color: #b45309;
    color: var(--text-on-warning-secondary);
  }
.alert.alert-warning svg {
      color: #b45309;
      color: var(--icon-on-warning-secondary);
    }
.alert.alert-warning a,.alert.alert-warning li {
      color: #b45309;
      color: var(--text-on-warning-secondary);
    }
.banner {
  justify-content: center;
  gap: 8px;
}
.banner.banner-info {
    background: #eff6ff;
    background: var(--bg-info-secondary);
    color: #1d4ed8;
    color: var(--text-on-info-secondary);
  }
.banner.banner-info p {
      color: #1d4ed8;
      color: var(--text-on-info-secondary);
    }
.banner.banner-success {
    background: #f0fdf4;
    background: var(--bg-success-secondary);
    color: #15803d;
    color: var(--text-on-success-secondary);
  }
.banner.banner-success p {
      color: #15803d;
      color: var(--text-on-success-secondary);
    }
.banner.banner-error {
    background: #fef2f2;
    background: var(--bg-danger-secondary);
    color: #b91c1c;
    color: var(--text-on-danger-secondary);
  }
.banner.banner-error p {
      color: #b91c1c;
      color: var(--text-on-danger-secondary);
    }
.banner.banner-warning {
    background: #fffbeb;
    background: var(--bg-warning-secondary);
    color: #b45309;
    color: var(--text-on-warning-secondary);
  }
.banner.banner-warning p {
      color: #b45309;
      color: var(--text-on-warning-secondary);
    }
.banner.banner-impersonate {
    background: #dc2626;
    background: var(--bg-danger-hover);
    color: #fff;
    color: var(--text-on-danger);
  }
.banner.banner-impersonate a {
      color: #fff;
      color: var(--text-on-danger);
    }
.banner.banner-impersonate  > * + * {
      margin-left: 8px;
    }
.icon-alert {
  fill: #b45309;
  fill: var(--icon-on-warning-secondary);
}
.icon-error {
  fill: #dc2626;
  fill: var(--icon-on-danger-secondary);
}
.icon-notice {
  fill: #3b82f6;
  fill: var(--icon-on-info-secondary);
}
.icon-success {
  fill: #16a34a;
  fill: var(--icon-on-success-secondary);
}
.icon-default {
  fill: #2883c4;
  fill: var(--base-icon);
}
.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes slide-in-from-left {
  from {
    transform: translateX(-100%);
  }
}
@keyframes slide-out-to-left {
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide-in-from-right {
  from {
    transform: translateX(100%);
  }
}
@keyframes slide-out-to-right {
  to {
    transform: translateX(100%);
  }
}
.announcement-new{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 226, 226, 1);
  background-color: rgba(254, 226, 226, var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, 1);
  color: rgba(220, 38, 38, var(--tw-text-opacity, 1));
}
.announcement-fix{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 226, 226, 1);
  background-color: rgba(254, 226, 226, var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, 1);
  color: rgba(220, 38, 38, var(--tw-text-opacity, 1));
}
.announcement-update{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 252, 231, 1);
  background-color: rgba(220, 252, 231, var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgba(22, 163, 74, 1);
  color: rgba(22, 163, 74, var(--tw-text-opacity, 1));
}
.announcement-improvement{
  --tw-bg-opacity: 1;
  background-color: rgba(243, 232, 255, 1);
  background-color: rgba(243, 232, 255, var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgba(147, 51, 234, 1);
  color: rgba(147, 51, 234, var(--tw-text-opacity, 1));
}
.avatar {
  font-size: 13px;
  font-weight: 600;
  position: relative;
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  min-width: 14px;
  color: #fff;
  align-items: center;
  justify-content: center;
}
.avatar .avatar-small {
    position: absolute;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    bottom: 0;
    right: 0;
    box-shadow: 0 0 0 2px #fff;
  }
/* Hotwire's version of data-disable-with */
button                  .when-disabled { display: none; }
button[disabled]        .when-disabled { display: inline; display: initial; }
button                  .when-enabled { display: inline; display: initial; }
button[disabled]        .when-enabled { display: none; }
pre{
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
pre code.hljs{
  border-radius: 0.25rem;
}
pre code.hljs{
  padding: 1rem;
}
code{
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(239, 68, 68, 1);
  color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}
.direct-upload {
  display: inline-block;
  position: relative;
  padding: 2px 4px;
  margin: 0 3px 3px 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  font-size: 11px;
  line-height: 13px;
}
.direct-upload--pending {
  opacity: 0.6;
}
.direct-upload__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  background: #0076ff;
  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
  transform: translate3d(0, 0, 0);
}
.direct-upload--complete .direct-upload__progress {
  opacity: 0.4;
}
.direct-upload--error {
  border-color: red;
}
input[type=file][data-direct-upload-url][disabled] {
  display: none;
}
/* File upload error and success messages */
.file-upload-error {
  animation: slideIn 0.3s ease-out;
}
.file-upload-success {
  animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Enhanced direct upload error styling */
.direct-upload--error {
  border-color: #ef4444;
  background-color: #fef2f2;
}
.direct-upload--error .direct-upload__filename {
  color: #dc2626;
}
.docs-main {
  min-height: calc(100vh - 64px);
}
.image-placeholder {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgba(209, 213, 219, 1);
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity, 1));
}
.form-group {
  margin-bottom: 24px;
  position: relative;
}
.form-group:has( > input:required) label::after,.form-group:has( > select:required) label::after {
    content: "*";
    color: #dc2626;
    color: var(--icon-on-danger-secondary);
  }
.form-group .calendar-icon {
    position: absolute;
    right: 8px;
    top: 50%;
  }
.form-group input:focus-visible  + .calendar-icon path {
      fill: #f16222;
      fill: var(--border-primary-hover);
      color: #f16222;
      color: var(--border-primary-hover);
    }
.form-group input:focus  + .calendar-icon path {
      fill: #f16222;
      fill: var(--border-primary-hover);
      color: #f16222;
      color: var(--border-primary-hover);
    }
.form-group input.error  + .calendar-icon path {
      fill: #dc2626;
      fill: var(--icon-on-danger-secondary);
      color: #dc2626;
      color: var(--icon-on-danger-secondary);
    }
.form-group:has( > [data-controller="flatpickr"]) {
    width: 33.33%;
  }
/* non-input elements (like the Stripe card form) can be styled to look like an input */
div.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border-width: 1px;
  padding-top: .5rem;
  padding-right: .75rem;
  padding-bottom: .5rem;
  padding-left: .75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
select {
  background-color: #fff;
  background-color: var(--base-bg-low);
  border: 1px solid #2883c4;
  border: 1px solid var(--base-border-primary);
  border-radius: 0;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  padding: 6px 0px;
  width: 100%;
}
select[disabled],select[read-only] {
    background-color: #e2e8f0;
    background-color: var(--bg-disabled);
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    color: #6b7280;
    color: var(--base-text-tertiary);
    cursor: not-allowed;
  }
select:focus,select:focus-visible {
    box-shadow: inset 0 0 0 1px #f16222;
    box-shadow: inset 0 0 0 1px var(--border-primary-hover);
    border: 1px solid #f16222;
    border: 1px solid var(--border-primary-hover);
  }
select:not([multiple]) {
  padding-left: 12px;
}
select[multiple] {
  background: #fff;
  background: var(--base-bg-low);
  border: 1px solid #2883c4;
  border: 1px solid var(--base-border-primary);
  border-radius: 0;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  padding: 6px 0px;
  width: 100%;
}
select[multiple]::-moz-placeholder {
    color: #6b7280;
    color: var(--base-text-tertiary);
  }
select[multiple]::placeholder {
    color: #6b7280;
    color: var(--base-text-tertiary);
  }
select[multiple]:focus,select[multiple]:focus-visible {
    box-shadow: inset 0 0 0 1px #f16222;
    box-shadow: inset 0 0 0 1px var(--border-primary-hover);
    border: 1px solid #f16222;
    border: 1px solid var(--border-primary-hover);
  }
select.error[multiple] {
    background: #fef2f2;
    background: var(--bg-danger-secondary);
    box-shadow: inset 0 0 0 1px #ef4444;
    box-shadow: inset 0 0 0 1px var(--border-danger);
    border: 1px solid #ef4444;
    border: 1px solid var(--border-danger);
    color: #b91c1c;
    color: var(--text-on-danger-secondary);
  }
select.error[multiple]:focus,select.error[multiple]:focus-visible {
      background: #fff;
      background: var(--base-bg-low);
    }
select[multiple][disabled],select[multiple][read-only] {
    background: #e2e8f0;
    background: var(--bg-disabled);
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    color: #6b7280;
    color: var(--base-text-tertiary);
    cursor: not-allowed;
  }
select[multiple] option {
    color: #1e293b;
    color: var(--text-on-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 4px 12px;
  }
select[multiple] option[selected] {
      background: #cbd5e1;
      background: var(--bg-disabled-secondary);
    }
label,
.label {
  color: #374151;
  color: var(--base-text-secondary);
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 5px;
}
.form-hint {
  color: #374151;
  color: var(--base-text-secondary);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-top: 4px;
}
.form-hint.error {
    color: #b91c1c;
    color: var(--text-danger);
    display: flex;
    align-items: center;
  }
.form-hint.error::before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: #dc2626;
      background-color: var(--icon-on-danger-secondary);
      -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.70013 2.25C7.27749 1.25 8.72086 1.25 9.29821 2.25L14.4944 11.25C15.0717 12.25 14.35 13.5 13.1953 13.5H2.80302C1.64832 13.5 0.926631 12.25 1.50398 11.25L6.70013 2.25ZM7.99917 4C8.41338 4 8.74917 4.33579 8.74917 4.75V7.75C8.74917 8.16421 8.41338 8.5 7.99917 8.5C7.58496 8.5 7.24917 8.16421 7.24917 7.75V4.75C7.24917 4.33579 7.58496 4 7.99917 4ZM7.99917 12C8.55146 12 8.99917 11.5523 8.99917 11C8.99917 10.4477 8.55146 10 7.99917 10C7.44689 10 6.99917 10.4477 6.99917 11C6.99917 11.5523 7.44689 12 7.99917 12Z" fill="#DC2626"/></svg>');
              mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.70013 2.25C7.27749 1.25 8.72086 1.25 9.29821 2.25L14.4944 11.25C15.0717 12.25 14.35 13.5 13.1953 13.5H2.80302C1.64832 13.5 0.926631 12.25 1.50398 11.25L6.70013 2.25ZM7.99917 4C8.41338 4 8.74917 4.33579 8.74917 4.75V7.75C8.74917 8.16421 8.41338 8.5 7.99917 8.5C7.58496 8.5 7.24917 8.16421 7.24917 7.75V4.75C7.24917 4.33579 7.58496 4 7.99917 4ZM7.99917 12C8.55146 12 8.99917 11.5523 8.99917 11C8.99917 10.4477 8.55146 10 7.99917 10C7.44689 10 6.99917 10.4477 6.99917 11C6.99917 11.5523 7.44689 12 7.99917 12Z" fill="#DC2626"/></svg>');
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-position: center;
              mask-position: center;
    }
.caret {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  color: #1e293b;
  color: var(--text-on-secondary);
}
form.inline .form-group,form.inline .file-input-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
form.inline .form-group .input {
    flex: 1 1 0%;
  }
form.inline .form-group .label {
    width: 25%;
  }
/* Fix flatpickr */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  display: inline-block;
}
.dayContainer .flatpickr-day:hover,.dayContainer .flatpickr-day.today:hover,.dayContainer .flatpickr-day.selected:hover {
    background: #eee2ce;
    background: var(--base-bg-hover);
    border-color: #eee2ce;
    border-color: var(--base-bg-hover);
    color: #f16222;
    color: var(--text-primary-hover);
  }
.dayContainer .flatpickr-day.today {
    border-color: #ec1c24;
    border-color: var(--base-border-focus);
    color: #050707;
    color: var(--base-text);
  }
.dayContainer .flatpickr-day.selected,.dayContainer .flatpickr-day.selected:hover {
    background: #ec1c24;
    background: var(--bg-primary);
    border-color: #ec1c24;
    border-color: var(--bg-primary);
    color: #fff;
    color: var(--text-on-primary);
  }
.flatpickr-time .numInput.flatpickr-hour {
    font-weight: 400;
  }
/* Checkboxes, Radio Buttons, and Switches/Toggles */
.form-picker-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.form-picker-group input[type="checkbox"],.form-picker-group input[type='radio'] {
    margin-top: 4px;
  }
.form-picker-group label {
    display: block;
    margin-bottom: 0px;
    color: #050707;
    color: var(--base-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }
.form-picker-group:has( > .form-checkbox:disabled) label,.form-picker-group:has( > .form-checkbox:disabled) p,.form-picker-group:has( > [type="checkbox"]:disabled) label,.form-picker-group:has( > [type="checkbox"]:disabled) p,.form-picker-group:has( > .form-radio:disabled) label,.form-picker-group:has( > .form-radio:disabled) p,.form-picker-group:has( > [type="radio"]:disabled) label,.form-picker-group:has( > [type="radio"]:disabled) p {
    color: #9ca3af;
    color: var(--base-text-disabled);
    cursor: not-allowed;
  }
.form-picker-group.switch:has( > .form-checkbox:disabled) label {
      color: #9ca3af;
      color: var(--base-text-disabled);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > .form-checkbox:disabled) label {
      color: #9ca3af;
      color: var(--base-text-disabled);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > [type="checkbox"]:disabled) label {
      color: #9ca3af;
      color: var(--base-text-disabled);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > [type="checkbox"]:disabled) label {
      color: #9ca3af;
      color: var(--base-text-disabled);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > .form-checkbox:disabled) label::before {
      background: #cbd5e1;
      background: var(--bg-disabled-secondary);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > .form-checkbox:disabled) label::before {
      background: #cbd5e1;
      background: var(--bg-disabled-secondary);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > [type="checkbox"]:disabled) label::before {
      background: #cbd5e1;
      background: var(--bg-disabled-secondary);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > [type="checkbox"]:disabled) label::before {
      background: #cbd5e1;
      background: var(--bg-disabled-secondary);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > .form-checkbox:disabled) label::after {
      background: #e2e8f0;
      background: var(--bg-disabled);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > .form-checkbox:disabled) label::after {
      background: #e2e8f0;
      background: var(--bg-disabled);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > [type="checkbox"]:disabled) label::after {
      background: #e2e8f0;
      background: var(--bg-disabled);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > [type="checkbox"]:disabled) label::after {
      background: #e2e8f0;
      background: var(--bg-disabled);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > .form-checkbox:disabled:checked) label::before {
      background: #94a3b8;
      background: var(--bg-disabled-selected);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > .form-checkbox:disabled:checked) label::before {
      background: #94a3b8;
      background: var(--bg-disabled-selected);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > [type="checkbox"]:disabled:checked) label::before {
      background: #94a3b8;
      background: var(--bg-disabled-selected);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > [type="checkbox"]:disabled:checked) label::before {
      background: #94a3b8;
      background: var(--bg-disabled-selected);
      cursor: not-allowed;
    }
.switch,
.toggle {
  position: relative;
}
.switch input[type="checkbox"],.toggle input[type="checkbox"] {
    position: absolute;
    top: 2;
    left: 0;
    opacity: 0;
  }
.switch input[type="checkbox"]:checked + label:not(does-not-exist)::before {
          background: #ec1c24;
          background: var(--bg-primary);
        }
.toggle input[type="checkbox"]:checked + label:not(does-not-exist)::before {
          background: #ec1c24;
          background: var(--bg-primary);
        }
.switch input[type="checkbox"]:checked + div label::before {
          background: #ec1c24;
          background: var(--bg-primary);
        }
.toggle input[type="checkbox"]:checked + div label::before {
          background: #ec1c24;
          background: var(--bg-primary);
        }
.switch input[type="checkbox"]:checked + label:not(does-not-exist)::after {
          transform: translateX(26px);
        }
.toggle input[type="checkbox"]:checked + label:not(does-not-exist)::after {
          transform: translateX(26px);
        }
.switch input[type="checkbox"]:checked + div label::after {
          transform: translateX(26px);
        }
.toggle input[type="checkbox"]:checked + div label::after {
          transform: translateX(26px);
        }
.switch label,.toggle label {
    position: relative;
    padding-left: 64px;
  }
.switch label:hover,.toggle label:hover {
      cursor: pointer;
    }
.switch label:focus::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.toggle label:focus::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.switch label:focus-visible::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.toggle label:focus-visible::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.switch label::before {
      background: #eee2ce;
      background: var(--base-bg-high);
      position: absolute;
      top: 0;
      left: 0;
      height: 24px;
      width: 50px;
      content: "";
      border-radius: 24px;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.toggle label::before {
      background: #eee2ce;
      background: var(--base-bg-high);
      position: absolute;
      top: 0;
      left: 0;
      height: 24px;
      width: 50px;
      content: "";
      border-radius: 24px;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.switch label::after {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
      background: #eee2ce;
      background: var(--base-bg-base);
      border-radius: 9999px;
      content: "";
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.toggle label::after {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
      background: #eee2ce;
      background: var(--base-bg-base);
      border-radius: 9999px;
      content: "";
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.switch p,.toggle p {
    position: relative;
    padding-left: 64px;
  }
.switch-right,
.toggle-right {
  position: relative;
}
.switch-right input[type="checkbox"],.toggle-right input[type="checkbox"] {
    position: absolute;
    top: 2px;
    left: 120px;
    opacity: 0;
  }
.switch-right:has(.form-checkbox:checked) label::before {
      background: #ec1c24;
      background: var(--bg-primary);
    }
.toggle-right:has(.form-checkbox:checked) label::before {
      background: #ec1c24;
      background: var(--bg-primary);
    }
.switch-right:has([type="checkbox"]:checked) label::before {
      background: #ec1c24;
      background: var(--bg-primary);
    }
.toggle-right:has([type="checkbox"]:checked) label::before {
      background: #ec1c24;
      background: var(--bg-primary);
    }
.switch-right:has(.form-checkbox:checked) label::after {
      transform: translateX(26px);
    }
.toggle-right:has(.form-checkbox:checked) label::after {
      transform: translateX(26px);
    }
.switch-right:has([type="checkbox"]:checked) label::after {
      transform: translateX(26px);
    }
.toggle-right:has([type="checkbox"]:checked) label::after {
      transform: translateX(26px);
    }
.switch-right label,.toggle-right label {
    position: relative;
    padding-right: 64px;
  }
.switch-right label:hover,.toggle-right label:hover {
      cursor: pointer;
    }
.switch-right label:focus::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.toggle-right label:focus::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.switch-right label:focus-visible::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.toggle-right label:focus-visible::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.switch-right label::before {
      background: #eee2ce;
      background: var(--base-bg-high);
      position: absolute;
      top: 0;
      right: 0;
      height: 24px;
      width: 50px;
      content: "";
      border-radius: 24px;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.toggle-right label::before {
      background: #eee2ce;
      background: var(--base-bg-high);
      position: absolute;
      top: 0;
      right: 0;
      height: 24px;
      width: 50px;
      content: "";
      border-radius: 24px;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.switch-right label::after {
      position: absolute;
      top: 2px;
      right: 28px;
      width: 20px;
      height: 20px;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
      background: #eee2ce;
      background: var(--base-bg-base);
      border-radius: 9999px;
      content: "";
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.toggle-right label::after {
      position: absolute;
      top: 2px;
      right: 28px;
      width: 20px;
      height: 20px;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
      background: #eee2ce;
      background: var(--base-bg-base);
      border-radius: 9999px;
      content: "";
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.switch-right p,.toggle-right p {
    position: relative;
    padding-right: 64px;
  }
.form-checkbox,
[type="checkbox"],
.form-radio,
[type='radio'] {
  background: #eee2ce;
  background: var(--base-bg-base);
  border: 1px solid #f6a081;
  border: 1px solid var(--base-border-secondary);
  cursor: pointer;
  margin-bottom: 0;
}
.form-checkbox:focus-visible {
    outline: 2px solid #ec1c24;
    outline: 2px solid var(--base-border-focus);
    outline-offset: 2px;
  }
[type="checkbox"]:focus-visible {
    outline: 2px solid #ec1c24;
    outline: 2px solid var(--base-border-focus);
    outline-offset: 2px;
  }
.form-radio:focus-visible {
    outline: 2px solid #ec1c24;
    outline: 2px solid var(--base-border-focus);
    outline-offset: 2px;
  }
[type='radio']:focus-visible {
    outline: 2px solid #ec1c24;
    outline: 2px solid var(--base-border-focus);
    outline-offset: 2px;
  }
.form-checkbox:focus,[type="checkbox"]:focus,.form-radio:focus,[type='radio']:focus {
    outline: 2px solid #ec1c24;
    outline: 2px solid var(--base-border-focus);
    outline-offset: 2px;
  }
.form-checkbox:checked {
    color: #ec1c24;
    color: var(--bg-primary);
  }
[type="checkbox"]:checked {
    color: #ec1c24;
    color: var(--bg-primary);
  }
.form-radio:checked {
    color: #ec1c24;
    color: var(--bg-primary);
  }
[type='radio']:checked {
    color: #ec1c24;
    color: var(--bg-primary);
  }
.form-checkbox:not(:checked):hover {
    border: 2px solid #f16222;
    border: 2px solid var(--border-primary);
  }
[type="checkbox"]:not(:checked):hover {
    border: 2px solid #f16222;
    border: 2px solid var(--border-primary);
  }
.form-radio:not(:checked):hover {
    border: 2px solid #f16222;
    border: 2px solid var(--border-primary);
  }
[type='radio']:not(:checked):hover {
    border: 2px solid #f16222;
    border: 2px solid var(--border-primary);
  }
.form-checkbox:disabled {
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    background: #e2e8f0;
    background: var(--bg-disabled);
    cursor: not-allowed;
  }
[type="checkbox"]:disabled {
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    background: #e2e8f0;
    background: var(--bg-disabled);
    cursor: not-allowed;
  }
.form-radio:disabled {
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    background: #e2e8f0;
    background: var(--bg-disabled);
    cursor: not-allowed;
  }
[type='radio']:disabled {
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    background: #e2e8f0;
    background: var(--bg-disabled);
    cursor: not-allowed;
  }
.form-checkbox:disabled:checked {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
[type="checkbox"]:disabled:checked {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
.form-radio:disabled:checked {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
[type='radio']:disabled:checked {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
.form-checkbox:disabled:checked:hover {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
[type="checkbox"]:disabled:checked:hover {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
.form-radio:disabled:checked:hover {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
[type='radio']:disabled:checked:hover {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
.form-checkbox:disabled:hover {
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-disabled);
    }
[type="checkbox"]:disabled:hover {
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-disabled);
    }
.form-radio:disabled:hover {
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-disabled);
    }
[type='radio']:disabled:hover {
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-disabled);
    }
.form-checkbox,
[type="checkbox"] {
  border-radius: 0;
}
.form-checkbox:disabled:checked {
      background-color: #94a3b8;
      background-color: var(--bg-disabled-selected);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px 14px;
      color: #e2e8f0;
      color: var(--text-on-disabled-selected);
      cursor: not-allowed;
    }
[type="checkbox"]:disabled:checked {
      background-color: #94a3b8;
      background-color: var(--bg-disabled-selected);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px 14px;
      color: #e2e8f0;
      color: var(--text-on-disabled-selected);
      cursor: not-allowed;
    }
.form-checkbox:disabled:checked:hover {
      background-color: #94a3b8;
      background-color: var(--bg-disabled-selected);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px 14px;
      color: #e2e8f0;
      color: var(--text-on-disabled-selected);
      cursor: not-allowed;
    }
[type="checkbox"]:disabled:checked:hover {
      background-color: #94a3b8;
      background-color: var(--bg-disabled-selected);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px 14px;
      color: #e2e8f0;
      color: var(--text-on-disabled-selected);
      cursor: not-allowed;
    }
/*File Inputs*/
.file-input-group p.label {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #374151;
    color: var(--base-text-secondary);
  }
.file-input-group p.label span {
      font-family: "Noto Sans";
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;
      color: #dc2626;
      color: var(--icon-on-danger-secondary);
    }
.file-input-group:has( > [type="file"]:required) p.label::after {
    content: "*";
    color: #dc2626;
    color: var(--icon-on-danger-secondary);
    margin-left: -2px;
  }
.file-input-group:has( > [type="file"]:disabled) label,.file-input-group:has( > [type="file"]:disabled) p {
    opacity: 0.6;
    cursor: not-allowed;
  }
.file-input-group input[type="file"] {
    cursor: pointer;
    opacity: 0;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: auto;
  }
.file-input-group label {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    transition: ease 0.3s background, ease 0.3s transform, ease 0.2s color;
  }
.input-file {
  cursor: pointer;
  opacity: 0;
  display: inline-block;
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: auto;
}
.input-file  + label {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    transition: ease 0.3s background, ease 0.3s transform, ease 0.2s color;
  }
/* A couple handy classes for responsive YouTube and other iframe embeds */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
[data-controller="stripe--embedded-checkout"] iframe{
  border-radius: 0.5rem;
}
/* Prevent scrolling while dialog is open */
body:has(dialog[open]) {
  filter: blur(4px);
  overflow: hidden;
}
/* Slideover animations */
dialog.slideover[open] {
  animation: slide-in-from-right 200ms forwards ease-in-out;
}
dialog.slideover[closing] {
  pointer-events: none;
  animation: slide-out-to-right 200ms forwards ease-in-out;
}
dialog.modal {
  border-radius: 8px;
  max-height: 100vh;
  width: 100%;
}
dialog.modal[open] {
    animation: fadeIn 200ms forwards;
  }
dialog.modal[closing] {
    animation: fadeOut 200ms forwards;
  }
dialog.modal.modal::backdrop {
    background: #050707;
    background: var(--base-bg-backdrop);
    opacity: 0.5;
  }
dialog.modal.modal-sm {
    max-width: 384px;
  }
dialog.modal.modal-md {
    max-width: 448px;
  }
dialog.modal.modal-lg {
    max-width: 512px;
  }
dialog.modal.modal-full {
    border-radius: 0px;
    max-height: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0px;
  }
dialog.modal .modal-card {
    position: relative;
    padding: 24px;
    background: #fff;
    background: var(--base-bg-low);
  }
dialog.modal .modal-card.full {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
dialog.modal .modal-card.full div:first-of-type {
        align-items: flex-start;
        justify-content: center;
        display: flex;
        flex-direction: column;
        width: 66.666667%;
        margin-left: auto;
        margin-right: auto;
      }
dialog.modal .modal-card.full div:last-child {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 16px;
        margin-left: auto;
        margin-right: auto;
        gap: 8px;
        width: 66.666667%;
      }
dialog.modal .modal-card button[type="button"] {
      position: absolute;
      right: 16px;
      top: 16px;
      border-radius: 8px;
      color: #2883c4;
      color: var(--base-icon);
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
dialog.modal .modal-card button[type="button"]:hover {
        cursor: pointer;
        color: #374151;
        color: var(--base-text-secondary);
      }
dialog.modal .modal-card button[type="button"]:disabled {
        pointer-events: none;
      }
dialog.modal .modal-card .modal-title {
      font-size: 18px;
      line-height: 28px;
      margin-bottom: 8px;
      font-weight: 700;
      color: #050707;
      color: var(--base-text);
    }
dialog.modal .modal-card .modal-body {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      margin-bottom: 8px;
      color: #050707;
      color: var(--base-text);
    }
dialog.modal .modal-card .modal-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 16px;
      gap: 8px;
    }
/* ============================================================
   BLUME Navigation — single source of truth
   Replaces nav.css + top_nav.css
   ============================================================ */
/* ----------------------------------------------------------
   Top bar
   ---------------------------------------------------------- */
.top-nav,
header {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.top-nav::after,
.top-nav::before,
header::after,
header::before {
  display: none !important;
}
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 4px 16px;
  min-height: 64px;
  background: #ffffff;
  background: var(--card-bg, #ffffff);
}
@media (min-width: 1024px) {
  .top-nav {
    padding: 0 32px;
  }
}
/* ----------------------------------------------------------
   Logo (pinned left)
   ---------------------------------------------------------- */
.top-nav .logo {
  position: absolute;
  left: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 100%;
}
.top-nav .logo a {
  cursor: default;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .top-nav .logo {
    left: 32px;
  }
}
/* ----------------------------------------------------------
   User controls (pinned right)
   ---------------------------------------------------------- */
.nav-user-controls {
  position: absolute;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 100%;
}
@media (min-width: 1024px) {
  .nav-user-controls {
    right: 32px;
  }
}
/* ----------------------------------------------------------
   Nav container (centred flex)
   ---------------------------------------------------------- */
.nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  margin: 0 auto;
  min-height: 100%;
}
.nav-container nav {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
/* ----------------------------------------------------------
   Nav links — base state
   ---------------------------------------------------------- */
.nav-link,
.nav-container nav .nav-link,
.top-nav .nav-link {
  color: #374151;
  font-weight: bold;
  -webkit-text-decoration: none;
  text-decoration: none;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* ----------------------------------------------------------
   Nav links — hover (unselected only)
   ---------------------------------------------------------- */
nav.top-nav .nav-container nav .nav-link:not(.active):hover,
.nav-container nav .nav-link:not(.active):hover,
.top-nav .nav-link:not(.active):hover {
  color: #f16222 !important;
  background-color: #eee2ce !important;
  padding: 5px 8px;
}
/* No hover change on active link */
.nav-container nav .nav-link.active:hover,
.top-nav .nav-link.active:hover {
  color: #f16222 !important;
  background-color: #eee2ce !important;
  padding: 5px 8px;
}
/* ----------------------------------------------------------
   Nav links — active
   ---------------------------------------------------------- */
.nav-link.active,
.nav-container nav .nav-link.active,
.top-nav .nav-link.active {
  color: #f16222 !important;
  background-color: #eee2ce !important;
  padding: 5px 8px;
}
/* Nav container layout variants */
.nav-container--centered {
  justify-content: center;
}
.nav-container--right {
  justify-content: flex-end;
  padding-right: 16px;
}
/* ----------------------------------------------------------
   Events dropdown
   ---------------------------------------------------------- */
.events-nav-item {
  position: relative;
}
.events-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
}
/* ----------------------------------------------------------
   Profile sidebar
   ---------------------------------------------------------- */
.profile-sidebar ul,
.profile-sidebar nav ul,
.profile-sidebar .space-y-2 {
  list-style: none;
  padding-left: 0;
}
.profile-sidebar li {
  list-style: none;
}
/* ----------------------------------------------------------
   Subscription alert banner (in nav area)
   ---------------------------------------------------------- */
.nav-alert {
  background-color: #fef2f2;
  background-color: var(--color-red-50, #fef2f2);
  border-left: 4px solid #ef4444;
  border-left: 4px solid var(--color-red-500, #ef4444);
  padding: 8px 16px;
}
/* ----------------------------------------------------------
   Dark mode
   ---------------------------------------------------------- */
.dark .top-nav {
  background: #ffffff;
  background: var(--card-bg, #111827);
  border-bottom-color: #e5e7eb;
  border-bottom-color: var(--border-color, #374151);
}
.dark .nav-link {
  color: #333333;
  color: var(--text-color, #f3f4f6);
}
.dark .nav-link:hover {
  color: #333333;
  color: var(--text-color, #ffffff);
}
.dark .nav-link.active {
  color: #ec1c24;
  color: var(--bg-primary, #f16222);
  background-color: rgba(238, 226, 206, 0.15);
}
/* Highlights unseen notifications with background color */
[data-notifications-target="notification"]:not([data-seen-at]){
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, 1);
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1));
}
.dark [data-notifications-target="notification"]:not([data-seen-at]){
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, 1);
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
}
/* Highlights unread notifications with blue dot */
[data-notifications-target="notification"]:not([data-read-at]) [unread]{
  display: block;
}
nav.pagy.nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: start;
}
nav.pagy.nav a:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
nav.pagy.nav a:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
nav.pagy.nav a:not(.gap) {
    background: #eee2ce;
    background: var(--base-bg-lowest);
    border: 1px solid #eee2ce;
    border: 1px solid var(--base-border-tertiary);
    color: #ec1c24;
    color: var(--text-primary);
    padding: 8px 12px;
    position: relative;
    display: block;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    margin-left: -1px;
  }
nav.pagy.nav a:not(.gap):hover {
      background: #eee2ce;
      background: var(--base-bg-hover);
      color: #f16222;
      color: var(--text-primary-hover);
    }
nav.pagy.nav a.current[aria-current="page"]:not(.gap) {
      background: #ec1c24;
      background: var(--bg-primary);
      color: #fff;
      color: var(--text-on-primary);
      margin-left: -1px;
    }
nav.pagy.nav a:not(.gap):not([href]) {
      background: #eee2ce;
      background: var(--base-bg-lowest);
      color: #6b7280;
      color: var(--base-text-tertiary);
      margin-left: -1px;
    }
/* bridge--form component */
[data-bridge-components~="form"]
[data-controller~="bridge--form"]
[type="submit"] {
  display: none;
}
.tab-active {
  background: linear-gradient(116deg, #3957F4 22%, #2F87EE 90%);
  border-radius: 4px 4px 0px 0px;
}
.tab-active a{
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.tab-active a:hover,.tab-active a:focus {
      background: linear-gradient(308deg, #3957F4 24%, #2F87EE 80%);
      border-radius: 4px 4px 0px 0px;
    }
.tab-active a:hover,.tab-active a:focus{
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, 1);
  color: rgba(209, 213, 219, var(--tw-text-opacity, 1));
}
.tippy-box[data-theme~="default"] {
  background-color: #050707;
  background-color: var(--base-bg-tooltip);
  opacity: 0.95;
  color: #fff;
  color: var(--base-text-on-tooltip);
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);
}
.tippy-box[data-theme~='default'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #050707;
  border-top-color: var(--base-bg-tooltip);
}
.tippy-box[data-theme~='default'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: #050707;
  border-bottom-color: var(--base-bg-tooltip);
}
.tippy-box[data-theme~='default'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: #050707;
  border-left-color: var(--base-bg-tooltip);
}
.tippy-box[data-theme~='default'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: #050707;
  border-right-color: var(--base-bg-tooltip);
}
trix-editor {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
trix-toolbar {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0;
}
trix-toolbar * {
  box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: flex;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: black;
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.2em;
  height: 2em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: '';
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #f00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  background-color: #3b82f6;
  border: 1px solid #3b82f6;
  border-radius: 0.375rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  font-size: inherit;
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
  width: 100%;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group .trix-button--dialog:last-of-type {
    margin-left: 0.25rem;
  }
@media (max-device-width: 768px) {
  trix-toolbar .trix-dialog__link-fields {
    display: block;
  }

    trix-toolbar .trix-dialog__link-fields .trix-button-group {
      margin-top: 0.5rem;
    }
}
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection,
trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable]::-moz-selection, trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection,
trix-editor [data-trix-mutable] ::selection {
  background: none;
}
trix-editor
  [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value='100'] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: '';
  background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}
.trix-content {
  line-height: 1.5;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir='rtl'] blockquote,
.trix-content blockquote[dir='rtl'] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir='rtl'] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.trix-content .attachment a:hover,
.trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content
  .attachment__caption
  .attachment__name
  + .attachment__size::before {
  content: ' · ';
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
/* JSP customizations */
html.dark .trix-content pre{
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, 1);
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.font-display{
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
h1, .h1{
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
h2, .h2{
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
}
h3, .h3{
  line-height: 1.5;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  border: none;
  padding: 0;
  border-radius: 0;
  transition: none;
}
h4, .h4{
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
}
h5, .h5{
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
h6, .h6{
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.link{
  --tw-text-opacity: 1;
  color: rgba(239, 68, 68, 1);
  color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}
.link:hover,.link:focus{
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, 1);
  color: rgba(220, 38, 38, var(--tw-text-opacity, 1));
}
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.transition {
  transition: ease-in-out 0.2s all;
}
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* Dark tooltip */
.tooltip-dark {
  min-width: 200px;
  background-color: #111827;
  color: white;
  border: 1px solid #374151;
  border: 1px solid var(--color-gray-700, #374151);
}
/* Wide modal (900px breakpoint) */
.modal-wide {
  width: 900px !important;
  max-width: 900px !important;
  min-width: 900px !important;
}
/* Uppercase spaced label */
.label-uppercase {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Right-anchored dropdown */
.dropdown-right {
  min-width: 10rem;
  right: 0;
}
/* =========================================================================
   General
   ========================================================================= */
/* =========================================================================
   Loaders
   ========================================================================= */
/* =========================================================================
   Headings
   ========================================================================= */
.dark .braintree-placeholder,
.braintree-heading:not(.does-not-exist) {
  color: #d4d4d4;
}
.dark .braintree-icon--bordered {
  background: #FFFFFF;
  border: 1px solid #BBBBBB;
}
/* =========================================================================
   Upper Container
   ========================================================================= */
.dark .braintree-upper-container::-csstools-invalid-before {
  background-color: #FAFAFA;
  border: 1px solid #B5B5B5;
}
/* =========================================================================
   Payment Options
   ========================================================================= */
.dark .braintree-option {
  background-color: #171717;
  border-color: #B5B5B5;
}
.dark .braintree-option:hover {
  background: #404040;
}
.dark .braintree-option.braintree-disabled {
  background: #EAEAEA;
}
.dark .braintree-option.braintree-disabled .braintree-option__label {
  color: #787878;
}
.dark .braintree-option.braintree-disabled .braintree-option__disabled-message span {
  border-bottom: 1px solid #B5B5B5;
}
.dark .braintree-option .braintree-option__label {
  color: #d4d4d4;
}
/* =========================================================================
   Apple Pay buttons
   ========================================================================= */
@supports not (-webkit-appearance: -apple-pay-button) {
  .dark .apple-pay-button-black {
    background-image: -webkit-named-image(apple-pay-logo-white);
    background-color: black;
  }
  .dark .apple-pay-button-white {
    background-image: -webkit-named-image(apple-pay-logo-black);
    background-color: white;
  }
  .dark .apple-pay-button-white-with-line {
    background-image: -webkit-named-image(apple-pay-logo-black);
    background-color: white;
    border: 0.5px solid black;
  }
}
/* =========================================================================
   Sheets
   ========================================================================= */
.dark .braintree-sheet {
  background-color: #171717;
  border: 1px solid #B5B5B5;
}
.dark .braintree-sheet--has-error .braintree-sheet {
  border: 2px solid #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-methods--edit .braintree-method {
  border-left: 2px solid #CA2A2A;
  border-right: 2px solid #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-methods--edit .braintree-method:first-child {
  border-top: 2px solid #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-methods--edit .braintree-method:last-child {
  border-bottom: 2px solid #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-sheet__error {
  color: #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-sheet__error .braintree-sheet__error-icon use {
  fill: #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-sheet__error .braintree-sheet__error-text {
  color: #CA2A2A;
}
.dark .braintree-show-methods .braintree-sheet--active.braintree-sheet--has-error .braintree-sheet {
  border-color: #CA2A2A;
}
.dark .braintree-show-methods .braintree-sheet--active .braintree-sheet {
  border-color: #219653;
}
.dark .braintree-sheet__header {
  border-bottom: 1px solid #B5B5B5;
}
.dark .braintree-sheet__header .braintree-sheet__text {
  color: #FFFFFF;
}
/* =========================================================================
   Input Forms
   ========================================================================= */
.dark .braintree-form__hosted-field iframe {
  background-color: #171717;
}
.dark .braintree-sheet__content--form .braintree-form__field-group .braintree-form__label {
  color: #FFFFFF;
}
.dark .braintree-sheet__content--form .braintree-form__field-group .braintree-form__descriptor {
  color: #FFFFFF;
}
/* =========================================================================
   Payment Methods
   ========================================================================= */
.dark .braintree-method {
  background-color: white;
  border-color: #B5B5B5;
}
.dark .braintree-method .braintree-method__label {
  color: #000000;
}
.dark .braintree-method .braintree-method__icon {
  background-color: #FAFAFA;
  fill: #FAFAFA;
}
.dark .braintree-methods--active:not(.braintree-methods--edit) .braintree-method--active {
  border-color: #219653;
}
.dark .braintree-methods--active:not(.braintree-methods--edit) .braintree-method--active .braintree-method__check {
  background-color: #219653;
}
.dark .braintree-methods--active:not(.braintree-methods--edit) .braintree-method--active .braintree-method__icon {
  fill: white;
}
.dark .braintree-method__delete-container .braintree-method__delete {
  background-color: #EC493A;
}
.dark .braintree-method__delete-container .braintree-method__delete:hover {
  background-color: #c62213;
}
.dark .braintree-delete-confirmation {
  background: #FAFAFA !important;
  color: #606060;
}
.dark .braintree-delete-confirmation .braintree-delete-confirmation__button-container .braintree-delete-confirmation__button {
  border-top: 1px solid #B5B5B5;
  background: #FAFAFA;
  color: #C4C4C4;
}
.dark .braintree-delete-confirmation .braintree-delete-confirmation__button-container [data-braintree-id="delete-confirmation__yes"] {
  color: white;
  background: #EC493A;
  border-left: solid 1px #b5b5b5;
}
.dark .braintree-delete-confirmation .braintree-delete-confirmation__button-container [data-braintree-id="delete-confirmation__yes"]:hover {
  background: #c62213;
}
.dark .braintree-delete-confirmation .braintree-delete-confirmation__button-container [data-braintree-id="delete-confirmation__no"] {
  color: #666666;
}
.dark .braintree-delete-confirmation .braintree-delete-confirmation__button-container [data-braintree-id="delete-confirmation__no"]:hover {
  background: #efefef;
}
.dark .braintree-large-button {
  background: #404040;
  color: #e5e5e5;
}
.dark .braintree-large-button:hover {
  background: #262626;
}
.dark .braintree-large-button:hover span {
  border-color: black;
}
.dark .braintree-large-button span {
  border-bottom: 1px solid #B5B5B5;
}
/* =========================================================================
   Dropin Visibility States
   ========================================================================= */
/* =========================================================================
   Javascript hooks
   ========================================================================= */
/* =========================================================================
   Flexbox-free styling
   ========================================================================= */
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #fff;
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57,57,57,0.15);
  box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
  background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57,57,57,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57,57,57,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0,0,0,0.5);
}
.numInputWrapper:hover {
  background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: baseline;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0,0,0,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: baseline;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: flex;
  flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0,0,0,0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: space-around;
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57,57,57,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57,57,57,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57,57,57,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
[data-tippy-root]{max-width:calc(100vw - 10px)}
.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}
.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}
.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:currentcolor;border-top-color:initial;transform-origin:center top}
.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}
.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:currentcolor;border-bottom-color:initial;transform-origin:center bottom}
.tippy-box[data-placement^=left]>.tippy-arrow{right:0}
.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:currentcolor;border-left-color:initial;right:-7px;transform-origin:center left}
.tippy-box[data-placement^=right]>.tippy-arrow{left:0}
.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:currentcolor;border-right-color:initial;transform-origin:center right}
.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}
.tippy-arrow{width:16px;height:16px;color:#333}
.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}
.tippy-content{position:relative;padding:5px 9px;z-index:1}
/**
 * tom-select.css (v2.4.3)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
  padding: calc(8px - 2px - 0) 8px calc(8px - 2px - 3px - 0);
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}
.focus .ts-control {
  box-shadow: none;
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0 solid #d0d0d0;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0 solid #cacaca;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: rgb(124.5, 124.5, 124.5);
  background: white;
  border: 0 solid white;
}
.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
          user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0 4px !important;
}
.ts-control.rtl {
  text-align: right;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0 4px 0 -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}
.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}
.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}
.ts-dropdown .active.create {
  color: #495c68;
}
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ts-dropdown-content {
  overflow-x: hidden;
  overflow-y: auto;
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}
.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}
.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}
.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}
/* stylelint-disable function-name-case */
.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(0px, 8px);
  right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}
.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: black;
}
.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}
.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-moz-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}
.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}
.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: white;
}
.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: white;
}
:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: .75rem;
}
.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}
.ts-control:not(.rtl) {
  padding-right: max(.75rem, 0px + 0px) !important;
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}
.ts-control.rtl {
  padding-left: max(.75rem, 0px + 0px) !important;
  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}
.ts-wrapper {
  position: relative;
}
.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}
.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}
.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
/*# sourceMappingURL=tom-select.css.map */
/* Sharp corners on legacy (non-.bz) form controls. The .bz design system sets its
   own field radius (7px), so this rule is scoped to exclude .bz descendants. */
input:not(.bz *),
textarea:not(.bz *),
select:not(.bz *) {
  border-radius: 0 !important;
}
tr.over-budget td.border,
tr.over-budget th.border {
  border-color: #ef4444 !important;
  background-color: #fef2f2;
}
tr.over-budget {
  background-color: #fee2e2 !important;
  border-color: #ef4444 !important;
}
.overflow-x-auto {
  max-width: 100%;
  overflow-x: auto;
}
input[type='number'] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Modal animation */
.modal-overlay {
  backdrop-filter: blur(2px);
}
.modal-container {
  animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modal-close:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}
/* Profile sidebar */
.profile-sidebar ul,
.profile-sidebar nav ul,
.profile-sidebar .space-y-2 {
  list-style: none !important;
  padding-left: 0 !important;
}
.profile-sidebar li {
  list-style: none !important;
}
/* Tailwind directives */
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Public Sans, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 rgba(0,0,0,0);
}
[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: /*!*/ /*!*/ 0 0 0 0px #fff, /*!*/ /*!*/ 0 0 0 calc(1px + 0px) #2563eb, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}
input::-moz-placeholder, textarea::-moz-placeholder{
  color: #6b7280;
  opacity: 1;
}
input::placeholder,textarea::placeholder{
  color: #6b7280;
  opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper{
  padding: 0;
}
::-webkit-date-and-time-value{
  min-height: 1.5em;
  text-align: inherit;
}
::-webkit-datetime-edit{
  display: inline-flex;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
  padding-top: 0;
  padding-bottom: 0;
}
select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}
[multiple],[size]:where(select:not([size="1"])){
  background-image: none;
  background-image: initial;
  background-position: 0 0;
  background-position: initial;
  background-repeat: repeat;
  background-repeat: initial;
  background-size: auto auto;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: inherit;
          print-color-adjust: inherit;
}
[type='checkbox'],[type='radio']{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 rgba(0,0,0,0);
}
[type='checkbox']{
  border-radius: 0px;
}
[type='radio']{
  border-radius: 100%;
}
[type='checkbox']:focus,[type='radio']:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: /*!*/ /*!*/ 0 0 0 0px #fff, /*!*/ /*!*/ 0 0 0 calc(2px + 2px) #2563eb, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
[type='checkbox']:checked,[type='radio']:checked{
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
[type='checkbox']:checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
  [type='checkbox']:checked{
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}
[type='radio']:checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
  [type='radio']:checked{
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
  border-color: transparent;
  background-color: currentColor;
}
[type='checkbox']:indeterminate{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (forced-colors: active) {
  [type='checkbox']:indeterminate{
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
  border-color: transparent;
  background-color: currentColor;
}
[type='file']{
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
[type='file']:focus{
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .\!container{
    max-width: 640px !important;
  }
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .\!container{
    max-width: 1024px !important;
  }
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .\!container{
    max-width: 1280px !important;
  }
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .\!container{
    max-width: 1536px !important;
  }
  .container{
    max-width: 1536px;
  }
}
.prose{
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-links);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: top;
}
.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  text-align: left;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose{
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgba(17, 24, 39, 0.1);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgba(255, 255, 255, 0.1);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgba(0, 0, 0, 0.5);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  padding-left: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-right: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 0;
}
.\!btn {
    display: inline-flex !important;
    padding: 8px 12px !important;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important
  }
.btn {
    display: inline-flex;
    padding: 8px 12px;
    -webkit-text-decoration: none;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }
.btn:hover,.btn:focus {
      cursor: pointer;
    }
.btn:focus-visible {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
.btn svg {
      width: 16px;
      height: 16px;
    }
.btn-outline {
    box-shadow: 0 0 rgba(0,0,0,0);
  }
.btn-xs {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
  }
.btn-sm,
  .btn-small {
    padding: 4px 8px;
  }
.btn-lg,
  .btn-large {
    padding: 10px 14px;
  }
.btn-xl {
    padding: 12px 16px;
  }
.btn-icon {
    padding: 8px;
    border-radius: 0;
  }
.btn-icon.btn-xs {
      padding: 4px;
    }
.btn-icon.btn-sm {
      padding: 10px;
    }
.btn-icon.btn-lg {
      padding: 12px;
    }
.btn-icon.btn-xl {
      padding: 14px;
    }
.btn-icon svg {
      width: 24px;
      height: 24px;
    }
.btn-expanded,
  .btn-block {
    display: flex;
    justify-content: center;
    width: 100%;
  }
.btn-primary {
    background: #ec1c24;
    background: var(--bg-primary);
    color: #fff;
    color: var(--text-on-primary);
  }
.btn-primary:hover {
      background: #f16222;
      background: var(--bg-primary-hover);
      color: #fff;
      color: var(--text-on-primary);
    }
.btn-primary:disabled:hover {
      background: #ec1c24;
      background: var(--bg-primary);
      color: #fff;
      color: var(--text-on-primary);
    }
.btn-primary.btn-outline {
      background: transparent;
      color: #ec1c24;
      color: var(--text-primary);
      border: 1px solid #f16222;
      border: 1px solid var(--border-primary-hover);
    }
.btn-primary.btn-outline:hover {
        background: #f16222;
        background: var(--bg-primary-hover);
        color: #fff;
        color: var(--text-on-primary);
        border: 1px solid #f16222;
        border: 1px solid var(--bg-primary-hover);
      }
.btn-secondary,
  .btn-tertiary {
    background: #fff;
    background: var(--bg-secondary);
    color: #1e293b;
    color: var(--text-on-secondary);
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-secondary);
  }
.btn-secondary:hover,.btn-tertiary:hover {
      background: #f1f5f9;
      background: var(--bg-secondary-hover);
      color: #334155;
      color: var(--text-on-secondary-hover);
    }
.btn-secondary:disabled:hover {
      background: #fff;
      background: var(--bg-secondary);
      color: #1e293b;
      color: var(--text-on-secondary);
    }
.btn-tertiary:disabled:hover {
      background: #fff;
      background: var(--bg-secondary);
      color: #1e293b;
      color: var(--text-on-secondary);
    }
.btn-outline.btn-secondary,.btn-outline.btn-tertiary {
      background: transparent;
      color: #1e293b;
      color: var(--text-on-secondary);
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-secondary);
    }
.btn-outline.btn-secondary:hover,.btn-outline.btn-tertiary:hover {
        background: #f1f5f9;
        background: var(--bg-secondary-hover);
        color: #334155;
        color: var(--text-on-secondary-hover);
      }
.btn-danger {
    background: #b91c1c;
    background: var(--bg-danger);
    color: #fff;
    color: var(--text-on-danger);
  }
.btn-danger:hover {
      background: #dc2626;
      background: var(--bg-danger-hover);
      color: #fff;
      color: var(--text-on-danger);
    }
.btn-danger:disabled:hover {
      background: #b91c1c;
      background: var(--bg-danger);
      color: #fff;
      color: var(--text-on-danger);
    }
.btn-danger:focus-visible {
      outline: 2px solid #ef4444;
      outline: 2px solid var(--border-danger-focus);
      outline-offset: 2px;
    }
.btn-danger.btn-outline {
      background: transparent;
      color: #b91c1c;
      color: var(--text-danger);
      border: 1px solid #ef4444;
      border: 1px solid var(--border-danger);
    }
.btn-danger.btn-outline:hover {
        background: #dc2626;
        background: var(--bg-danger-hover);
        color: #fff;
        color: var(--text-on-danger);
        border: 1px solid #dc2626;
        border: 1px solid var(--bg-danger-hover);
      }
.btn-success {
    background: #166534;
    background: var(--bg-success);
    color: #fff;
    color: var(--text-on-success);
  }
.btn-success:hover {
      background: #15803d;
      background: var(--bg-success-hover);
      color: #fff;
      color: var(--text-on-success);
    }
.btn-success:disabled:hover {
      background: #166534;
      background: var(--bg-success);
      color: #fff;
      color: var(--text-on-success);
    }
.btn-success:focus-visible {
      outline: 2px solid #22c55e;
      outline: 2px solid var(--border-success-focus);
      outline-offset: 2px;
    }
.btn-success.btn-outline {
      background: transparent;
      color: #166534;
      color: var(--text-success);
      border: 1px solid #16a34a;
      border: 1px solid var(--border-success);
    }
.btn-success.btn-outline:hover {
        background: #15803d;
        background: var(--bg-success-hover);
        color: #fff;
        color: var(--text-on-success);
        border: 1px solid #15803d;
        border: 1px solid var(--bg-success-hover);
      }
.btn-light,
  .btn-white,
  .btn-gray {
    background: #fff;
    background: var(--bg-light);
    color: #1e293b;
    color: var(--text-on-light);
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-light);
  }
.btn-light:hover,.btn-white:hover,.btn-gray:hover {
      background: #f8fafc;
      background: var(--bg-light-hover);
      color: #1e293b;
      color: var(--text-on-light);
    }
.btn-light:disabled:hover {
      background: #fff;
      background: var(--bg-light);
      color: #1e293b;
      color: var(--text-on-light);
    }
.btn-white:disabled:hover {
      background: #fff;
      background: var(--bg-light);
      color: #1e293b;
      color: var(--text-on-light);
    }
.btn-gray:disabled:hover {
      background: #fff;
      background: var(--bg-light);
      color: #1e293b;
      color: var(--text-on-light);
    }
.btn-outline.btn-light,.btn-outline.btn-white,.btn-outline.btn-gray {
      background: transparent;
      color: #1e293b;
      color: var(--text-on-light-outline);
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-light);
    }
.btn-outline.btn-light:hover,.btn-outline.btn-white:hover,.btn-outline.btn-gray:hover {
        background: #f8fafc;
        background: var(--bg-light-hover);
        color: #1e293b;
        color: var(--text-on-light);
      }
.btn-dark {
    background: #1e293b;
    background: var(--bg-dark);
    color: #fff;
    color: var(--text-on-dark);
    border: 1px solid #1e293b;
    border: 1px solid var(--bg-dark);
  }
.btn-dark:hover {
      background: #334155;
      background: var(--bg-dark-hover);
      color: #fff;
      color: var(--text-on-dark);
      border: 1px solid #334155;
      border: 1px solid var(--bg-dark-hover);
    }
.btn-dark:disabled:hover {
      background: #1e293b;
      background: var(--bg-dark);
      color: #fff;
      color: var(--text-on-dark);
    }
.btn-dark:focus-visible {
      outline: 2px solid #64748b;
      outline: 2px solid var(--border-dark-focus);
      outline-offset: 2px;
    }
.btn-dark.btn-outline {
      background: transparent;
      color: #1e293b;
      color: var(--text-on-dark-outline);
      border: 1px solid #334155;
      border: 1px solid var(--border-dark);
    }
.btn-dark.btn-outline:hover {
        background: #334155;
        background: var(--bg-dark-hover);
        color: #fff;
        color: var(--text-on-dark);
      }
.btn-link {
    background: transparent;
    color: #ec1c24;
    color: var(--text-primary);
    box-shadow: 0 0 rgba(0,0,0,0);
  }
.btn-link:hover {
      color: #f16222;
      color: var(--text-primary-hover);
    }
.btn-link:disabled:hover {
      background: transparent;
      color: #ec1c24;
      color: var(--text-primary);
    }
.btn-link.btn-icon {
      background: #eee2ce;
      background: var(--base-bg-lowest);
      border: 1px solid #f16222;
      border: 1px solid var(--border-primary-hover);
    }
.btn-link.btn-icon:hover {
        background: #fff;
        background: var(--base-bg-low);
      }
.card {
    background: #fff;
    background: var(--base-bg-low);
    color: #050707;
    color: var(--base-text);
    border: 1px solid #f6a081;
    border: 1px solid var(--base-border-secondary);
    border-radius: 8px;
    box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
    padding: 32px;
  }
.card h3 {
      font-size: 24px;
      font-weight: 700;
      line-height: 32px;
      margin-bottom: 16px;
    }
.card p {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }
.card-cta-basic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
.card-image {
    padding: 0px;
    overflow: hidden;
    width: 100%;
  }
.card-image > :last-child {
      padding: 24px;
    }
@media (min-width: 1024px) {
    .card.card-image {
      width: 50%;
    }
  }
.form-control {
    background: #fff;
    background: var(--base-bg-low);
    border: 1px solid #2883c4;
    border: 1px solid var(--base-border-primary);
    border-radius: 0;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    color: #374151;
    color: var(--base-text-secondary);
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 6px 12px;
    width: 100%;
  }
.form-control::-moz-placeholder {
      color: #6b7280;
      color: var(--base-text-tertiary);
    }
.form-control::placeholder {
      color: #6b7280;
      color: var(--base-text-tertiary);
    }
.form-control:focus,.form-control:focus-visible {
      box-shadow: inset 0 0 0 1px #f16222;
      box-shadow: inset 0 0 0 1px var(--border-primary-hover);
      border: 1px solid #f16222;
      border: 1px solid var(--border-primary-hover);
    }
.form-control.error {
      background: #fef2f2;
      background: var(--bg-danger-secondary);
      box-shadow: inset 0 0 0 1px #ef4444;
      box-shadow: inset 0 0 0 1px var(--border-danger);
      border: 1px solid #ef4444;
      border: 1px solid var(--border-danger);
      color: #b91c1c;
      color: var(--text-on-danger-secondary);
    }
.form-control.error:focus,.form-control.error:focus-visible {
        background: #fff;
        background: var(--base-bg-low);
      }
.form-control[disabled],.form-control[readonly] {
      background: #e2e8f0;
      background: var(--bg-disabled);
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-disabled);
      color: #6b7280;
      color: var(--base-text-tertiary);
      cursor: not-allowed;
    }
.form-control[data-controller="flatpickr"] {
      color: #374151;
      color: var(--base-text-secondary);
    }
.form-control[data-controller="flatpickr"]:-moz-read-only {
        background: #fff;
        background: var(--base-bg-low);
      }
.form-control[data-controller="flatpickr"]:read-only {
        background: #fff;
        background: var(--base-bg-low);
      }
.form-control[data-controller="flatpickr"]:-moz-read-only:focus, .form-control[data-controller="flatpickr"]:-moz-read-only:focus-visible {
          box-shadow: inset 0 0 0 1px #f16222;
          box-shadow: inset 0 0 0 1px var(--border-primary-hover);
          border: 1px solid #f16222;
          border: 1px solid var(--border-primary-hover);
        }
.form-control[data-controller="flatpickr"]:read-only:focus,.form-control[data-controller="flatpickr"]:read-only:focus-visible {
          box-shadow: inset 0 0 0 1px #f16222;
          box-shadow: inset 0 0 0 1px var(--border-primary-hover);
          border: 1px solid #f16222;
          border: 1px solid var(--border-primary-hover);
        }
.form-control[data-controller="flatpickr"]:-moz-read-only:disabled {
          background: #e2e8f0;
          background: var(--bg-disabled);
          border: 1px solid #cbd5e1;
          border: 1px solid var(--border-disabled);
          color: #6b7280;
          color: var(--base-text-tertiary);
          cursor: not-allowed;
        }
.form-control[data-controller="flatpickr"]:read-only:disabled {
          background: #e2e8f0;
          background: var(--bg-disabled);
          border: 1px solid #cbd5e1;
          border: 1px solid var(--border-disabled);
          color: #6b7280;
          color: var(--base-text-tertiary);
          cursor: not-allowed;
        }
.form-control.error[data-controller="flatpickr"]:-moz-read-only {
          background: #fef2f2;
          background: var(--bg-danger-secondary);
          box-shadow: inset 0 0 0 1px #ef4444;
          box-shadow: inset 0 0 0 1px var(--border-danger);
          border: 1px solid #ef4444;
          border: 1px solid var(--border-danger);
          color: #b91c1c;
          color: var(--text-on-danger-secondary);
        }
.form-control.error[data-controller="flatpickr"]:read-only {
          background: #fef2f2;
          background: var(--bg-danger-secondary);
          box-shadow: inset 0 0 0 1px #ef4444;
          box-shadow: inset 0 0 0 1px var(--border-danger);
          border: 1px solid #ef4444;
          border: 1px solid var(--border-danger);
          color: #b91c1c;
          color: var(--text-on-danger-secondary);
        }
.form-control.error[data-controller="flatpickr"]:-moz-read-only:focus, .form-control.error[data-controller="flatpickr"]:-moz-read-only:focus-visible {
            background: #fff;
            background: var(--base-bg-low);
          }
.form-control.error[data-controller="flatpickr"]:read-only:focus,.form-control.error[data-controller="flatpickr"]:read-only:focus-visible {
            background: #fff;
            background: var(--base-bg-low);
          }
.pill {
    font-family: Inter;
    border-radius: 9999px;
    padding: 4px 16px;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 16px;
    text-transform: uppercase;
    background: #eee2ce;
    background: var(--base-bg-highest);
    color: #374151;
    color: var(--base-text-secondary);
    display: inline-flex;
    gap: 8px;
    align-items: flex-start;
  }
.pill-outline {
    background: transparent;
    border: 1px solid #f6a081;
    border: 1px solid var(--base-border-secondary);
    color: #374151;
    color: var(--base-text-secondary);
  }
.pill-primary {
    background: #f16222;
    background: var(--bg-primary-hover);
    color: #fff;
    color: var(--text-on-primary);
  }
.pill-primary.pill-outline {
      background: transparent;
      border: 1px solid #f16222;
      border: 1px solid var(--border-primary-hover);
      color: #f16222;
      color: var(--text-primary-hover);
    }
.pill-secondary {
    background: #15803d;
    background: var(--bg-success-hover);
    color: #fff;
    color: var(--text-on-success);
  }
.pill-secondary.pill-outline {
      background: transparent;
      border: 1px solid #22c55e;
      border: 1px solid var(--border-success-focus);
      color: #22c55e;
      color: var(--border-success-focus);
    }
.pill-tertiary {
    background: #64748b;
    background: var(--bg-dark-secondary); 
    color: #fff; 
    color: var(--text-on-dark);
  }
.pill-tertiary.pill-outline {
      background: transparent;
      border: 1px solid #6b7280;
      border: 1px solid var(--base-text-tertiary); 
      color: #6b7280; 
      color: var(--base-text-tertiary); 
    }
.pill-accent {
    background: #2883c4;
    background: var(--bg-accent);
    color: #fff;
    color: var(--text-on-accent);
  }
.pill-accent.pill-outline {
      background: transparent;
      border: 1px solid #2883c4;
      border: 1px solid var(--border-accent);
      color: #2883c4;
      color: var(--text-accent);
    }
#toasts {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: fixed;
    right: 16px;
    top: 48px;
    z-index: 30;
    width: 100%;
    max-width: 384px;
  }
#toasts  > * + * {
      margin-top: 16px;
    }
@media (max-width:640px) {
    #toasts {
      left: 50%;
      transform: translateX(-50%);
    }
  }
.toast {
    background: #fff;
    background: var(--base-bg-low);
    border-radius: 4px;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10);
    display: flex;
    justify-content: space-between;
    padding: 16px;
    width: 100%;
    max-width: 384px;
  }
.toast section:has( > header > svg) p {
      margin-left: 28px;
    }
.toast section header {
      align-items: center;
      display: flex;
      flex-grow: 1;
      gap: 8px;
    }
.toast section header h2 {
        color: #050707;
        color: var(--base-text);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
      }
.toast p {
      color: #374151;
      color: var(--base-text-secondary);
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
    }
.toast div {
      align-items: flex-start;
      display: flex;
      gap: 16px;
    }
.toast div a {
        color: #ec1c24;
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
      }
.toast div a:hover {
          color: #f16222;
          color: var(--text-primary-hover);
        }
.toast div button svg path {
          fill: #2883c4;
          fill: var(--base-icon);
        }
.toast div button:hover svg path {
            fill: #374151;
            fill: var(--base-text-secondary);
          }
.well {
    background: #eee2ce;
    background: var(--base-bg-high);
    color: #050707;
    color: var(--base-text);
    padding: 32px;
    font-family: Inter;
    font-style: normal;
    text-align: center;
    border-radius: 8px;
    max-width: 768px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
.well h2 {
      font-size: 20px;
      font-weight: 700;
      line-height: 28px;
    }
.well p {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }
.well a {
      color: #ec1c24;
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 600;
      line-height: 24px;
    }
.well-lg {
    padding: 64px;
    gap: 16px;
  }
.well-lg h2 {
      font-size: 36px;
      line-height: 40px;
    }
.well-lg p {
      font-size: 20px;
      line-height: 28px;
    }
.well-lg a {
      font-size: 18px;
      line-height: 28px;
    }
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none{
  pointer-events: none;
}
.pointer-events-auto{
  pointer-events: auto;
}
.visible{
  visibility: visible;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.inset-y-0{
  top: 0px;
  bottom: 0px;
}
.bottom-0{
  bottom: 0px;
}
.bottom-4{
  bottom: 1rem;
}
.left-0{
  left: 0px;
}
.left-2{
  left: 0.5rem;
}
.left-full{
  left: 100%;
}
.right-0{
  right: 0px;
}
.right-4{
  right: 1rem;
}
.top-0{
  top: 0px;
}
.top-1\/2{
  top: 50%;
}
.top-12{
  top: 3rem;
}
.top-20{
  top: 5rem;
}
.top-4{
  top: 1rem;
}
.top-full{
  top: 100%;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.z-30{
  z-index: 30;
}
.z-40{
  z-index: 40;
}
.z-50{
  z-index: 50;
}
.z-\[99999999\]{
  z-index: 99999999;
}
.z-\[99999\]{
  z-index: 99999;
}
.z-\[9999\]{
  z-index: 9999;
}
.order-3{
  order: 3;
}
.m-0{
  margin: 0px;
}
.m-1{
  margin: 0.25rem;
}
.m-8{
  margin: 2rem;
}
.m-auto{
  margin: auto;
}
.-mx-2{
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-12{
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-24{
  margin-top: 6rem;
  margin-bottom: 6rem;
}
.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.-mb-px{
  margin-bottom: -1px;
}
.-ml-1{
  margin-left: -0.25rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-10{
  margin-bottom: 2.5rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-24{
  margin-bottom: 6rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.ml-4{
  margin-left: 1rem;
}
.ml-9{
  margin-left: 2.25rem;
}
.ml-auto{
  margin-left: auto;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-3{
  margin-right: 0.75rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-12{
  margin-top: 3rem;
}
.mt-16{
  margin-top: 4rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-auto{
  margin-top: auto;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.size-5{
  width: 1.25rem;
  height: 1.25rem;
}
.size-6{
  width: 1.5rem;
  height: 1.5rem;
}
.h-0{
  height: 0px;
}
.h-1{
  height: 0.25rem;
}
.h-10{
  height: 2.5rem;
}
.h-12{
  height: 3rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.h-20{
  height: 5rem;
}
.h-3{
  height: 0.75rem;
}
.h-32{
  height: 8rem;
}
.h-4{
  height: 1rem;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-96{
  height: 24rem;
}
.h-\[90vh\]{
  height: 90vh;
}
.h-dvh{
  height: 100dvh;
}
.h-full{
  height: 100%;
}
.max-h-40{
  max-height: 10rem;
}
.max-h-48{
  max-height: 12rem;
}
.max-h-64{
  max-height: 16rem;
}
.max-h-96{
  max-height: 24rem;
}
.max-h-\[90vh\]{
  max-height: 90vh;
}
.max-h-dvh{
  max-height: 100dvh;
}
.max-h-full{
  max-height: 100%;
}
.min-h-\[400px\]{
  min-height: 400px;
}
.min-h-screen{
  min-height: 100vh;
}
.w-1\/12{
  width: 8.333333%;
}
.w-1\/3{
  width: 33.333333%;
}
.w-1\/5{
  width: 20%;
}
.w-1\/6{
  width: 16.666667%;
}
.w-10{
  width: 2.5rem;
}
.w-11\/12{
  width: 91.666667%;
}
.w-12{
  width: 3rem;
}
.w-16{
  width: 4rem;
}
.w-2{
  width: 0.5rem;
}
.w-2\/5{
  width: 40%;
}
.w-20{
  width: 5rem;
}
.w-24{
  width: 6rem;
}
.w-28{
  width: 7rem;
}
.w-3{
  width: 0.75rem;
}
.w-36{
  width: 9rem;
}
.w-4{
  width: 1rem;
}
.w-5{
  width: 1.25rem;
}
.w-6{
  width: 1.5rem;
}
.w-64{
  width: 16rem;
}
.w-7{
  width: 1.75rem;
}
.w-8{
  width: 2rem;
}
.w-96{
  width: 24rem;
}
.w-auto{
  width: auto;
}
.w-full{
  width: 100%;
}
.min-w-0{
  min-width: 0px;
}
.min-w-\[280px\]{
  min-width: 280px;
}
.min-w-full{
  min-width: 100%;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-3xl{
  max-width: 48rem;
}
.max-w-4xl{
  max-width: 56rem;
}
.max-w-5xl{
  max-width: 64rem;
}
.max-w-7xl{
  max-width: 80rem;
}
.max-w-\[384px\]{
  max-width: 384px;
}
.max-w-full{
  max-width: 100%;
}
.max-w-lg{
  max-width: 32rem;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-screen-xl{
  max-width: 1280px;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xl{
  max-width: 36rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-shrink{
  flex-shrink: 1;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink{
  flex-shrink: 1;
}
.shrink-0{
  flex-shrink: 0;
}
.flex-grow{
  flex-grow: 1;
}
.table-fixed{
  table-layout: fixed;
}
.border-collapse{
  border-collapse: collapse;
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1\/2{
  --tw-translate-x: 50%;
  transform: translate(50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), 0px) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1{
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), 0.25rem) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(180deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(90deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(.95) scaleY(.95);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-help{
  cursor: help;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.cursor-wait{
  cursor: wait;
}
.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-y{
  resize: vertical;
}
.resize{
  resize: both;
}
.list-inside{
  list-style-position: inside;
}
.list-decimal{
  list-style-type: decimal;
}
.list-disc{
  list-style-type: disc;
}
.list-none{
  list-style-type: none;
}
.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.items-stretch{
  align-items: stretch;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.gap-y-2{
  row-gap: 0.5rem;
}
.gap-y-6{
  row-gap: 1.5rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * 0);
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * (1 - 0));
  margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));
  margin-left: calc(0.5rem * calc(1 - 0));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * 0);
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * (1 - 0));
  margin-left: calc(0.75rem * (1 - var(--tw-space-x-reverse)));
  margin-left: calc(0.75rem * calc(1 - 0));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * 0);
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * (1 - 0));
  margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
  margin-left: calc(1rem * calc(1 - 0));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * 0);
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * (1 - 0));
  margin-left: calc(2rem * (1 - var(--tw-space-x-reverse)));
  margin-left: calc(2rem * calc(1 - 0));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * (1 - 0));
  margin-top: calc(0.25rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(0.25rem * calc(1 - 0));
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * 0);
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * (1 - 0));
  margin-top: calc(2.5rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(2.5rem * calc(1 - 0));
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * 0);
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * (1 - 0));
  margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(0.5rem * calc(1 - 0));
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * 0);
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * (1 - 0));
  margin-top: calc(0.75rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(0.75rem * calc(1 - 0));
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * 0);
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * (1 - 0));
  margin-top: calc(1rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(1rem * calc(1 - 0));
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * 0);
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * (1 - 0));
  margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(1.25rem * calc(1 - 0));
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * 0);
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * (1 - 0));
  margin-top: calc(1.5rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(1.5rem * calc(1 - 0));
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * 0);
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * (1 - 0));
  margin-top: calc(2rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(2rem * calc(1 - 0));
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * 0);
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * (1 - 0));
  border-top-width: calc(1px * (1 - var(--tw-divide-y-reverse)));
  border-top-width: calc(1px * calc(1 - 0));
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * 0);
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgba(243, 244, 246, 1);
  border-color: rgba(243, 244, 246, var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgba(229, 231, 235, 1);
  border-color: rgba(229, 231, 235, var(--tw-divide-opacity, 1));
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.overflow-x-hidden{
  overflow-x: hidden;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-normal{
  white-space: normal;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-line{
  white-space: pre-line;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.break-words{
  word-wrap: break-word;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-3xl{
  border-radius: 1.5rem;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-none{
  border-radius: 0px;
}
.rounded-sm{
  border-radius: 0.125rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-b{
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-2{
  border-width: 2px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-l{
  border-left-width: 1px;
}
.border-t{
  border-top-width: 1px;
}
.border-dashed{
  border-style: dashed;
}
.border-blue-200{
  --tw-border-opacity: 1;
  border-color: rgba(191, 219, 254, 1);
  border-color: rgba(191, 219, 254, var(--tw-border-opacity, 1));
}
.border-blue-600{
  --tw-border-opacity: 1;
  border-color: rgba(37, 99, 235, 1);
  border-color: rgba(37, 99, 235, var(--tw-border-opacity, 1));
}
.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgba(243, 244, 246, 1);
  border-color: rgba(243, 244, 246, var(--tw-border-opacity, 1));
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, 1);
  border-color: rgba(229, 231, 235, var(--tw-border-opacity, 1));
}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgba(209, 213, 219, 1);
  border-color: rgba(209, 213, 219, var(--tw-border-opacity, 1));
}
.border-gray-400{
  --tw-border-opacity: 1;
  border-color: rgba(156, 163, 175, 1);
  border-color: rgba(156, 163, 175, var(--tw-border-opacity, 1));
}
.border-gray-700{
  --tw-border-opacity: 1;
  border-color: rgba(55, 65, 81, 1);
  border-color: rgba(55, 65, 81, var(--tw-border-opacity, 1));
}
.border-gray-900{
  --tw-border-opacity: 1;
  border-color: rgba(17, 24, 39, 1);
  border-color: rgba(17, 24, 39, var(--tw-border-opacity, 1));
}
.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgba(187, 247, 208, 1);
  border-color: rgba(187, 247, 208, var(--tw-border-opacity, 1));
}
.border-orange-200{
  --tw-border-opacity: 1;
  border-color: rgba(254, 215, 170, 1);
  border-color: rgba(254, 215, 170, var(--tw-border-opacity, 1));
}
.border-primary-500{
  --tw-border-opacity: 1;
  border-color: rgba(239, 68, 68, 1);
  border-color: rgba(239, 68, 68, var(--tw-border-opacity, 1));
}
.border-purple-200{
  --tw-border-opacity: 1;
  border-color: rgba(233, 213, 255, 1);
  border-color: rgba(233, 213, 255, var(--tw-border-opacity, 1));
}
.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgba(254, 202, 202, 1);
  border-color: rgba(254, 202, 202, var(--tw-border-opacity, 1));
}
.border-red-300{
  --tw-border-opacity: 1;
  border-color: rgba(252, 165, 165, 1);
  border-color: rgba(252, 165, 165, var(--tw-border-opacity, 1));
}
.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgba(239, 68, 68, 1);
  border-color: rgba(239, 68, 68, var(--tw-border-opacity, 1));
}
.border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgba(226, 232, 240, 1);
  border-color: rgba(226, 232, 240, var(--tw-border-opacity, 1));
}
.border-slate-300{
  --tw-border-opacity: 1;
  border-color: rgba(203, 213, 225, 1);
  border-color: rgba(203, 213, 225, var(--tw-border-opacity, 1));
}
.border-transparent{
  border-color: transparent;
}
.border-yellow-200{
  --tw-border-opacity: 1;
  border-color: rgba(254, 240, 138, 1);
  border-color: rgba(254, 240, 138, var(--tw-border-opacity, 1));
}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, 1);
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1));
}
.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgba(219, 234, 254, 1);
  background-color: rgba(219, 234, 254, var(--tw-bg-opacity, 1));
}
.bg-blue-400{
  --tw-bg-opacity: 1;
  background-color: rgba(96, 165, 250, 1);
  background-color: rgba(96, 165, 250, var(--tw-bg-opacity, 1));
}
.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgba(239, 246, 255, 1);
  background-color: rgba(239, 246, 255, var(--tw-bg-opacity, 1));
}
.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgba(59, 130, 246, 1);
  background-color: rgba(59, 130, 246, var(--tw-bg-opacity, 1));
}
.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgba(37, 99, 235, 1);
  background-color: rgba(37, 99, 235, var(--tw-bg-opacity, 1));
}
.bg-cyan-100{
  --tw-bg-opacity: 1;
  background-color: rgba(207, 250, 254, 1);
  background-color: rgba(207, 250, 254, var(--tw-bg-opacity, 1));
}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, 1);
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1));
}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgba(229, 231, 235, 1);
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity, 1));
}
.bg-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgba(209, 213, 219, 1);
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity, 1));
}
.bg-gray-400{
  --tw-bg-opacity: 1;
  background-color: rgba(156, 163, 175, 1);
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, 1);
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity, 1));
}
.bg-gray-500{
  --tw-bg-opacity: 1;
  background-color: rgba(107, 114, 128, 1);
  background-color: rgba(107, 114, 128, var(--tw-bg-opacity, 1));
}
.bg-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgba(75, 85, 99, 1);
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity, 1));
}
.bg-gray-700{
  --tw-bg-opacity: 1;
  background-color: rgba(55, 65, 81, 1);
  background-color: rgba(55, 65, 81, var(--tw-bg-opacity, 1));
}
.bg-gray-800{
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, 1);
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
}
.bg-gray-900{
  --tw-bg-opacity: 1;
  background-color: rgba(17, 24, 39, 1);
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity, 1));
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 252, 231, 1);
  background-color: rgba(220, 252, 231, var(--tw-bg-opacity, 1));
}
.bg-green-400{
  --tw-bg-opacity: 1;
  background-color: rgba(74, 222, 128, 1);
  background-color: rgba(74, 222, 128, var(--tw-bg-opacity, 1));
}
.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgba(240, 253, 244, 1);
  background-color: rgba(240, 253, 244, var(--tw-bg-opacity, 1));
}
.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgba(34, 197, 94, 1);
  background-color: rgba(34, 197, 94, var(--tw-bg-opacity, 1));
}
.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgba(22, 163, 74, 1);
  background-color: rgba(22, 163, 74, var(--tw-bg-opacity, 1));
}
.bg-indigo-100{
  --tw-bg-opacity: 1;
  background-color: rgba(224, 231, 255, 1);
  background-color: rgba(224, 231, 255, var(--tw-bg-opacity, 1));
}
.bg-indigo-400{
  --tw-bg-opacity: 1;
  background-color: rgba(129, 140, 248, 1);
  background-color: rgba(129, 140, 248, var(--tw-bg-opacity, 1));
}
.bg-indigo-600{
  --tw-bg-opacity: 1;
  background-color: rgba(79, 70, 229, 1);
  background-color: rgba(79, 70, 229, var(--tw-bg-opacity, 1));
}
.bg-indigo-800{
  --tw-bg-opacity: 1;
  background-color: rgba(55, 48, 163, 1);
  background-color: rgba(55, 48, 163, var(--tw-bg-opacity, 1));
}
.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgba(255, 237, 213, 1);
  background-color: rgba(255, 237, 213, var(--tw-bg-opacity, 1));
}
.bg-orange-50{
  --tw-bg-opacity: 1;
  background-color: rgba(255, 247, 237, 1);
  background-color: rgba(255, 247, 237, var(--tw-bg-opacity, 1));
}
.bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgba(249, 115, 22, 1);
  background-color: rgba(249, 115, 22, var(--tw-bg-opacity, 1));
}
.bg-orange-600{
  --tw-bg-opacity: 1;
  background-color: rgba(234, 88, 12, 1);
  background-color: rgba(234, 88, 12, var(--tw-bg-opacity, 1));
}
.bg-primary-500{
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, 1);
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity, 1));
}
.bg-primary-600{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, 1);
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity, 1));
}
.bg-purple-100{
  --tw-bg-opacity: 1;
  background-color: rgba(243, 232, 255, 1);
  background-color: rgba(243, 232, 255, var(--tw-bg-opacity, 1));
}
.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgba(250, 245, 255, 1);
  background-color: rgba(250, 245, 255, var(--tw-bg-opacity, 1));
}
.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgba(168, 85, 247, 1);
  background-color: rgba(168, 85, 247, var(--tw-bg-opacity, 1));
}
.bg-purple-600{
  --tw-bg-opacity: 1;
  background-color: rgba(147, 51, 234, 1);
  background-color: rgba(147, 51, 234, var(--tw-bg-opacity, 1));
}
.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 226, 226, 1);
  background-color: rgba(254, 226, 226, var(--tw-bg-opacity, 1));
}
.bg-red-400{
  --tw-bg-opacity: 1;
  background-color: rgba(248, 113, 113, 1);
  background-color: rgba(248, 113, 113, var(--tw-bg-opacity, 1));
}
.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 242, 242, 1);
  background-color: rgba(254, 242, 242, var(--tw-bg-opacity, 1));
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, 1);
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity, 1));
}
.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, 1);
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity, 1));
}
.bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgba(241, 245, 249, 1);
  background-color: rgba(241, 245, 249, var(--tw-bg-opacity, 1));
}
.bg-slate-200{
  --tw-bg-opacity: 1;
  background-color: rgba(226, 232, 240, 1);
  background-color: rgba(226, 232, 240, var(--tw-bg-opacity, 1));
}
.bg-slate-900{
  --tw-bg-opacity: 1;
  background-color: rgba(15, 23, 42, 1);
  background-color: rgba(15, 23, 42, var(--tw-bg-opacity, 1));
}
.bg-teal-100{
  --tw-bg-opacity: 1;
  background-color: rgba(204, 251, 241, 1);
  background-color: rgba(204, 251, 241, var(--tw-bg-opacity, 1));
}
.bg-transparent{
  background-color: transparent;
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
}
.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 249, 195, 1);
  background-color: rgba(254, 249, 195, var(--tw-bg-opacity, 1));
}
.bg-yellow-400{
  --tw-bg-opacity: 1;
  background-color: rgba(250, 204, 21, 1);
  background-color: rgba(250, 204, 21, var(--tw-bg-opacity, 1));
}
.bg-yellow-50{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 252, 232, 1);
  background-color: rgba(254, 252, 232, var(--tw-bg-opacity, 1));
}
.bg-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgba(234, 179, 8, 1);
  background-color: rgba(234, 179, 8, var(--tw-bg-opacity, 1));
}
.bg-opacity-30{
  --tw-bg-opacity: 0.3;
}
.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}
.bg-opacity-75{
  --tw-bg-opacity: 0.75;
}
.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-slate-900{
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(15, 23, 42, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-slate-800{
  --tw-gradient-to: rgba(30, 41, 59, 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1e293b var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-slate-900{
  --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}
.bg-cover{
  background-size: cover;
}
.bg-no-repeat{
  background-repeat: no-repeat;
}
.fill-current{
  fill: currentColor;
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.p-12{
  padding: 3rem;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-20{
  padding-bottom: 5rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-6{
  padding-bottom: 1.5rem;
}
.pb-8{
  padding-bottom: 2rem;
}
.pl-0{
  padding-left: 0px;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-5{
  padding-left: 1.25rem;
}
.pl-6{
  padding-left: 1.5rem;
}
.pl-7{
  padding-left: 1.75rem;
}
.pr-10{
  padding-right: 2.5rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-4{
  padding-right: 1rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-5{
  padding-top: 1.25rem;
}
.pt-6{
  padding-top: 1.5rem;
}
.pt-8{
  padding-top: 2rem;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.align-top{
  vertical-align: top;
}
.align-middle{
  vertical-align: middle;
}
.align-bottom{
  vertical-align: bottom;
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans{
  font-family: Public Sans, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl{
  font-size: 3rem;
  line-height: 1;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black{
  font-weight: 900;
}
.font-bold{
  font-weight: 700;
}
.font-light{
  font-weight: 300;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.capitalize{
  text-transform: capitalize;
}
.italic{
  font-style: italic;
}
.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) tabular-nums var(--tw-numeric-fraction);
  font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) tabular-nums var(--tw-numeric-fraction);
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-5{
  line-height: 1.25rem;
}
.leading-6{
  line-height: 1.5rem;
}
.leading-loose{
  line-height: 2;
}
.leading-none{
  line-height: 1;
}
.leading-normal{
  line-height: 1.5;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-snug{
  line-height: 1.375;
}
.tracking-\[0\.18em\]{
  letter-spacing: 0.18em;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.tracking-widest{
  letter-spacing: 0.1em;
}
.text-black{
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, 1);
  color: rgba(0, 0, 0, var(--tw-text-opacity, 1));
}
.text-blue-500{
  --tw-text-opacity: 1;
  color: rgba(59, 130, 246, 1);
  color: rgba(59, 130, 246, var(--tw-text-opacity, 1));
}
.text-blue-600{
  --tw-text-opacity: 1;
  color: rgba(37, 99, 235, 1);
  color: rgba(37, 99, 235, var(--tw-text-opacity, 1));
}
.text-blue-700{
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, 1);
  color: rgba(29, 78, 216, var(--tw-text-opacity, 1));
}
.text-blue-800{
  --tw-text-opacity: 1;
  color: rgba(30, 64, 175, 1);
  color: rgba(30, 64, 175, var(--tw-text-opacity, 1));
}
.text-blume-orange{
  --tw-text-opacity: 1;
  color: rgba(241, 98, 34, 1);
  color: rgba(241, 98, 34, var(--tw-text-opacity, 1));
}
.text-cyan-800{
  --tw-text-opacity: 1;
  color: rgba(21, 94, 117, 1);
  color: rgba(21, 94, 117, var(--tw-text-opacity, 1));
}
.text-gray-100{
  --tw-text-opacity: 1;
  color: rgba(243, 244, 246, 1);
  color: rgba(243, 244, 246, var(--tw-text-opacity, 1));
}
.text-gray-400{
  --tw-text-opacity: 1;
  color: rgba(156, 163, 175, 1);
  color: rgba(156, 163, 175, var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, 1);
  color: rgba(107, 114, 128, var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, 1);
  color: rgba(75, 85, 99, var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, 1);
  color: rgba(55, 65, 81, var(--tw-text-opacity, 1));
}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgba(31, 41, 55, 1);
  color: rgba(31, 41, 55, var(--tw-text-opacity, 1));
}
.text-gray-900{
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, 1);
  color: rgba(17, 24, 39, var(--tw-text-opacity, 1));
}
.text-green-300{
  --tw-text-opacity: 1;
  color: rgba(134, 239, 172, 1);
  color: rgba(134, 239, 172, var(--tw-text-opacity, 1));
}
.text-green-400{
  --tw-text-opacity: 1;
  color: rgba(74, 222, 128, 1);
  color: rgba(74, 222, 128, var(--tw-text-opacity, 1));
}
.text-green-500{
  --tw-text-opacity: 1;
  color: rgba(34, 197, 94, 1);
  color: rgba(34, 197, 94, var(--tw-text-opacity, 1));
}
.text-green-600{
  --tw-text-opacity: 1;
  color: rgba(22, 163, 74, 1);
  color: rgba(22, 163, 74, var(--tw-text-opacity, 1));
}
.text-green-700{
  --tw-text-opacity: 1;
  color: rgba(21, 128, 61, 1);
  color: rgba(21, 128, 61, var(--tw-text-opacity, 1));
}
.text-green-800{
  --tw-text-opacity: 1;
  color: rgba(22, 101, 52, 1);
  color: rgba(22, 101, 52, var(--tw-text-opacity, 1));
}
.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgba(79, 70, 229, 1);
  color: rgba(79, 70, 229, var(--tw-text-opacity, 1));
}
.text-indigo-800{
  --tw-text-opacity: 1;
  color: rgba(55, 48, 163, 1);
  color: rgba(55, 48, 163, var(--tw-text-opacity, 1));
}
.text-neutral-500{
  --tw-text-opacity: 1;
  color: rgba(115, 115, 115, 1);
  color: rgba(115, 115, 115, var(--tw-text-opacity, 1));
}
.text-orange-500{
  --tw-text-opacity: 1;
  color: rgba(249, 115, 22, 1);
  color: rgba(249, 115, 22, var(--tw-text-opacity, 1));
}
.text-orange-800{
  --tw-text-opacity: 1;
  color: rgba(154, 52, 18, 1);
  color: rgba(154, 52, 18, var(--tw-text-opacity, 1));
}
.text-orange-900{
  --tw-text-opacity: 1;
  color: rgba(124, 45, 18, 1);
  color: rgba(124, 45, 18, var(--tw-text-opacity, 1));
}
.text-primary-500{
  --tw-text-opacity: 1;
  color: rgba(239, 68, 68, 1);
  color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}
.text-primary-600{
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, 1);
  color: rgba(220, 38, 38, var(--tw-text-opacity, 1));
}
.text-purple-700{
  --tw-text-opacity: 1;
  color: rgba(126, 34, 206, 1);
  color: rgba(126, 34, 206, var(--tw-text-opacity, 1));
}
.text-purple-800{
  --tw-text-opacity: 1;
  color: rgba(107, 33, 168, 1);
  color: rgba(107, 33, 168, var(--tw-text-opacity, 1));
}
.text-purple-900{
  --tw-text-opacity: 1;
  color: rgba(88, 28, 135, 1);
  color: rgba(88, 28, 135, var(--tw-text-opacity, 1));
}
.text-red-400{
  --tw-text-opacity: 1;
  color: rgba(248, 113, 113, 1);
  color: rgba(248, 113, 113, var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgba(239, 68, 68, 1);
  color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, 1);
  color: rgba(220, 38, 38, var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgba(185, 28, 28, 1);
  color: rgba(185, 28, 28, var(--tw-text-opacity, 1));
}
.text-red-800{
  --tw-text-opacity: 1;
  color: rgba(153, 27, 27, 1);
  color: rgba(153, 27, 27, var(--tw-text-opacity, 1));
}
.text-slate-200{
  --tw-text-opacity: 1;
  color: rgba(226, 232, 240, 1);
  color: rgba(226, 232, 240, var(--tw-text-opacity, 1));
}
.text-slate-400{
  --tw-text-opacity: 1;
  color: rgba(148, 163, 184, 1);
  color: rgba(148, 163, 184, var(--tw-text-opacity, 1));
}
.text-slate-500{
  --tw-text-opacity: 1;
  color: rgba(100, 116, 139, 1);
  color: rgba(100, 116, 139, var(--tw-text-opacity, 1));
}
.text-slate-600{
  --tw-text-opacity: 1;
  color: rgba(71, 85, 105, 1);
  color: rgba(71, 85, 105, var(--tw-text-opacity, 1));
}
.text-slate-700{
  --tw-text-opacity: 1;
  color: rgba(51, 65, 85, 1);
  color: rgba(51, 65, 85, var(--tw-text-opacity, 1));
}
.text-teal-800{
  --tw-text-opacity: 1;
  color: rgba(17, 94, 89, 1);
  color: rgba(17, 94, 89, var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgba(250, 204, 21, 1);
  color: rgba(250, 204, 21, var(--tw-text-opacity, 1));
}
.text-yellow-500{
  --tw-text-opacity: 1;
  color: rgba(234, 179, 8, 1);
  color: rgba(234, 179, 8, var(--tw-text-opacity, 1));
}
.text-yellow-600{
  --tw-text-opacity: 1;
  color: rgba(202, 138, 4, 1);
  color: rgba(202, 138, 4, var(--tw-text-opacity, 1));
}
.text-yellow-700{
  --tw-text-opacity: 1;
  color: rgba(161, 98, 7, 1);
  color: rgba(161, 98, 7, var(--tw-text-opacity, 1));
}
.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgba(133, 77, 14, 1);
  color: rgba(133, 77, 14, var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.no-underline{
  text-decoration-line: none;
}
.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0{
  opacity: 0;
}
.opacity-100{
  opacity: 1;
}
.opacity-25{
  opacity: 0.25;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-75{
  opacity: 0.75;
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.outline{
  outline-style: solid;
}
.blur{
  --tw-blur: blur(8px);
  filter: blur(8px) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-sm{
  --tw-blur: blur(4px);
  filter: blur(4px) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) invert(100%) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-100{
  transition-duration: 100ms;
}
.duration-150{
  transition-duration: 150ms;
}
.duration-200{
  transition-duration: 200ms;
}
.duration-300{
  transition-duration: 300ms;
}
.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear{
  transition-timing-function: linear;
}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Override legacy orange hover styles - use muted gray instead */
.group:hover .group-hover\:text-orange-600 {
  color: #374151 !important; /* gray-700 */
}
.hover\:text-orange-600:hover,
.hover\:text-orange-700:hover {
  color: #374151 !important; /* gray-700 */
}
.text-orange-600,
.text-orange-700 {
  color: #374151 !important; /* gray-700 */
}
.hover\:bg-orange-50:hover {
  background-color: #f3f4f6 !important; /* gray-100 */
  color: #374151 !important; /* gray-700 */
}
/* Reusable styling for settings action buttons - prevent orange text on hover */
.settings-action-btn,
a.settings-action-btn,
.connect-xero-btn,
a.connect-xero-btn,
a[href*="xero_connect"],
a[href*="google_calendar_connect"] {
  color: rgb(17, 24, 39) !important; /* gray-900 */
}
.settings-action-btn:hover,
a.settings-action-btn:hover,
.connect-xero-btn:hover,
a.connect-xero-btn:hover,
a[href*="xero_connect"]:hover,
a[href*="google_calendar_connect"]:hover {
  color: rgb(17, 24, 39) !important; /* gray-900 - keep gray on hover */
}
.settings-action-btn:hover *,
a.settings-action-btn:hover *,
.connect-xero-btn:hover *,
a.connect-xero-btn:hover *,
a[href*="xero_connect"]:hover *,
a[href*="google_calendar_connect"]:hover * {
  color: rgb(17, 24, 39) !important; /* gray-900 - keep child elements gray too */
}
/* Override ALL orange hover text globally - catch any remaining instances */
/* Use maximum specificity to override inline styles */
a.nav-link:hover,
a.nav-link:hover *,
.nav-link:hover,
.nav-link:hover *,
header a.nav-link:hover,
header a.nav-link:hover *,
.nav-container a.nav-link:hover,
.nav-container a.nav-link:hover *,
.top-nav a.nav-link:hover,
.top-nav a.nav-link:hover *,
.nav-container nav a.nav-link:hover,
.nav-container nav a.nav-link:hover *,
.top-nav nav a.nav-link:hover,
.top-nav nav a.nav-link:hover *,
nav a.nav-link:hover,
nav a.nav-link:hover *,
a:hover.nav-link,
a:hover.nav-link * {
  color: #374151 !important; /* gray-700 - override any orange hover including inline styles */
}
/* Override any inline styles with orange color on hover - target style attribute */
a[style*='f16222']:hover,
a[style*='f16222']:hover *,
.nav-link[style*='f16222']:hover,
.nav-link[style*='f16222']:hover *,
a.nav-link[style*='f16222']:hover,
a.nav-link[style*='f16222']:hover * {
  color: #374151 !important; /* gray-700 */
}
/* Additional high-specificity selectors for navigation */
.nav-container nav .nav-link:hover,
.top-nav .nav-link:hover,
.nav-container a:hover,
.top-nav a:hover {
  color: #374151 !important; /* gray-700 */
}
/* Final override - ensure ALL nav links use gray on hover, overriding any remaining styles */
.nav-link:not(.active):hover,
a.nav-link:not(.active):hover,
header a.nav-link:not(.active):hover,
.nav-container a.nav-link:not(.active):hover,
.top-nav a.nav-link:not(.active):hover,
.nav-container nav a.nav-link:not(.active):hover,
.top-nav nav a.nav-link:not(.active):hover,
nav a.nav-link:not(.active):hover {
  color: #374151 !important; /* gray-700 - final override */
}
.btn-peach {
  background-color: #eee2ce;
  color: #ff7a45;
  border-radius: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn-peach:hover,
.btn-peach:focus {
  background-color: #f2cfa9;
  color: #ff5c1a;
  box-shadow: 0 6px 16px rgba(255, 122, 69, 0.18);
}
.dark .dark\:prose-invert{
  --tw-prose-body: var(--tw-prose-invert-body);
  --tw-prose-headings: var(--tw-prose-invert-headings);
  --tw-prose-lead: var(--tw-prose-invert-lead);
  --tw-prose-links: var(--tw-prose-invert-links);
  --tw-prose-bold: var(--tw-prose-invert-bold);
  --tw-prose-counters: var(--tw-prose-invert-counters);
  --tw-prose-bullets: var(--tw-prose-invert-bullets);
  --tw-prose-hr: var(--tw-prose-invert-hr);
  --tw-prose-quotes: var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
  --tw-prose-captions: var(--tw-prose-invert-captions);
  --tw-prose-kbd: var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code: var(--tw-prose-invert-code);
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}
.file\:mr-3::file-selector-button{
  margin-right: 0.75rem;
}
.file\:mr-4::file-selector-button{
  margin-right: 1rem;
}
.file\:rounded-full::file-selector-button{
  border-radius: 9999px;
}
.file\:border-0::file-selector-button{
  border-width: 0px;
}
.file\:bg-gray-50::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, 1);
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity, 1));
}
.file\:bg-gray-900::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgba(17, 24, 39, 1);
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity, 1));
}
.file\:px-4::file-selector-button{
  padding-left: 1rem;
  padding-right: 1rem;
}
.file\:py-2::file-selector-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-semibold::file-selector-button{
  font-weight: 600;
}
.file\:text-gray-700::file-selector-button{
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, 1);
  color: rgba(55, 65, 81, var(--tw-text-opacity, 1));
}
.file\:text-white::file-selector-button{
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.backdrop\:bg-black\/50::backdrop{
  background-color: rgba(0, 0, 0, 0.5);
}
.backdrop\:backdrop-blur-sm::backdrop{
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: blur(4px) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.only\:block:only-child{
  display: block;
}
.hover\:cursor-pointer:hover{
  cursor: pointer;
}
.hover\:border-gray-300:hover{
  --tw-border-opacity: 1;
  border-color: rgba(209, 213, 219, 1);
  border-color: rgba(209, 213, 219, var(--tw-border-opacity, 1));
}
.hover\:border-gray-500:hover{
  --tw-border-opacity: 1;
  border-color: rgba(107, 114, 128, 1);
  border-color: rgba(107, 114, 128, var(--tw-border-opacity, 1));
}
.hover\:border-neutral-300:hover{
  --tw-border-opacity: 1;
  border-color: rgba(212, 212, 212, 1);
  border-color: rgba(212, 212, 212, var(--tw-border-opacity, 1));
}
.hover\:bg-black:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, 1);
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(37, 99, 235, 1);
  background-color: rgba(37, 99, 235, var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(29, 78, 216, 1);
  background-color: rgba(29, 78, 216, var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, 1);
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(229, 231, 235, 1);
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(209, 213, 219, 1);
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(156, 163, 175, 1);
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, 1);
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, 1);
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
}
.hover\:bg-green-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(22, 163, 74, 1);
  background-color: rgba(22, 163, 74, var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(21, 128, 61, 1);
  background-color: rgba(21, 128, 61, var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(67, 56, 202, 1);
  background-color: rgba(67, 56, 202, var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(234, 88, 12, 1);
  background-color: rgba(234, 88, 12, var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(194, 65, 12, 1);
  background-color: rgba(194, 65, 12, var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(147, 51, 234, 1);
  background-color: rgba(147, 51, 234, var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(126, 34, 206, 1);
  background-color: rgba(126, 34, 206, var(--tw-bg-opacity, 1));
}
.hover\:bg-red-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 202, 202, 1);
  background-color: rgba(254, 202, 202, var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, 1);
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(185, 28, 28, 1);
  background-color: rgba(185, 28, 28, var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(241, 245, 249, 1);
  background-color: rgba(241, 245, 249, var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(202, 138, 4, 1);
  background-color: rgba(202, 138, 4, var(--tw-bg-opacity, 1));
}
.hover\:text-black:hover{
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, 1);
  color: rgba(0, 0, 0, var(--tw-text-opacity, 1));
}
.hover\:text-blue-700:hover{
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, 1);
  color: rgba(29, 78, 216, var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover{
  --tw-text-opacity: 1;
  color: rgba(30, 64, 175, 1);
  color: rgba(30, 64, 175, var(--tw-text-opacity, 1));
}
.hover\:text-gray-500:hover{
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, 1);
  color: rgba(107, 114, 128, var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover{
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, 1);
  color: rgba(75, 85, 99, var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover{
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, 1);
  color: rgba(55, 65, 81, var(--tw-text-opacity, 1));
}
.hover\:text-gray-800:hover{
  --tw-text-opacity: 1;
  color: rgba(31, 41, 55, 1);
  color: rgba(31, 41, 55, var(--tw-text-opacity, 1));
}
.hover\:text-gray-900:hover{
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, 1);
  color: rgba(17, 24, 39, var(--tw-text-opacity, 1));
}
.hover\:text-indigo-500:hover{
  --tw-text-opacity: 1;
  color: rgba(99, 102, 241, 1);
  color: rgba(99, 102, 241, var(--tw-text-opacity, 1));
}
.hover\:text-indigo-900:hover{
  --tw-text-opacity: 1;
  color: rgba(49, 46, 129, 1);
  color: rgba(49, 46, 129, var(--tw-text-opacity, 1));
}
.hover\:text-neutral-700:hover{
  --tw-text-opacity: 1;
  color: rgba(64, 64, 64, 1);
  color: rgba(64, 64, 64, var(--tw-text-opacity, 1));
}
.hover\:text-red-700:hover{
  --tw-text-opacity: 1;
  color: rgba(185, 28, 28, 1);
  color: rgba(185, 28, 28, var(--tw-text-opacity, 1));
}
.hover\:text-red-800:hover{
  --tw-text-opacity: 1;
  color: rgba(153, 27, 27, 1);
  color: rgba(153, 27, 27, var(--tw-text-opacity, 1));
}
.hover\:text-red-900:hover{
  --tw-text-opacity: 1;
  color: rgba(127, 29, 29, 1);
  color: rgba(127, 29, 29, var(--tw-text-opacity, 1));
}
.hover\:text-slate-700:hover{
  --tw-text-opacity: 1;
  color: rgba(51, 65, 85, 1);
  color: rgba(51, 65, 85, var(--tw-text-opacity, 1));
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.hover\:text-yellow-900:hover{
  --tw-text-opacity: 1;
  color: rgba(113, 63, 18, 1);
  color: rgba(113, 63, 18, var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:opacity-100:hover{
  opacity: 1;
}
.hover\:opacity-70:hover{
  opacity: 0.7;
}
.hover\:file\:bg-black::file-selector-button:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, 1);
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1));
}
.hover\:file\:bg-gray-100::file-selector-button:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, 1);
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1));
}
.focus\:border-blue-500:focus{
  --tw-border-opacity: 1;
  border-color: rgba(59, 130, 246, 1);
  border-color: rgba(59, 130, 246, var(--tw-border-opacity, 1));
}
.focus\:border-gray-600:focus{
  --tw-border-opacity: 1;
  border-color: rgba(75, 85, 99, 1);
  border-color: rgba(75, 85, 99, var(--tw-border-opacity, 1));
}
.focus\:border-green-500:focus{
  --tw-border-opacity: 1;
  border-color: rgba(34, 197, 94, 1);
  border-color: rgba(34, 197, 94, var(--tw-border-opacity, 1));
}
.focus\:border-indigo-500:focus{
  --tw-border-opacity: 1;
  border-color: rgba(99, 102, 241, 1);
  border-color: rgba(99, 102, 241, var(--tw-border-opacity, 1));
}
.focus\:border-orange-500:focus{
  --tw-border-opacity: 1;
  border-color: rgba(249, 115, 22, 1);
  border-color: rgba(249, 115, 22, var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: /*!*/ /*!*/ 0 0 0 0px #fff, /*!*/ /*!*/ 0 0 0 calc(2px + 2px) #2563eb, 0 0 rgba(0,0,0,0);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.focus\:ring-blue-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity, 1));
}
.focus\:ring-gray-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(156, 163, 175, var(--tw-ring-opacity, 1));
}
.focus\:ring-gray-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(107, 114, 128, var(--tw-ring-opacity, 1));
}
.focus\:ring-gray-600:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(75, 85, 99, var(--tw-ring-opacity, 1));
}
.focus\:ring-green-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(34, 197, 94, var(--tw-ring-opacity, 1));
}
.focus\:ring-indigo-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity, 1));
}
.focus\:ring-orange-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(249, 115, 22, var(--tw-ring-opacity, 1));
}
.focus\:ring-red-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(239, 68, 68, var(--tw-ring-opacity, 1));
}
.focus\:ring-yellow-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(234, 179, 8, var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}
.disabled\:pointer-events-none:disabled{
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.group:hover .group-hover\:inline-block{
  display: inline-block;
}
.group:hover .group-hover\:text-gray-900{
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, 1);
  color: rgba(17, 24, 39, var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
.peer:checked ~ .peer-checked\:hidden{
  display: none;
}
.peer:checked ~ .peer-checked\:blur-none{
  --tw-blur:  ;
  filter:   var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgba(55, 65, 81, 1);
  border-color: rgba(55, 65, 81, var(--tw-divide-opacity, 1));
}
.dark .dark\:rounded{
  border-radius: 0.25rem;
}
.dark .dark\:border{
  border-width: 1px;
}
.dark .dark\:border-blue-700{
  --tw-border-opacity: 1;
  border-color: rgba(29, 78, 216, 1);
  border-color: rgba(29, 78, 216, var(--tw-border-opacity, 1));
}
.dark .dark\:border-gray-400\/50{
  border-color: rgba(156, 163, 175, 0.5);
}
.dark .dark\:border-gray-600{
  --tw-border-opacity: 1;
  border-color: rgba(75, 85, 99, 1);
  border-color: rgba(75, 85, 99, var(--tw-border-opacity, 1));
}
.dark .dark\:border-gray-700{
  --tw-border-opacity: 1;
  border-color: rgba(55, 65, 81, 1);
  border-color: rgba(55, 65, 81, var(--tw-border-opacity, 1));
}
.dark .dark\:border-gray-800{
  --tw-border-opacity: 1;
  border-color: rgba(31, 41, 55, 1);
  border-color: rgba(31, 41, 55, var(--tw-border-opacity, 1));
}
.dark .dark\:border-orange-700{
  --tw-border-opacity: 1;
  border-color: rgba(194, 65, 12, 1);
  border-color: rgba(194, 65, 12, var(--tw-border-opacity, 1));
}
.dark .dark\:bg-blue-900\/30{
  background-color: rgba(30, 58, 138, 0.3);
}
.dark .dark\:bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgba(229, 231, 235, 1);
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgba(75, 85, 99, 1);
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-gray-700{
  --tw-bg-opacity: 1;
  background-color: rgba(55, 65, 81, 1);
  background-color: rgba(55, 65, 81, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-gray-800{
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, 1);
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-gray-900{
  --tw-bg-opacity: 1;
  background-color: rgba(17, 24, 39, 1);
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-gray-900\/75{
  background-color: rgba(17, 24, 39, 0.75);
}
.dark .dark\:bg-orange-900\/30{
  background-color: rgba(124, 45, 18, 0.3);
}
.dark .dark\:bg-primary-800{
  --tw-bg-opacity: 1;
  background-color: rgba(153, 27, 27, 1);
  background-color: rgba(153, 27, 27, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-primary-900{
  --tw-bg-opacity: 1;
  background-color: rgba(127, 29, 29, 1);
  background-color: rgba(127, 29, 29, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, 1);
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity, 1));
}
.dark .dark\:text-gray-100{
  --tw-text-opacity: 1;
  color: rgba(243, 244, 246, 1);
  color: rgba(243, 244, 246, var(--tw-text-opacity, 1));
}
.dark .dark\:text-gray-200{
  --tw-text-opacity: 1;
  color: rgba(229, 231, 235, 1);
  color: rgba(229, 231, 235, var(--tw-text-opacity, 1));
}
.dark .dark\:text-gray-200\/75{
  color: rgba(229, 231, 235, 0.75);
}
.dark .dark\:text-gray-300{
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, 1);
  color: rgba(209, 213, 219, var(--tw-text-opacity, 1));
}
.dark .dark\:text-gray-300\/75{
  color: rgba(209, 213, 219, 0.75);
}
.dark .dark\:text-gray-400{
  --tw-text-opacity: 1;
  color: rgba(156, 163, 175, 1);
  color: rgba(156, 163, 175, var(--tw-text-opacity, 1));
}
.dark .dark\:text-gray-50{
  --tw-text-opacity: 1;
  color: rgba(249, 250, 251, 1);
  color: rgba(249, 250, 251, var(--tw-text-opacity, 1));
}
.dark .dark\:text-gray-500{
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, 1);
  color: rgba(107, 114, 128, var(--tw-text-opacity, 1));
}
.dark .dark\:text-orange-200{
  --tw-text-opacity: 1;
  color: rgba(254, 215, 170, 1);
  color: rgba(254, 215, 170, var(--tw-text-opacity, 1));
}
.dark .dark\:text-white{
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.dark .dark\:hover\:bg-gray-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(75, 85, 99, 1);
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity, 1));
}
.dark .dark\:hover\:bg-gray-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(55, 65, 81, 1);
  background-color: rgba(55, 65, 81, var(--tw-bg-opacity, 1));
}
.dark .dark\:hover\:bg-gray-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, 1);
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
}
.dark .dark\:hover\:bg-gray-900:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(17, 24, 39, 1);
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity, 1));
}
.dark .dark\:hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(185, 28, 28, 1);
  background-color: rgba(185, 28, 28, var(--tw-bg-opacity, 1));
}
.dark .hover\:dark\:bg-gray-900\/75:hover{
  background-color: rgba(17, 24, 39, 0.75);
}
.dark .dark\:hover\:text-gray-200:hover{
  --tw-text-opacity: 1;
  color: rgba(229, 231, 235, 1);
  color: rgba(229, 231, 235, var(--tw-text-opacity, 1));
}
.dark .dark\:hover\:text-gray-300:hover{
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, 1);
  color: rgba(209, 213, 219, var(--tw-text-opacity, 1));
}
.dark .dark\:hover\:text-gray-400:hover{
  --tw-text-opacity: 1;
  color: rgba(156, 163, 175, 1);
  color: rgba(156, 163, 175, var(--tw-text-opacity, 1));
}
.dark .dark\:hover\:text-neutral-300:hover{
  --tw-text-opacity: 1;
  color: rgba(212, 212, 212, 1);
  color: rgba(212, 212, 212, var(--tw-text-opacity, 1));
}
.dark .dark\:focus\:ring-offset-gray-800:focus{
  --tw-ring-offset-color: #1f2937;
}
@media (min-width: 640px){
  .sm\:fixed{
    position: fixed;
  }
  .sm\:order-2{
    order: 2;
  }
  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .sm\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }
  .sm\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }
  .sm\:my-8{
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .sm\:mb-0{
    margin-bottom: 0px;
  }
  .sm\:ml-3{
    margin-left: 0.75rem;
  }
  .sm\:ml-4{
    margin-left: 1rem;
  }
  .sm\:mt-0{
    margin-top: 0px;
  }
  .sm\:mt-16{
    margin-top: 4rem;
  }
  .sm\:block{
    display: block;
  }
  .sm\:flex{
    display: flex;
  }
  .sm\:table-cell{
    display: table-cell;
  }
  .sm\:hidden{
    display: none;
  }
  .sm\:h-10{
    height: 2.5rem;
  }
  .sm\:h-screen{
    height: 100vh;
  }
  .sm\:w-10{
    width: 2.5rem;
  }
  .sm\:w-96{
    width: 24rem;
  }
  .sm\:w-\[300px\]{
    width: 300px;
  }
  .sm\:w-auto{
    width: auto;
  }
  .sm\:w-full{
    width: 100%;
  }
  .sm\:max-w-2xl{
    max-width: 42rem;
  }
  .sm\:max-w-4xl{
    max-width: 56rem;
  }
  .sm\:max-w-lg{
    max-width: 32rem;
  }
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:flex-row{
    flex-direction: row;
  }
  .sm\:flex-row-reverse{
    flex-direction: row-reverse;
  }
  .sm\:items-start{
    align-items: flex-start;
  }
  .sm\:items-center{
    align-items: center;
  }
  .sm\:justify-between{
    justify-content: space-between;
  }
  .sm\:overflow-scroll{
    overflow: scroll;
  }
  .sm\:rounded-lg{
    border-radius: 0.5rem;
  }
  .sm\:rounded-md{
    border-radius: 0.375rem;
  }
  .sm\:p-0{
    padding: 0px;
  }
  .sm\:p-6{
    padding: 1.5rem;
  }
  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:pb-4{
    padding-bottom: 1rem;
  }
  .sm\:pl-\[300px\]{
    padding-left: 300px;
  }
  .sm\:text-left{
    text-align: left;
  }
  .sm\:align-middle{
    vertical-align: middle;
  }
  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 768px){
  .md\:my-6{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .md\:inline{
    display: inline;
  }
  .md\:flex{
    display: flex;
  }
  .md\:hidden{
    display: none;
  }
  .md\:min-h-screen{
    min-height: 100vh;
  }
  .md\:w-1\/2{
    width: 50%;
  }
  .md\:w-1\/5{
    width: 20%;
  }
  .md\:w-3\/4{
    width: 75%;
  }
  .md\:w-4\/5{
    width: 80%;
  }
  .md\:max-w-\[300px\]{
    max-width: 300px;
  }
  .md\:max-w-lg{
    max-width: 32rem;
  }
  .md\:max-w-md{
    max-width: 28rem;
  }
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:bg-left{
    background-position: left;
  }
  .md\:px-20{
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .md\:pb-0{
    padding-bottom: 0px;
  }
  .md\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}
@media (min-width: 1024px){
  .lg\:absolute{
    position: absolute;
  }
  .lg\:right-0{
    right: 0px;
  }
  .lg\:my-24{
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .lg\:-mt-4{
    margin-top: -1rem;
  }
  .lg\:mt-2{
    margin-top: 0.5rem;
  }
  .lg\:flex{
    display: flex;
  }
  .lg\:w-1\/2{
    width: 50%;
  }
  .lg\:w-1\/6{
    width: 16.666667%;
  }
  .lg\:max-w-4xl{
    max-width: 56rem;
  }
  .lg\:flex-1{
    flex: 1 1 0%;
  }
  .lg\:flex-grow{
    flex-grow: 1;
  }
  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:rounded{
    border-radius: 0.25rem;
  }
  .lg\:bg-center{
    background-position: center;
  }
  .lg\:p-0{
    padding: 0px;
  }
  .lg\:p-10{
    padding: 2.5rem;
  }
  .lg\:p-2{
    padding: 0.5rem;
  }
  .lg\:p-4{
    padding: 1rem;
  }
  .lg\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .lg\:px-40{
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lg\:pr-4{
    padding-right: 1rem;
  }
  .lg\:text-right{
    text-align: right;
  }
  .lg\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .lg\:hover\:bg-primary-50:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(254, 242, 242, 1);
    background-color: rgba(254, 242, 242, var(--tw-bg-opacity, 1));
  }
}
@media (min-width: 1280px){
  .xl\:w-2\/3{
    width: 66.666667%;
  }
  .xl\:px-56{
    padding-left: 14rem;
    padding-right: 14rem;
  }
}