/* CSS @import rules must come before @tailwind directives in PostCSS's CSS-spec processing order. */ /* Framework CSS — pack-agnostic. Theme palettes come from each pack's tailwind.config.cjs (DaisyUI themes); rules below read the DaisyUI variables --p / --bc / --b1 / --b2 / --b3 / --a / --in so they auto-flip when swaps. Brand typeface + brand `@font-face` declarations live in the PACK's pack.css (served from /public/pack.css and linked from index.html after this stylesheet) — the framework only sets a generic system-font fallback so a pack that ships no brand CSS still renders. */ :root { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'tnum' 1, 'cv11' 1; font-size: 15px; } body { background: oklch(var(--b2)); color: oklch(var(--bc)); } /* The main app is laid out for ≥800px viewports. On narrower windows we DON'T reflow — that produces an unreadable cramped view that isn't the design target. Instead we pin the body's minimum width to 800px so narrower viewports get a horizontal scrollbar at the body level; layout proportions stay correct. Scoped to `.precede-app` (the main app's body class) so the login page (which has its own narrow-friendly design and no `.precede-app` class) is unaffected. */ body.precede-app { min-width: 800px; } /* `.font-display`, `.mono`, `.hazard-stripe`, `.section-label`, `.stat-label`, `.impact-callout(-value)`, `.spec-chip(-label, -value)` — all replaced by Tailwind utilities in the views (or by framework defcomponents in engine/views/_framework.scm). No CSS abstraction left here for them. */ /* state-pill::before colour variants — the state-pill defcomponent in enquiry-list-page.scm sets state-coloured chip styling directly via Tailwind utilities. */ /* Page-load reveal — staggered */ @keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .reveal { animation: reveal 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } /* Row-select highlight — JS toggles `.precede-row-selected` on a `tr.precede-row-select-target` when the user clicks the row body (Open button + nested links keep their own action). The cascade lights the selected row with a soft primary tint so the user sees what's about to be opened. */ tr.precede-row-select-target.precede-row-selected { background: oklch(var(--p) / 0.08); box-shadow: inset 3px 0 0 0 oklch(var(--p)); } /* Refined input/select — squared edges, focused outline */ .input, .select, .textarea { border-radius: 0.125rem; border-color: oklch(var(--b3)); background: oklch(var(--b1)); } .input:focus, .select:focus, .textarea:focus, .input:focus-visible, .select:focus-visible { border-color: oklch(var(--p)); outline: 2px solid oklch(var(--p) / 0.2); outline-offset: 2px; } /* Buttons — tighten letter-spacing for the uppercase look */ .btn { letter-spacing: 0.06em; font-family: 'IBM Plex Sans Condensed', system-ui, sans-serif; font-weight: 600; } /* No focus outlines on tappable rows */ tr:focus-visible { outline: none; } /* trace-panel, trace-header, trace-close, trace-tree, trace-tpl, trace-payload-summary, trace-provenance, trace-from-label — moved to inline Tailwind utilities at the createElement sites in client.ts (renderTracePanel + renderTraceNode). branch-panel, branch-panel-stripe/label/meta/actions/promote/ discard — same; inline utilities in buildBranchPanel. what-if, trace-link — same; inline utilities in buildWhatIf + buildTraceLink. */ /* ──────────────────────────────────────────────────────────────────── FORENSIC PROVENANCE BOARD — the trust visual. Clicking any [data-fact-value] dims the page, outlines the clicked target + every supporting fact card in crimson, and draws thin crimson Bezier curves from each supporter to the target. ──────────────────────────────────────────────────────────────────── */ body.trace-highlight-active #precede-root { filter: saturate(0.5); } body.trace-highlight-active #precede-root *:not(.trace-target):not(.trace-supporter):not(:has(.trace-target)):not(:has(.trace-supporter)) { opacity: 0.18; transition: opacity 240ms ease; } /* Forensic-provenance highlight — outline + dashed ring colours come from the pack's `accent` theme token so each pack picks its own "this is supporting evidence" hue. */ .trace-target { position: relative; z-index: 20; outline: 2px solid oklch(var(--a)) !important; outline-offset: 4px; box-shadow: 0 0 0 6px oklch(var(--a) / 0.10); transition: outline-color 240ms ease, box-shadow 240ms ease; } .trace-supporter { position: relative; z-index: 20; outline: 1.5px solid oklch(var(--a)) !important; outline-offset: 2px; background: oklch(var(--a) / 0.04) !important; transition: outline-color 240ms ease, background 240ms ease; } .trace-supporter::after { content: ""; position: absolute; inset: -6px -6px -6px -6px; border: 1px dashed oklch(var(--a) / 0.35); pointer-events: none; } /* Cursor cue: every value that is provenance-clickable */ [data-fact-value] { cursor: help; } [data-fact-value]:hover { outline: 1px dashed rgba(179, 38, 30, 0.4); outline-offset: 3px; } /* ──────────────────────────────────────────────────────────────────── Decision-tree left rail (pack styles a `.decision-tree` container) ──────────────────────────────────────────────────────────────────── */ /* .decision-tree / .dt-row / .dt-template / .dt-value deleted — no runtime path produces these elements; the decision-tree component renders into an SVG via renderDecisionTree() in decision-tree.ts and styles its nodes inline. */ /* workspace-grid / workspace-rail-right responsive rule — the workspace surface never materialised; rule deleted. */ /* ROM block — centre value + range bar. The range bar is the new primary visual for uncertainty: a wide bar = wide range = many unanswered specs; the bar narrows as specs lock in. The marker inside shows where the centre value sits within the band. */ /* Horizontal layout — big-£ on the left, whisker filling the middle, unknowns chip on the right. Vertically compact so the sticky enquiry-header stops eating screen real estate. */ /* rom-block / rom-centre-block / rom-centre-value / rom-derived-* static layout + typography now live as inline Tailwind on the enquiry-detail-page ROM block. `.rom-centre-value` stays only as a marker for the `.rom-flash` keyframe (below) and the colour transition the framework toggles on ROM updates. */ .rom-centre-value { transition: color 0.25s ease; } /* ── Box-and-whisker for the ROM estimate ───────────────────── The four numbers shown: - LOW / HIGH = min/max of 64 joint-sampled completions (whisker line caps) - Q1 / Q3 = 25th/75th percentile of those samples (the box; middle 50% of outcomes) - PROJECTED = median sample (the bold tick inside the box) - DERIVED = KNOWN sum of currently-derived cost-components — sits LEFT of the box until rules start firing, then slides right as more land. The plot honestly encodes: "here's everything the simulator thinks could happen, here's where the bulk clusters, here's what we already know for sure." */ .rom-whisker { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; -moz-column-gap: 0.6rem; column-gap: 0.6rem; row-gap: 0.3rem; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 720px; } .rom-whisker-empty-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.04em; color: oklch(var(--bc) / 0.6); } .rom-whisker-axis-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.03em; color: oklch(var(--bc) / 0.72); white-space: nowrap; } .rom-whisker-low { grid-column: 1; grid-row: 1; text-align: right; } .rom-whisker-high { grid-column: 3; grid-row: 1; text-align: left; } .rom-whisker-track { grid-column: 2; grid-row: 1; position: relative; height: 22px; } /* Horizontal whisker line — full uncertainty span. */ .rom-whisker-line { position: absolute; top: 50%; transform: translateY(-50%); height: 2px; background: oklch(var(--bc) / 0.42); } .rom-whisker-cap { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 12px; background: oklch(var(--bc) / 0.55); } /* Q1–Q3 box — middle 50% of simulated outcomes. */ .rom-whisker-box { position: absolute; top: 50%; transform: translateY(-50%); height: 14px; background: oklch(var(--p) / 0.16); border: 1px solid oklch(var(--p) / 0.55); border-radius: 2px; } /* Median tick — projected ROM, bold accent inside the box. */ .rom-whisker-median { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 3px; height: 18px; background: oklch(var(--p)); border-radius: 1px; } /* Derived marker — KNOWN sum of cost-components rendered as a small diamond sharing the same axis as the median. When derived lands inside the q1–q3 box, the diamond is bright; when it sits on the whisker outside the box (typical early on, before many rules have fired), it's dimmed slightly so it doesn't compete with the median tick. */ .rom-whisker-derived { position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 10px; height: 10px; background: oklch(var(--bc)); border: 1.5px solid oklch(var(--b1)); box-shadow: 0 0 0 1px oklch(var(--bc)); } .rom-whisker-derived-off-box { opacity: 0.65; } /* Legend below the plot — centred under the TRACK only (not spanning the axis labels), so the swatches and the chart elements they describe line up visually. */ .rom-whisker-legend { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.02em; color: oklch(var(--bc) / 0.78); } .rom-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; } .rom-legend-swatch { display: inline-block; width: 0.7rem; height: 0.7rem; } .rom-range-low { text-align: right; } .rom-range-high { text-align: left; } /* Brief flash when the ROM centre value changes — the rep's eye is drawn to the new number without losing it in the noise. */ @keyframes rom-flash { 0% { background: transparent; } 18% { background: hsl(215 92% 60% / 0.18); } 100% { background: transparent; } } .rom-centre-value.rom-flash { animation: rom-flash 0.6s ease-out; } /* History rail static layout/typography (rail/peek/empty/entry + spec/change/before/after/arrow + show-all chrome) now lives as inline Tailwind on the history-rail defcomponent. Only the JS-toggled state cascades remain here: the slide-in keyframe and the Δ-chip colour direction (.tx-h-up/down/zero), neither of which can be expressed as a static utility class. */ .tx-h-entry.tx-h-fresh { animation: tx-h-slidein 0.32s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes tx-h-slidein { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .tx-h-delta.tx-h-up { color: oklch(var(--bc)); background: oklch(var(--p) / 0.16); } .tx-h-delta.tx-h-down { color: oklch(var(--bc)); background: oklch(var(--su) / 0.18); } .tx-h-delta.tx-h-zero { color: oklch(var(--bc) / 0.72); } /* Pending entry — the server hasn't returned a propagation delta yet, so we show a spinner where the ROM Δ chip will render. The rest of the entry (spec name + before→after value) reads normally because that information IS known at click time. */ /* tx-h-entry-pending / tx-h-pending deleted — no JS toggles these classes today. */ /* precede-spin keyframe — used by the busy-indicator dot. */ @keyframes precede-spin { to { transform: rotate(360deg); } } /* component-board / qs-* — earlier question-card UX iterations that no longer render. Their classes were deleted from the views but the CSS sat here as dead weight; removed. */ /* ---- Triptych — 3 coupled columns ------------------------------ Static .triptych layout (grid-cols-3 + height + positioning) lives as inline Tailwind on the
in triptych.scm. The class name persists here only because the dynamic-state cascade rule `.triptych.tx-has-selection .tx-list > li:not(...)` needs it as a parent selector. */ /* .tx-col static styling moved to inline Tailwind via the framework triptych-col primitive. Class name retained as a JS selector hook + as the parent for the .tx-list cascade. */ .tx-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; /* Clip paths to the triptych bounds so a connector to a row scrolled out of its column doesn't draw over the page chrome above or below. Endpoints are also clamped to the column's visible vertical span in JS (computeElbowD) so the curve visibly exits at the column edge rather than vanishing. */ overflow: hidden; z-index: 5; } /* When no row is selected the overlay has no children; hide it so it isn't a full-bleed transparent layer occluding the triptych cells from accessibility tooling. */ .tx-connectors:empty { visibility: hidden; } .tx-conn { fill: none; stroke: hsl(215 92% 60%); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; stroke-dasharray: 600; stroke-dashoffset: 600; transition: opacity 0.25s ease, stroke-dashoffset 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .tx-conn.tx-conn-shown { opacity: 0.85; stroke-dashoffset: 0; } .tx-conn.tx-conn-potential { stroke: hsl(40 70% 45%); stroke-dasharray: 4 4; } .tx-conn.tx-conn-potential.tx-conn-shown { stroke-dashoffset: 0; opacity: 0.75; } /* .tx-col-header / .tx-col-num / .tx-col-title / .tx-col-hint / .tx-list — all moved to inline Tailwind via the framework triptych-col-header + triptych-list primitives. */ /* Common row reset + selection states. The bottom border style intentionally mirrors the sticky header's edge — single thin theme-aware rule, no dashing — so the column reads as one cohesive ruled list rather than discrete cards. */ .tx-list li { border-bottom: 1px solid oklch(var(--bc) / 0.10); padding: 0.7rem 1rem; cursor: pointer; transition: background 0.12s ease, opacity 0.18s ease; } .tx-list li:last-child { border-bottom: none; } .tx-list li:hover { background: oklch(var(--b2)); } /* Triptych row-state colours route through DaisyUI theme tokens so each pack picks its own "selected" / "connected" hue: tx-selected → info ("look at this one") tx-connected → primary ("supports the selected") The framework is colour-agnostic; tokens come from the pack. */ .tx-list li.tx-selected { background: oklch(var(--in) / 0.10); box-shadow: inset 3px 0 0 0 oklch(var(--in)); } .tx-list li.tx-connected { background: oklch(var(--p) / 0.08); box-shadow: inset 3px 0 0 0 oklch(var(--p)); } /* "Would-be-relevant": rule schema mentions this row but it hasn't fired yet (or its inputs aren't all here). Lighter, dashed stripe. */ .tx-list li.tx-potential { background: hsl(40 60% 50% / 0.07); box-shadow: inset 3px 0 0 0 hsl(40 70% 45% / 0.55); } /* Live preview while a dropdown value is being picked (pre-Set). */ .tx-list li.tx-preview { background: hsl(40 80% 55% / 0.12); box-shadow: inset 3px 0 0 0 hsl(40 90% 45%); } .tx-answer.tx-preview-source { background: hsl(40 80% 55% / 0.10); box-shadow: inset 3px 0 0 0 hsl(40 90% 45%); } .triptych.tx-has-selection .tx-list > li:not(.tx-selected):not(.tx-connected):not(.tx-potential):not(.tx-preview):not(.tx-preview-source) { opacity: 0.40; } /* .tx-cat / .tx-cat-header / .tx-cat-rules — moved to inline Tailwind via the framework triptych-cat-header primitive. */ /* Column 1: Answers — `tx-req` rows are still distinguished by the inset blue rail; the name itself stays at base-content so small body text clears WCAG AA on white. */ .tx-answer.tx-req .tx-a-name { color: oklch(var(--bc)); font-weight: 600; } .tx-answer.tx-req { box-shadow: inset 3px 0 0 0 oklch(var(--p) / 0.55); } .tx-answer.tx-done .tx-a-value-set { font-family: 'IBM Plex Mono', monospace; color: oklch(var(--bc)); font-weight: 600; } /* Answer-row static layout / typography (tx-a-name, tx-a-input, tx-a-impact, tx-a-impact-label, tx-a-impact-value) now lives as inline Tailwind on the answer-row defcomponent. Only the state-driven descendant cascades remain — these depend on JS toggling tx-pending/tx-req/tx-done on the row, and on the input wearing the `tx-input` selector hook. */ .tx-input:focus { outline: none; border-color: hsl(215 92% 60%); box-shadow: 0 0 0 2px hsl(215 92% 60% / 0.10); } .tx-input::-moz-placeholder { color: oklch(var(--bc) / 0.72); opacity: 1; } .tx-input::placeholder { color: oklch(var(--bc) / 0.72); opacity: 1; } .tx-answer.tx-pending .tx-input, .tx-answer.tx-req .tx-input { color: oklch(var(--bc) / 0.78); font-weight: 500; } .tx-answer.tx-pending .tx-a-impact-value { color: oklch(var(--bc) / 0.62); } /* Sticky enquiry header — pinned at the top of the viewport while the rep scrolls through the triptych below. Must be FULLY OPAQUE (no transparency) so the columns scrolling underneath don't bleed through. Background uses --b1 in light (clean white), a slightly-lifted navy in dark so it reads as a solid pinned band distinct from the page floor. */ /* (dark-theme sticky enquiry-header override moved below, beside the tx-rule state cascades — kept as a single block.) */ /* Rule-row + result-row + col-footer + tx-copy + vh-footer static layout / typography moved to inline Tailwind on the corresponding defcomponents. The state-driven `dot fires` cascade keeps its own rules — they depend on the row wearing tx-rule-fired and the dot wearing tx-r-dot, both of which remain as marker classes on the live DOM. */ /* Rule-fired dot uses DaisyUI's `primary` token so each pack picks its own "this fired" colour (VHT navy here; another pack might set it to corporate red or signal green). */ .tx-rule.tx-rule-fired .tx-r-dot { background: oklch(var(--p)); box-shadow: 0 0 0 3px oklch(var(--p) / 0.12); } .tx-rule.tx-rule-unfired .tx-r-name { color: oklch(var(--bc) / 0.72); } /* Sticky enquiry-header dark-theme variant — keyed off the `prefers-color-scheme` proxy that DaisyUI sets, so any pack theme whose `base-100` is dark (computed via colour-scheme) picks up the elevated band + shadow. Not tied to a specific theme name. */ [data-theme] section.sticky.top-0.z-20 { background-color: oklch(var(--b1)); } /* ---- Theme switcher dropdown (top-right of brand bar) -------- */ .precede-theme-toggle { position: relative; font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; } .precede-theme-toggle summary { list-style: none; cursor: pointer; padding: 0.4rem 0.7rem; border: 1px solid oklch(var(--b3)); border-radius: 2px; color: oklch(var(--bc) / 0.75); background: transparent; transition: border-color 0.15s, color 0.15s; } .precede-theme-toggle summary::-webkit-details-marker { display: none; } .precede-theme-toggle summary:hover { border-color: oklch(var(--p)); color: oklch(var(--p)); } /* Theme toggle nested in a dark brand bar — the framework offers a generic `dark-chrome` opt-in marker any pack can attach to a region that has a locally-dark bg. Colours are forced to white so contrast holds regardless of which theme the rest of the page is on (the dark-chrome region is theme-independent). */ .dark-chrome .precede-theme-toggle summary { color: #ffffff; border-color: rgba(255,255,255,0.3); } .dark-chrome .precede-theme-toggle summary:hover { color: oklch(var(--in)); border-color: oklch(var(--in)); } .precede-theme-toggle summary .precede-theme-caret { margin-left: 0.4rem; opacity: 0.6; } .precede-theme-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 160px; background: oklch(var(--b1)); border: 1px solid oklch(var(--b3)); border-radius: 2px; box-shadow: 0 6px 24px -8px hsl(220 52% 8% / 0.35); z-index: 50; overflow: hidden; } .precede-theme-item { display: block; padding: 0.55rem 0.85rem; cursor: pointer; color: oklch(var(--bc) / 0.85); border-left: 2px solid transparent; transition: background 0.12s, color 0.12s, border-color 0.12s; } .precede-theme-item:hover { background: oklch(var(--b2)); color: oklch(var(--p)); border-left-color: oklch(var(--p)); } .precede-theme-item[aria-current="true"] { color: oklch(var(--p)); border-left-color: oklch(var(--p)); background: oklch(var(--p) / 0.08); } /* ---- Busy / thinking ------------------------------------------ When a mutation is in flight, wears .precede-busy and every input that could queue another mutation has the real HTML `disabled` attribute set. The styling here makes the lock VISIBLE — `disabled` browser defaults are subtle and a fast user would otherwise feel like the page just froze. Layered cues, from least- to most-intrusive: 1. Cursor flips to `wait` globally 2. Disabled inputs go to a hatched bg + faded text + "not-allowed" cursor + the pulse-ring around the box 3. The "thinking…" pill anchors top-centre of the triptych (where the user's gaze already is) with the pulsing dot 4. Triptych columns ride a barely-perceptible scrim so the whole work surface reads as "paused, not editable" */ .precede-thinking { position: fixed; top: 76px; left: 50%; transform: translateX(-50%) translateY(-8px); z-index: 100; display: none; /* shown by .precede-busy below */ align-items: center; gap: 0.65rem; padding: 0.55rem 1.1rem 0.55rem 0.9rem; background: oklch(var(--b1)); color: oklch(var(--bc)); border: 1px solid oklch(var(--p)); border-radius: 999px; box-shadow: 0 10px 30px -10px oklch(var(--bc) / 0.45), 0 0 0 4px oklch(var(--p) / 0.12); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; pointer-events: none; opacity: 0; transition: opacity 0.12s ease-out, transform 0.18s ease-out; } .precede-thinking-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: oklch(var(--p)); box-shadow: 0 0 0 0 oklch(var(--p) / 0.6); animation: precede-pulse 1.1s ease-in-out infinite; } @keyframes precede-pulse { 0% { transform: scale(0.85); box-shadow: 0 0 0 0 oklch(var(--p) / 0.55); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px oklch(var(--p) / 0); } 100% { transform: scale(0.85); box-shadow: 0 0 0 0 oklch(var(--p) / 0); } } body.precede-busy .precede-thinking { display: inline-flex; opacity: 1; transform: translateX(-50%) translateY(0); } /* Global cursor + dim the work surface so the lock reads holistically — not just on individual disabled controls. Triptych columns and the answer-form row sit behind a barely-there scrim while busy. */ body.precede-busy { cursor: progress; } body.precede-busy .triptych, body.precede-busy .enquiry-form, body.precede-busy .delta-strip, body.precede-busy .tx-history-rail { filter: saturate(0.6); transition: filter 0.12s ease-out; } body.precede-busy .triptych::after { content: ""; position: absolute; inset: 0; background: oklch(var(--b1) / 0.32); pointer-events: none; z-index: 4; /* under the connectors SVG (z-index 5) */ } /* Disabled control styling — visible at a glance. Striped pattern is the universal "you can't touch this" cue; paired with a "not-allowed" cursor on hover. We target the :disabled state directly (rather than .precede-busy descendants) so it also covers any control whose own logic briefly disables it. */ .tx-input:disabled, button.tx-copy:disabled, .tx-header-undo:disabled, .tx-header-redo:disabled { cursor: not-allowed; opacity: 0.45; color: oklch(var(--bc) / 0.5); background-image: repeating-linear-gradient( 135deg, transparent 0 6px, oklch(var(--bc) / 0.045) 6px 12px ); background-color: oklch(var(--b2)); border-color: oklch(var(--b3)); box-shadow: none; filter: grayscale(0.25); } button.tx-copy:disabled { /* Solid-coloured CTA loses its tint when locked so it doesn't read as "still clickable." */ background-color: oklch(var(--b3)); background-image: repeating-linear-gradient( 135deg, transparent 0 6px, oklch(var(--bc) / 0.08) 6px 12px ); color: oklch(var(--bc) / 0.55); } /* ── Right-side history drawer ──────────────────────────────── Always in the DOM (so view-DSL diff keeps it reactive to history-entry facts); positioned fixed off-screen via transform until wears `.precede-history-drawer-open`, at which point it slides in from the right. Rows are designed for richer state-summary than the peek chips: header (spec + Δ chip), before→after, ROM-after state line, Restore action. Restore is disabled for now — the affordance is in place; backend hook lands next. */ .tx-history-drawer { position: fixed; top: 0; bottom: 0; /* Closed-state position: parked off-canvas with `right: -100vw`. axe-core's overlap check is geometric on computed layout (it doesn't account for `transform` translations), so a drawer parked with `transform: translateX(100%)` shows up as covering everything in the source area — flagging the footer as "overlapped by another element" on every detail page. */ right: -100vw; width: min(440px, 92vw); background: oklch(var(--b1)); border-left: 1px solid oklch(var(--b3)); box-shadow: -16px 0 40px -20px oklch(var(--bc) / 0.4); transition: right 0.22s cubic-bezier(0.4, 0, 0.2, 1); z-index: 80; display: flex; flex-direction: column; pointer-events: none; visibility: hidden; } body.precede-history-drawer-open .tx-history-drawer { right: 0; pointer-events: auto; visibility: visible; } /* Backdrop — click-to-close. Inserted by the drawer header chrome via ::before so we don't need extra DOM. The backdrop is only placed (inset:0) when the drawer is open; while closed, the pseudo is collapsed so axe-core doesn't see the full-viewport overlap on every page (was flagged on the WCAG contrast tests even though the rect was visually transparent). */ .tx-history-drawer::before { content: ""; position: fixed; inset: auto; width: 0; height: 0; background: oklch(var(--bc) / 0); pointer-events: none; transition: background 0.22s ease; z-index: -1; } body.precede-history-drawer-open .tx-history-drawer::before { inset: 0; width: auto; height: auto; background: oklch(var(--bc) / 0.18); pointer-events: auto; } /* History drawer chrome (header / close button / row layout / empty state / restore button) is inline Tailwind on the history-drawer defcomponent. Only the Δ-chip colour-direction cascades remain — they depend on JS toggling tx-hd-up / -down / -zero on the chip span. */ .tx-hd-up { color: oklch(var(--bc)); background: oklch(var(--p) / 0.16); } .tx-hd-down { color: oklch(var(--bc)); background: oklch(var(--su) / 0.18); } .tx-hd-zero { color: oklch(var(--bc) / 0.72); } /* precede-context-menu* + promote-refused-banner* — moved to inline Tailwind utilities at the createElement sites in client.ts (buildTriptychContextMenu + showPromoteRefusedBanner). Class names retained on those elements as JS query hooks; the styling is in the className strings, not here. */ /* §14 Customer-facing quote PDF — print rules. The on-screen styling is inline Tailwind on the
; this @media print block strips the toolbar + brand bar and resets the article width so File → Save-as-PDF produces a clean output. The class names .quote-pdf / .no-print / .precede-brand-bar are JS-free selectors used only by these print rules. */ @media print { .no-print { display: none !important; } .precede-brand-bar { display: none !important; } body { background: #ffffff !important; } .quote-pdf { max-width: none; padding: 0.5in 0.6in; } } *, ::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: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --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: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --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.19 | 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: "Inter", "Founders Grotesk", system-ui, sans-serif; /* 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]) { -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: "IBM Plex Mono", ui-monospace, 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; } :root, [data-theme] { background-color: var(--fallback-b1,oklch(var(--b1)/1)); color: var(--fallback-bc,oklch(var(--bc)/1)); } @supports not (color: oklch(0% 0 0)) { :root { color-scheme: light; --fallback-p: #491eff; --fallback-pc: #d4dbff; --fallback-s: #ff41c7; --fallback-sc: #fff9fc; --fallback-a: #00cfbd; --fallback-ac: #00100d; --fallback-n: #2b3440; --fallback-nc: #d7dde4; --fallback-b1: #ffffff; --fallback-b2: #e5e6e6; --fallback-b3: #e5e6e6; --fallback-bc: #1f2937; --fallback-in: #00b3f0; --fallback-inc: #000000; --fallback-su: #00ca92; --fallback-suc: #000000; --fallback-wa: #ffc22d; --fallback-wac: #000000; --fallback-er: #ff6f70; --fallback-erc: #000000; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --fallback-p: #7582ff; --fallback-pc: #050617; --fallback-s: #ff71cf; --fallback-sc: #190211; --fallback-a: #00c7b5; --fallback-ac: #000e0c; --fallback-n: #2a323c; --fallback-nc: #a6adbb; --fallback-b1: #1d232a; --fallback-b2: #191e24; --fallback-b3: #15191e; --fallback-bc: #a6adbb; --fallback-in: #00b3f0; --fallback-inc: #000000; --fallback-su: #00ca92; --fallback-suc: #000000; --fallback-wa: #ffc22d; --fallback-wac: #000000; --fallback-er: #ff6f70; --fallback-erc: #000000; } } } html { -webkit-tap-highlight-color: transparent; } * { scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent; } *:hover { scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent; } :root { --p: 52.4217% 0.199284 259.864754; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --pc: 100% 0 0; --s: 57.4446% 0.050792 257.610687; --sc: 100% 0 0; --a: 63.4818% 0.18309 258.736472; --ac: 22.8005% 0.046273 261.709168; --n: 22.8005% 0.046273 261.709168; --nc: 94.8555% 0.008678 264.52125; --b1: 100% 0 0; --b2: 94.8555% 0.008678 264.52125; --b3: 82.8939% 0.024248 256.115743; --bc: 22.8005% 0.046273 261.709168; --in: 68.0354% 0.15447 257.975063; --inc: 100% 0 0; --su: 51.4353% 0.115146 154.343206; --suc: 100% 0 0; --wa: 69.6817% 0.108042 87.35496; --wac: 22.8005% 0.046273 261.709168; --er: 48.544% 0.182317 26.496583; --erc: 100% 0 0; } [data-theme=vht-light] { --p: 52.4217% 0.199284 259.864754; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --pc: 100% 0 0; --s: 57.4446% 0.050792 257.610687; --sc: 100% 0 0; --a: 63.4818% 0.18309 258.736472; --ac: 22.8005% 0.046273 261.709168; --n: 22.8005% 0.046273 261.709168; --nc: 94.8555% 0.008678 264.52125; --b1: 100% 0 0; --b2: 94.8555% 0.008678 264.52125; --b3: 82.8939% 0.024248 256.115743; --bc: 22.8005% 0.046273 261.709168; --in: 68.0354% 0.15447 257.975063; --inc: 100% 0 0; --su: 51.4353% 0.115146 154.343206; --suc: 100% 0 0; --wa: 69.6817% 0.108042 87.35496; --wac: 22.8005% 0.046273 261.709168; --er: 48.544% 0.182317 26.496583; --erc: 100% 0 0; } [data-theme=vht-dark] { --p: 68.0354% 0.15447 257.975063; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --pc: 19.2503% 0.039572 261.399957; --s: 70.9728% 0.053124 257.680685; --sc: 19.2503% 0.039572 261.399957; --a: 77.6953% 0.106834 86.831285; --ac: 19.2503% 0.039572 261.399957; --n: 94.8555% 0.008678 264.52125; --nc: 22.8005% 0.046273 261.709168; --b1: 22.8005% 0.046273 261.709168; --b2: 28.0192% 0.057103 263.617427; --b3: 35.103% 0.059565 264.406102; --bc: 94.8555% 0.008678 264.52125; --in: 68.0354% 0.15447 257.975063; --inc: 19.2503% 0.039572 261.399957; --su: 66.321% 0.113236 157.834236; --suc: 19.2503% 0.039572 261.399957; --wa: 77.6953% 0.106834 86.831285; --wac: 19.2503% 0.039572 261.399957; --er: 59.055% 0.182295 22.517681; --erc: 100% 0 0; } .\!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; } } .alert { display: grid; width: 100%; grid-auto-flow: row; align-content: flex-start; align-items: center; justify-items: center; gap: 1rem; text-align: center; border-radius: var(--rounded-box, 1rem); border-width: 1px; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); padding: 1rem; --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --alert-bg: var(--fallback-b2,oklch(var(--b2)/1)); --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1)); background-color: var(--alert-bg); } @media (min-width: 640px) { .alert { grid-auto-flow: column; grid-template-columns: auto minmax(auto,1fr); justify-items: start; text-align: start; } } .avatar.placeholder > div { display: flex; align-items: center; justify-content: center; } .badge { display: inline-flex; align-items: center; justify-content: center; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; height: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; width: -moz-fit-content; width: fit-content; padding-left: 0.563rem; padding-right: 0.563rem; border-radius: var(--rounded-badge, 1.9rem); border-width: 1px; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } @media (hover:hover) { .label a:hover { --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } .\!menu li > *:not(ul, .menu-title, details, .btn):active, .\!menu li > *:not(ul, .menu-title, details, .btn).active, .\!menu li > details > summary:active { --tw-bg-opacity: 1 !important; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important; --tw-text-opacity: 1 !important; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))) !important; } .menu li > *:not(ul, .menu-title, details, .btn):active, .menu li > *:not(ul, .menu-title, details, .btn).active, .menu li > details > summary:active { --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); } .\!menu li > *:not(ul, .menu-title, details, .btn):active, .\!menu li > *:not(ul, .menu-title, details, .btn).active, .\!menu li > details > summary:active { --tw-bg-opacity: 1 !important; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important; --tw-text-opacity: 1 !important; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))) !important; } .\!table tr.hover:hover, .\!table tr.hover:nth-child(even):hover { --tw-bg-opacity: 1 !important; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important; } .table tr.hover:hover, .table tr.hover:nth-child(even):hover { --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); } .\!table tr.hover:hover, .\!table tr.hover:nth-child(even):hover { --tw-bg-opacity: 1 !important; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important; } .table-zebra tr.hover:hover, .table-zebra tr.hover:nth-child(even):hover { --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); } } .\!btn { display: inline-flex !important; height: 3rem !important; min-height: 3rem !important; flex-shrink: 0 !important; cursor: pointer !important; -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; border-radius: var(--rounded-btn, 0.5rem) !important; border-color: transparent !important; border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity)) !important; padding-left: 1rem !important; padding-right: 1rem !important; text-align: center !important; font-size: 0.875rem !important; line-height: 1em !important; gap: 0.5rem !important; font-weight: 600 !important; text-decoration-line: none !important; transition-duration: 200ms !important; transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; border-width: var(--border-btn, 1px) !important; transition-property: color, background-color, border-color, opacity, box-shadow, transform !important; --tw-text-opacity: 1 !important; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important; --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; outline-color: var(--fallback-bc,oklch(var(--bc)/1)) !important; background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity)) !important; --tw-bg-opacity: 1 !important; --tw-border-opacity: 1 !important; } .btn { display: inline-flex; height: 3rem; min-height: 3rem; flex-shrink: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; flex-wrap: wrap; align-items: center; justify-content: center; border-radius: var(--rounded-btn, 0.5rem); border-color: transparent; border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity)); padding-left: 1rem; padding-right: 1rem; text-align: center; font-size: 0.875rem; line-height: 1em; gap: 0.5rem; font-weight: 600; text-decoration-line: none; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); border-width: var(--border-btn, 1px); transition-property: color, background-color, border-color, opacity, box-shadow, transform; --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); outline-color: var(--fallback-bc,oklch(var(--bc)/1)); background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity)); --tw-bg-opacity: 1; --tw-border-opacity: 1; } .btn-disabled, .btn[disabled], .btn:disabled { pointer-events: none; } .\!btn[disabled], .\!btn:disabled { pointer-events: none !important; } :where(.\!btn:is(input[type="checkbox"])), :where(.\!btn:is(input[type="radio"])) { width: auto !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } :where(.btn:is(input[type="checkbox"])), :where(.btn:is(input[type="radio"])) { width: auto; -webkit-appearance: none; -moz-appearance: none; appearance: none; } :where(.\!btn:is(input[type="checkbox"])), :where(.\!btn:is(input[type="radio"])) { width: auto !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } .\!btn:is(input[type="checkbox"]):after, .\!btn:is(input[type="radio"]):after { --tw-content: attr(aria-label) !important; content: var(--tw-content) !important; } .btn:is(input[type="checkbox"]):after, .btn:is(input[type="radio"]):after { --tw-content: attr(aria-label); content: var(--tw-content); } .\!btn:is(input[type="checkbox"]):after, .\!btn:is(input[type="radio"]):after { --tw-content: attr(aria-label) !important; content: var(--tw-content) !important; } .card { position: relative; display: flex; flex-direction: column; border-radius: var(--rounded-box, 1rem); } .card:focus { outline: 2px solid transparent; outline-offset: 2px; } .card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--padding-card, 2rem); gap: 0.5rem; } .card-body :where(p) { flex-grow: 1; } .card figure { display: flex; align-items: center; justify-content: center; } .card.image-full { display: grid; } .card.image-full:before { position: relative; content: ""; z-index: 10; border-radius: var(--rounded-box, 1rem); --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); opacity: 0.75; } .card.image-full:before, .card.image-full > * { grid-column-start: 1; grid-row-start: 1; } .card.image-full > figure img { height: 100%; -o-object-fit: cover; object-fit: cover; } .card.image-full > .card-body { position: relative; z-index: 20; --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); } .collapse:not(td):not(tr):not(colgroup) { visibility: visible; } .collapse { position: relative; display: grid; overflow: hidden; grid-template-rows: max-content 0fr; transition: grid-template-rows 0.2s; width: 100%; border-radius: var(--rounded-box, 1rem); } .collapse-title, .collapse > input[type="checkbox"], .collapse > input[type="radio"], .collapse-content { grid-column-start: 1; grid-row-start: 1; } .collapse > input[type="checkbox"], .collapse > input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; opacity: 0; } :where(.collapse > input[type="checkbox"]), :where(.collapse > input[type="radio"]) { height: 100%; width: 100%; z-index: 1; } .collapse[open], .collapse-open, .collapse:focus:not(.collapse-close) { grid-template-rows: max-content 1fr; } .collapse:not(.collapse-close):has(> input[type="checkbox"]:checked), .collapse:not(.collapse-close):has(> input[type="radio"]:checked) { grid-template-rows: max-content 1fr; } .collapse[open] > .collapse-content, .collapse-open > .collapse-content, .collapse:focus:not(.collapse-close) > .collapse-content, .collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content, .collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content { visibility: visible; min-height: -moz-fit-content; min-height: fit-content; } .diff { position: relative; display: grid; width: 100%; overflow: hidden; direction: ltr; container-type: inline-size; grid-template-columns: auto 1fr; } .divider { display: flex; flex-direction: row; align-items: center; align-self: stretch; margin-top: 1rem; margin-bottom: 1rem; height: 1rem; white-space: nowrap; } .divider:before, .divider:after { height: 0.125rem; width: 100%; flex-grow: 1; --tw-content: ''; content: var(--tw-content); background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } .drawer { position: relative; display: grid; grid-auto-columns: max-content auto; width: 100%; } @media (hover: hover) { .btm-nav > *.disabled:hover, .btm-nav > *[disabled]:hover { pointer-events: none; --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .\!btn:hover { --tw-border-opacity: 1 !important; border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))) !important; --tw-bg-opacity: 1 !important; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) !important; } @supports (color: color-mix(in oklab, black, black)) { .\!btn:hover { background-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black ) !important; border-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black ) !important; } } @supports not (color: oklch(0% 0 0)) { .\!btn:hover { background-color: var(--btn-color, var(--fallback-b2)) !important; border-color: var(--btn-color, var(--fallback-b2)) !important; } } .btn:hover { --tw-border-opacity: 1; border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .btn:hover { background-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black ); border-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black ); } } @supports not (color: oklch(0% 0 0)) { .btn:hover { background-color: var(--btn-color, var(--fallback-b2)); border-color: var(--btn-color, var(--fallback-b2)); } } .\!btn:hover { --tw-border-opacity: 1 !important; border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))) !important; --tw-bg-opacity: 1 !important; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) !important; } @supports (color: color-mix(in oklab, black, black)) { .\!btn:hover { background-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black ) !important; border-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black ) !important; } } @supports not (color: oklch(0% 0 0)) { .\!btn:hover { background-color: var(--btn-color, var(--fallback-b2)) !important; border-color: var(--btn-color, var(--fallback-b2)) !important; } } .\!btn:hover { --tw-border-opacity: 1 !important; border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))) !important; --tw-bg-opacity: 1 !important; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) !important; } @supports (color: color-mix(in oklab, black, black)) { .\!btn:hover { background-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black ) !important; border-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black ) !important; } } @supports not (color: oklch(0% 0 0)) { .\!btn:hover { background-color: var(--btn-color, var(--fallback-b2)) !important; border-color: var(--btn-color, var(--fallback-b2)) !important; } } .\!btn.glass:hover { --glass-opacity: 25% !important; --glass-border-opacity: 15% !important; } .btn.glass:hover { --glass-opacity: 25%; --glass-border-opacity: 15%; } .btn-ghost:hover { border-color: transparent; } @supports (color: oklch(0% 0 0)) { .btn-ghost:hover { background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } } .btn-link:hover { border-color: transparent; background-color: transparent; text-decoration-line: underline; } .btn-outline:hover { --tw-border-opacity: 1; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity))); } .btn-outline.btn-primary:hover { --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .btn-outline.btn-primary:hover { background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); } } .btn-outline.btn-secondary:hover { --tw-text-opacity: 1; color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .btn-outline.btn-secondary:hover { background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); } } .btn-outline.btn-accent:hover { --tw-text-opacity: 1; color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .btn-outline.btn-accent:hover { background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); } } .btn-outline.btn-success:hover { --tw-text-opacity: 1; color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .btn-outline.btn-success:hover { background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); } } .btn-outline.btn-info:hover { --tw-text-opacity: 1; color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .btn-outline.btn-info:hover { background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); } } .btn-outline.btn-warning:hover { --tw-text-opacity: 1; color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .btn-outline.btn-warning:hover { background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); } } .btn-outline.btn-error:hover { --tw-text-opacity: 1; color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .btn-outline.btn-error:hover { background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); } } .btn-disabled:hover, .btn[disabled]:hover, .btn:disabled:hover { --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.2; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .\!btn[disabled]:hover, .\!btn:disabled:hover { --tw-border-opacity: 0 !important; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important; --tw-bg-opacity: 0.2 !important; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important; --tw-text-opacity: 0.2 !important; } @supports (color: color-mix(in oklab, black, black)) { .\!btn:is(input[type="checkbox"]:checked):hover, .\!btn:is(input[type="radio"]:checked):hover { background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) !important; border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) !important; } .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover { background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); } .\!btn:is(input[type="checkbox"]:checked):hover, .\!btn:is(input[type="radio"]:checked):hover { background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) !important; border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black) !important; } } :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { cursor: pointer !important; outline: 2px solid transparent !important; outline-offset: 2px !important; } @supports (color: oklch(0% 0 0)) { :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { background-color: var(--fallback-bc,oklch(var(--bc)/0.1)) !important; } } :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; } @supports (color: oklch(0% 0 0)) { :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } } :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { cursor: pointer !important; outline: 2px solid transparent !important; outline-offset: 2px !important; } @supports (color: oklch(0% 0 0)) { :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { background-color: var(--fallback-bc,oklch(var(--bc)/0.1)) !important; } } :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { cursor: pointer !important; outline: 2px solid transparent !important; outline-offset: 2px !important; } @supports (color: oklch(0% 0 0)) { :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { background-color: var(--fallback-bc,oklch(var(--bc)/0.1)) !important; } } :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { cursor: pointer !important; outline: 2px solid transparent !important; outline-offset: 2px !important; } @supports (color: oklch(0% 0 0)) { :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { background-color: var(--fallback-bc,oklch(var(--bc)/0.1)) !important; } } } .footer { display: grid; width: 100%; grid-auto-flow: row; place-items: start; -moz-column-gap: 1rem; column-gap: 1rem; row-gap: 2.5rem; font-size: 0.875rem; line-height: 1.25rem; } .footer > * { display: grid; place-items: start; gap: 0.5rem; } @media (min-width: 48rem) { .footer { grid-auto-flow: column; } .footer-center { grid-auto-flow: row dense; } } .form-control { display: flex; flex-direction: column; } .label { display: flex; -webkit-user-select: none; -moz-user-select: none; user-select: none; align-items: center; justify-content: space-between; padding-left: 0.25rem; padding-right: 0.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .indicator { position: relative; display: inline-flex; width: -moz-max-content; width: max-content; } .indicator :where(.indicator-item) { z-index: 1; position: absolute; 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)); white-space: nowrap; } .input { flex-shrink: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: 1rem; line-height: 2; line-height: 1.5rem; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: transparent; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .input[type="number"]::-webkit-inner-spin-button, .input-md[type="number"]::-webkit-inner-spin-button { margin-top: -1rem; margin-bottom: -1rem; margin-inline-end: -1rem; } .input-xs[type="number"]::-webkit-inner-spin-button { margin-top: -0.25rem; margin-bottom: -0.25rem; margin-inline-end: -0px; } .input-sm[type="number"]::-webkit-inner-spin-button { margin-top: 0px; margin-bottom: 0px; margin-inline-end: -0px; } .input-lg[type="number"]::-webkit-inner-spin-button { margin-top: -1.5rem; margin-bottom: -1.5rem; margin-inline-end: -1.5rem; } .join { display: inline-flex; align-items: stretch; border-radius: var(--rounded-btn, 0.5rem); } .join :where(.join-item) { border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 0; border-start-start-radius: 0; } .join .join-item:not(:first-child):not(:last-child), .join *:not(:first-child):not(:last-child) .join-item { border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 0; border-start-start-radius: 0; } .join .join-item:first-child:not(:last-child), .join *:first-child:not(:last-child) .join-item { border-start-end-radius: 0; border-end-end-radius: 0; } .join .dropdown .join-item:first-child:not(:last-child), .join *:first-child:not(:last-child) .dropdown .join-item { border-start-end-radius: inherit; border-end-end-radius: inherit; } .join :where(.join-item:first-child:not(:last-child)), .join :where(*:first-child:not(:last-child) .join-item) { border-end-start-radius: inherit; border-start-start-radius: inherit; } .join .join-item:last-child:not(:first-child), .join *:last-child:not(:first-child) .join-item { border-end-start-radius: 0; border-start-start-radius: 0; } .join :where(.join-item:last-child:not(:first-child)), .join :where(*:last-child:not(:first-child) .join-item) { border-start-end-radius: inherit; border-end-end-radius: inherit; } @supports not selector(:has(*)) { :where(.join *) { border-radius: inherit; } } @supports selector(:has(*)) { :where(.join *:has(.join-item)) { border-radius: inherit; } } .link { cursor: pointer; text-decoration-line: underline; } .\!menu { display: flex !important; flex-direction: column !important; flex-wrap: wrap !important; font-size: 0.875rem !important; line-height: 1.25rem !important; padding: 0.5rem !important; } .menu { display: flex; flex-direction: column; flex-wrap: wrap; font-size: 0.875rem; line-height: 1.25rem; padding: 0.5rem; } .\!menu :where(li ul) { position: relative !important; white-space: nowrap !important; margin-inline-start: 1rem !important; padding-inline-start: 0.5rem !important; } .menu :where(li ul) { position: relative; white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: 0.5rem; } .\!menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .\!menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) { display: grid !important; grid-auto-flow: column !important; align-content: flex-start !important; align-items: center !important; gap: 0.5rem !important; grid-auto-columns: minmax(auto, max-content) auto max-content !important; -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; } .menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) { display: grid; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: 0.5rem; grid-auto-columns: minmax(auto, max-content) auto max-content; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .\!menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .\!menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) { display: grid !important; grid-auto-flow: column !important; align-content: flex-start !important; align-items: center !important; gap: 0.5rem !important; grid-auto-columns: minmax(auto, max-content) auto max-content !important; -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; } .\!menu li.disabled { cursor: not-allowed !important; -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; color: var(--fallback-bc,oklch(var(--bc)/0.3)) !important; } .menu li.disabled { cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: var(--fallback-bc,oklch(var(--bc)/0.3)); } .\!menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) { display: none !important; } .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) { display: none; } :where(.\!menu li) { position: relative !important; display: flex !important; flex-shrink: 0 !important; flex-direction: column !important; flex-wrap: wrap !important; align-items: stretch !important; } :where(.menu li) { position: relative; display: flex; flex-shrink: 0; flex-direction: column; flex-wrap: wrap; align-items: stretch; } :where(.\!menu li) .badge { justify-self: end !important; } :where(.menu li) .badge { justify-self: end; } .progress { position: relative; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; height: 0.5rem; border-radius: var(--rounded-box, 1rem); background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .range { height: 1.5rem; width: 100%; cursor: pointer; -moz-appearance: none; appearance: none; -webkit-appearance: none; --range-shdw: var(--fallback-bc,oklch(var(--bc)/1)); overflow: hidden; border-radius: var(--rounded-box, 1rem); background-color: transparent; } .range:focus { outline: none; } .select { display: inline-flex; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 3rem; min-height: 3rem; padding-inline-start: 1rem; padding-inline-end: 2.5rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: transparent; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } .select[multiple] { height: auto; } .stack { display: inline-grid; place-items: center; align-items: flex-end; } .stack > * { grid-column-start: 1; grid-row-start: 1; transform: translateY(10%) scale(0.9); z-index: 1; width: 100%; opacity: 0.6; } .stack > *:nth-child(2) { transform: translateY(5%) scale(0.95); z-index: 2; opacity: 0.8; } .stack > *:nth-child(1) { transform: translateY(0) scale(1); z-index: 3; opacity: 1; } .stats { display: inline-grid; border-radius: var(--rounded-box, 1rem); --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } :where(.stats) { grid-auto-flow: column; overflow-x: auto; } .stat { display: inline-grid; width: 100%; grid-template-columns: repeat(1, 1fr); -moz-column-gap: 1rem; column-gap: 1rem; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-border-opacity: 0.1; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; } .steps .\!step { display: grid !important; grid-template-columns: repeat(1, minmax(0, 1fr)) !important; grid-template-columns: auto !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: 40px 1fr !important; place-items: center !important; text-align: center !important; min-width: 4rem !important; } .steps .step { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: auto; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-rows: 40px 1fr; place-items: center; text-align: center; min-width: 4rem; } .swap { position: relative; display: inline-grid; -webkit-user-select: none; -moz-user-select: none; user-select: none; place-content: center; cursor: pointer; } .swap > * { grid-column-start: 1; grid-row-start: 1; transition-duration: 300ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-property: transform, opacity; } .swap input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swap .swap-on, .swap .swap-indeterminate, .swap input:indeterminate ~ .swap-on { opacity: 0; } .swap input:checked ~ .swap-off, .swap-active .swap-off, .swap input:indeterminate ~ .swap-off { opacity: 0; } .swap input:checked ~ .swap-on, .swap-active .swap-on, .swap input:indeterminate ~ .swap-indeterminate { opacity: 1; } .\!table { position: relative !important; width: 100% !important; border-radius: var(--rounded-box, 1rem) !important; text-align: left !important; font-size: 0.875rem !important; line-height: 1.25rem !important; } .table { position: relative; width: 100%; border-radius: var(--rounded-box, 1rem); text-align: left; font-size: 0.875rem; line-height: 1.25rem; } .\!table :where(.table-pin-rows thead tr) { position: sticky !important; top: 0px !important; z-index: 1 !important; --tw-bg-opacity: 1 !important; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important; } .table :where(.table-pin-rows thead tr) { position: sticky; top: 0px; z-index: 1; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .\!table :where(.table-pin-rows tfoot tr) { position: sticky !important; bottom: 0px !important; z-index: 1 !important; --tw-bg-opacity: 1 !important; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important; } .table :where(.table-pin-rows tfoot tr) { position: sticky; bottom: 0px; z-index: 1; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .\!table :where(.table-pin-cols tr th) { position: sticky !important; left: 0px !important; right: 0px !important; --tw-bg-opacity: 1 !important; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important; } .table :where(.table-pin-cols tr th) { position: sticky; left: 0px; right: 0px; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .textarea { min-height: 3rem; flex-shrink: 1; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: transparent; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .toast { position: fixed; display: flex; min-width: -moz-fit-content; min-width: fit-content; flex-direction: column; white-space: nowrap; gap: 0.5rem; padding: 1rem; } .toggle { flex-shrink: 0; --tglbg: var(--fallback-b1,oklch(var(--b1)/1)); --handleoffset: 1.5rem; --handleoffsetcalculator: calc(var(--handleoffset) * -1); --togglehandleborder: 0 0; height: 1.5rem; width: 3rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: var(--rounded-badge, 1.9rem); border-width: 1px; border-color: currentColor; background-color: currentColor; color: var(--fallback-bc,oklch(var(--bc)/0.5)); transition: background, box-shadow var(--animation-input, 0.2s) ease-out; box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset, var(--togglehandleborder); } .btm-nav > *:where(.active) { border-top-width: 2px; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .btm-nav > *.disabled, .btm-nav > *[disabled] { pointer-events: none; --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .btm-nav > * .label { font-size: 1rem; line-height: 1.5rem; } @media (prefers-reduced-motion: no-preference) { .\!btn { animation: button-pop var(--animation-btn, 0.25s) ease-out !important; } .btn { animation: button-pop var(--animation-btn, 0.25s) ease-out; } } .\!btn:active:hover, .\!btn:active:focus { animation: button-pop 0s ease-out !important; transform: scale(var(--btn-focus-scale, 0.97)) !important; } .btn:active:hover, .btn:active:focus { animation: button-pop 0s ease-out; transform: scale(var(--btn-focus-scale, 0.97)); } .\!btn:active:hover, .\!btn:active:focus { animation: button-pop 0s ease-out !important; transform: scale(var(--btn-focus-scale, 0.97)) !important; } @supports not (color: oklch(0% 0 0)) { .\!btn { background-color: var(--btn-color, var(--fallback-b2)) !important; border-color: var(--btn-color, var(--fallback-b2)) !important; } .btn { background-color: var(--btn-color, var(--fallback-b2)); border-color: var(--btn-color, var(--fallback-b2)); } .btn-primary { --btn-color: var(--fallback-p); } .btn-warning { --btn-color: var(--fallback-wa); } } @supports (color: color-mix(in oklab, black, black)) { .btn-outline.btn-primary.btn-active { background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); } .btn-outline.btn-secondary.btn-active { background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); } .btn-outline.btn-accent.btn-active { background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); } .btn-outline.btn-success.btn-active { background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); } .btn-outline.btn-info.btn-active { background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); } .btn-outline.btn-warning.btn-active { background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); } .btn-outline.btn-error.btn-active { background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); } } .\!btn:focus-visible { outline-style: solid !important; outline-width: 2px !important; outline-offset: 2px !important; } .btn:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; } .btn-primary { --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); outline-color: var(--fallback-p,oklch(var(--p)/1)); } @supports (color: oklch(0% 0 0)) { .btn-primary { --btn-color: var(--p); } .btn-warning { --btn-color: var(--wa); } } .btn-warning { --tw-text-opacity: 1; color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); outline-color: var(--fallback-wa,oklch(var(--wa)/1)); } .\!btn.glass { --tw-shadow: 0 0 #0000 !important; --tw-shadow-colored: 0 0 #0000 !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; outline-color: currentColor !important; } .btn.glass { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); outline-color: currentColor; } .\!btn.glass.btn-active { --glass-opacity: 25% !important; --glass-border-opacity: 15% !important; } .btn.glass.btn-active { --glass-opacity: 25%; --glass-border-opacity: 15%; } .btn-ghost { border-width: 1px; border-color: transparent; background-color: transparent; color: currentColor; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); outline-color: currentColor; } .btn-ghost.btn-active { border-color: transparent; background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .btn-link { border-color: transparent; background-color: transparent; --tw-text-opacity: 1; color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity))); text-decoration-line: underline; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); outline-color: currentColor; } .btn-link.btn-active { border-color: transparent; background-color: transparent; text-decoration-line: underline; } .btn-outline { border-color: currentColor; background-color: transparent; --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .btn-outline.btn-active { --tw-border-opacity: 1; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity))); } .btn-outline.btn-primary { --tw-text-opacity: 1; color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity))); } .btn-outline.btn-primary.btn-active { --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } .btn-outline.btn-secondary { --tw-text-opacity: 1; color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity))); } .btn-outline.btn-secondary.btn-active { --tw-text-opacity: 1; color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); } .btn-outline.btn-accent { --tw-text-opacity: 1; color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity))); } .btn-outline.btn-accent.btn-active { --tw-text-opacity: 1; color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); } .btn-outline.btn-success { --tw-text-opacity: 1; color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity))); } .btn-outline.btn-success.btn-active { --tw-text-opacity: 1; color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); } .btn-outline.btn-info { --tw-text-opacity: 1; color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity))); } .btn-outline.btn-info.btn-active { --tw-text-opacity: 1; color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); } .btn-outline.btn-warning { --tw-text-opacity: 1; color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity))); } .btn-outline.btn-warning.btn-active { --tw-text-opacity: 1; color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); } .btn-outline.btn-error { --tw-text-opacity: 1; color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity))); } .btn-outline.btn-error.btn-active { --tw-text-opacity: 1; color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); } .\!btn.btn-disabled, .\!btn[disabled], .\!btn:disabled { --tw-border-opacity: 0 !important; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important; --tw-bg-opacity: 0.2 !important; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important; --tw-text-opacity: 0.2 !important; } .btn.btn-disabled, .btn[disabled], .btn:disabled { --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.2; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .\!btn.btn-disabled, .\!btn[disabled], .\!btn:disabled { --tw-border-opacity: 0 !important; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important; --tw-bg-opacity: 0.2 !important; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important; --tw-text-opacity: 0.2 !important; } .\!btn:is(input[type="checkbox"]:checked), .\!btn:is(input[type="radio"]:checked) { --tw-border-opacity: 1 !important; border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))) !important; --tw-bg-opacity: 1 !important; background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))) !important; --tw-text-opacity: 1 !important; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))) !important; } .btn:is(input[type="checkbox"]:checked), .btn:is(input[type="radio"]:checked) { --tw-border-opacity: 1; border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } .\!btn:is(input[type="checkbox"]:checked), .\!btn:is(input[type="radio"]:checked) { --tw-border-opacity: 1 !important; border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))) !important; --tw-bg-opacity: 1 !important; background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))) !important; --tw-text-opacity: 1 !important; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))) !important; } .\!btn:is(input[type="checkbox"]:checked):focus-visible, .\!btn:is(input[type="radio"]:checked):focus-visible { outline-color: var(--fallback-p,oklch(var(--p)/1)) !important; } .btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible { outline-color: var(--fallback-p,oklch(var(--p)/1)); } .\!btn:is(input[type="checkbox"]:checked):focus-visible, .\!btn:is(input[type="radio"]:checked):focus-visible { outline-color: var(--fallback-p,oklch(var(--p)/1)) !important; } @keyframes button-pop { 0% { transform: scale(var(--btn-focus-scale, 0.98)); } 40% { transform: scale(1.02); } 100% { transform: scale(1); } } .card :where(figure:first-child) { overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-start-radius: unset; border-end-end-radius: unset; } .card :where(figure:last-child) { overflow: hidden; border-start-start-radius: unset; border-start-end-radius: unset; border-end-start-radius: inherit; border-end-end-radius: inherit; } .card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .card.bordered { border-width: 1px; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); } .card.compact .card-body { padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .card.image-full :where(figure) { overflow: hidden; border-radius: inherit; } @keyframes checkmark { 0% { background-position-y: 5px; } 50% { background-position-y: -2px; } 100% { background-position-y: 0; } } details.collapse { width: 100%; } details.collapse summary { position: relative; display: block; outline: 2px solid transparent; outline-offset: 2px; } details.collapse summary::-webkit-details-marker { display: none; } .collapse:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/1)); } .collapse:has(.collapse-title:focus-visible), .collapse:has(> input[type="checkbox"]:focus-visible), .collapse:has(> input[type="radio"]:focus-visible) { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/1)); } .collapse:not(.collapse-open):not(.collapse-close) > input[type="checkbox"], .collapse:not(.collapse-open):not(.collapse-close) > input[type="radio"]:not(:checked), .collapse:not(.collapse-open):not(.collapse-close) > .collapse-title { cursor: pointer; } .collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) > .collapse-title { cursor: unset; } .collapse-title, :where(.collapse > input[type="checkbox"]), :where(.collapse > input[type="radio"]) { padding: 1rem; padding-inline-end: 3rem; min-height: 3.75rem; transition: background-color 0.2s ease-out; } .collapse[open] > :where(.collapse-content), .collapse-open > :where(.collapse-content), .collapse:focus:not(.collapse-close) > :where(.collapse-content), .collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content), .collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content) { padding-bottom: 1rem; transition: padding 0.2s ease-out, background-color 0.2s ease-out; } .collapse[open].collapse-arrow > .collapse-title:after, .collapse-open.collapse-arrow > .collapse-title:after, .collapse-arrow:focus:not(.collapse-close) > .collapse-title:after, .collapse-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after, .collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after { --tw-translate-y: -50%; --tw-rotate: 225deg; 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)); } .collapse[open].collapse-plus > .collapse-title:after, .collapse-open.collapse-plus > .collapse-title:after, .collapse-plus:focus:not(.collapse-close) > .collapse-title:after, .collapse-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after, .collapse-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after { content: "−"; } .divider:not(:empty) { gap: 1rem; } .input input { --tw-bg-opacity: 1; background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))); background-color: transparent; } .input input:focus { outline: 2px solid transparent; outline-offset: 2px; } .input[list]::-webkit-calendar-picker-indicator { line-height: 1em; } .input-bordered { border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .input:focus, .input:focus-within { box-shadow: none; border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .input:has(> input[disabled]), .input-disabled, .input:disabled, .input[disabled] { cursor: not-allowed; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); color: var(--fallback-bc,oklch(var(--bc)/0.4)); } .input:has(> input[disabled])::-moz-placeholder, .input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder { color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .input:has(> input[disabled])::placeholder, .input-disabled::placeholder, .input:disabled::placeholder, .input[disabled]::placeholder { color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .input:has(> input[disabled]) > input[disabled] { cursor: not-allowed; } .input::-webkit-date-and-time-value { text-align: inherit; } .join > :where(*:not(:first-child)) { margin-top: 0px; margin-bottom: 0px; margin-inline-start: -1px; } .join > :where(*:not(:first-child)):is(.btn) { margin-inline-start: calc(var(--border-btn) * -1); } .join > :where(*:not(:first-child)):is(.\!btn) { margin-inline-start: calc(var(--border-btn) * -1) !important; } .join-item:focus { isolation: isolate; } .link:focus { outline: 2px solid transparent; outline-offset: 2px; } .link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } :where(.\!menu li:empty) { --tw-bg-opacity: 1 !important; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))) !important; opacity: 0.1 !important; margin: 0.5rem 1rem !important; height: 1px !important; } :where(.menu li:empty) { --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); opacity: 0.1; margin: 0.5rem 1rem; height: 1px; } .\!menu :where(li ul):before { position: absolute !important; bottom: 0.75rem !important; inset-inline-start: 0px !important; top: 0.75rem !important; width: 1px !important; --tw-bg-opacity: 1 !important; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))) !important; opacity: 0.1 !important; content: "" !important; } .menu :where(li ul):before { position: absolute; bottom: 0.75rem; inset-inline-start: 0px; top: 0.75rem; width: 1px; --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); opacity: 0.1; content: ""; } .\!menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .\!menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) { border-radius: var(--rounded-btn, 0.5rem) !important; padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; text-align: start !important; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter !important; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; transition-duration: 200ms !important; text-wrap: balance !important; } .menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) { border-radius: var(--rounded-btn, 0.5rem); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: start; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; text-wrap: balance; } .\!menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .\!menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) { border-radius: var(--rounded-btn, 0.5rem) !important; padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; text-align: start !important; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter !important; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; transition-duration: 200ms !important; text-wrap: balance !important; } :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible { cursor: pointer !important; background-color: var(--fallback-bc,oklch(var(--bc)/0.1)) !important; --tw-text-opacity: 1 !important; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important; outline: 2px solid transparent !important; outline-offset: 2px !important; } :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible { cursor: pointer; background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); outline: 2px solid transparent; outline-offset: 2px; } :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.\!menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.\!menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible { cursor: pointer !important; background-color: var(--fallback-bc,oklch(var(--bc)/0.1)) !important; --tw-text-opacity: 1 !important; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important; outline: 2px solid transparent !important; outline-offset: 2px !important; } .\!menu li > *:not(ul, .menu-title, details, .btn):active, .\!menu li > *:not(ul, .menu-title, details, .btn).active, .\!menu li > details > summary:active { --tw-bg-opacity: 1 !important; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important; --tw-text-opacity: 1 !important; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))) !important; } .menu li > *:not(ul, .menu-title, details, .btn):active, .menu li > *:not(ul, .menu-title, details, .btn).active, .menu li > details > summary:active { --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); } .\!menu li > *:not(ul, .menu-title, details, .btn):active, .\!menu li > *:not(ul, .menu-title, details, .btn).active, .\!menu li > details > summary:active { --tw-bg-opacity: 1 !important; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))) !important; --tw-text-opacity: 1 !important; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))) !important; } .\!menu :where(li > details > summary)::-webkit-details-marker { display: none !important; } .menu :where(li > details > summary)::-webkit-details-marker { display: none; } .\!menu :where(li > details > summary):after, .\!menu :where(li > .menu-dropdown-toggle):after { justify-self: end !important; display: block !important; margin-top: -0.5rem !important; height: 0.5rem !important; width: 0.5rem !important; transform: rotate(45deg) !important; transition-property: transform, margin-top !important; transition-duration: 0.3s !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; content: "" !important; transform-origin: 75% 75% !important; box-shadow: 2px 2px !important; pointer-events: none !important; } .menu :where(li > details > summary):after, .menu :where(li > .menu-dropdown-toggle):after { justify-self: end; display: block; margin-top: -0.5rem; height: 0.5rem; width: 0.5rem; transform: rotate(45deg); transition-property: transform, margin-top; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); content: ""; transform-origin: 75% 75%; box-shadow: 2px 2px; pointer-events: none; } .\!menu :where(li > details > summary):after, .\!menu :where(li > .menu-dropdown-toggle):after { justify-self: end !important; display: block !important; margin-top: -0.5rem !important; height: 0.5rem !important; width: 0.5rem !important; transform: rotate(45deg) !important; transition-property: transform, margin-top !important; transition-duration: 0.3s !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; content: "" !important; transform-origin: 75% 75% !important; box-shadow: 2px 2px !important; pointer-events: none !important; } .\!menu :where(li > details[open] > summary):after, .\!menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { transform: rotate(225deg) !important; margin-top: 0 !important; } .menu :where(li > details[open] > summary):after, .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { transform: rotate(225deg); margin-top: 0; } .\!menu :where(li > details[open] > summary):after, .\!menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { transform: rotate(225deg) !important; margin-top: 0 !important; } .mockup-phone .display { overflow: hidden; border-radius: 40px; margin-top: -25px; } .mockup-browser .mockup-browser-toolbar .input { position: relative; margin-left: auto; margin-right: auto; display: block; height: 1.75rem; width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); padding-left: 2rem; direction: ltr; } .mockup-browser .mockup-browser-toolbar .input:before { content: ""; position: absolute; left: 0.5rem; top: 50%; aspect-ratio: 1 / 1; height: 0.75rem; --tw-translate-y: -50%; 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)); border-radius: 9999px; border-width: 2px; border-color: currentColor; opacity: 0.6; } .mockup-browser .mockup-browser-toolbar .input:after { content: ""; position: absolute; left: 1.25rem; top: 50%; height: 0.5rem; --tw-translate-y: 25%; --tw-rotate: -45deg; 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)); border-radius: 9999px; border-width: 1px; border-color: currentColor; opacity: 0.6; } @keyframes modal-pop { 0% { opacity: 0; } } .progress::-moz-progress-bar { border-radius: var(--rounded-box, 1rem); background-color: currentColor; } .progress:indeterminate { --progress-color: var(--fallback-bc,oklch(var(--bc)/1)); background-image: repeating-linear-gradient( 90deg, var(--progress-color) -1%, var(--progress-color) 10%, transparent 10%, transparent 90% ); background-size: 200%; background-position-x: 15%; animation: progress-loading 5s ease-in-out infinite; } .progress::-webkit-progress-bar { border-radius: var(--rounded-box, 1rem); background-color: transparent; } .progress::-webkit-progress-value { border-radius: var(--rounded-box, 1rem); background-color: currentColor; } .progress:indeterminate::-moz-progress-bar { background-color: transparent; background-image: repeating-linear-gradient( 90deg, var(--progress-color) -1%, var(--progress-color) 10%, transparent 10%, transparent 90% ); background-size: 200%; background-position-x: 15%; animation: progress-loading 5s ease-in-out infinite; } @keyframes progress-loading { 50% { background-position-x: -115%; } } @keyframes radiomark { 0% { box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset; } 50% { box-shadow: 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset; } 100% { box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset; } } .range:focus-visible::-webkit-slider-thumb { --focus-shadow: 0 0 0 6px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 2rem var(--range-shdw) inset; } .range:focus-visible::-moz-range-thumb { --focus-shadow: 0 0 0 6px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 2rem var(--range-shdw) inset; } .range::-webkit-slider-runnable-track { height: 0.5rem; width: 100%; border-radius: var(--rounded-box, 1rem); background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } .range::-moz-range-track { height: 0.5rem; width: 100%; border-radius: var(--rounded-box, 1rem); background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } .range::-webkit-slider-thumb { position: relative; height: 1.5rem; width: 1.5rem; border-radius: var(--rounded-box, 1rem); border-style: none; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); appearance: none; -webkit-appearance: none; top: 50%; color: var(--range-shdw); transform: translateY(-50%); --filler-size: 100rem; --filler-offset: 0.6rem; box-shadow: 0 0 0 3px var(--range-shdw) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size); } .range::-moz-range-thumb { position: relative; height: 1.5rem; width: 1.5rem; border-radius: var(--rounded-box, 1rem); border-style: none; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); top: 50%; color: var(--range-shdw); --filler-size: 100rem; --filler-offset: 0.5rem; box-shadow: 0 0 0 3px var(--range-shdw) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size); } @keyframes rating-pop { 0% { transform: translateY(-0.125em); } 40% { transform: translateY(-0.125em); } 100% { transform: translateY(0); } } .select-bordered { border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .select:focus { box-shadow: none; border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .select-disabled, .select:disabled, .select[disabled] { cursor: not-allowed; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); color: var(--fallback-bc,oklch(var(--bc)/0.4)); } .select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder { color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .select-disabled::placeholder, .select:disabled::placeholder, .select[disabled]::placeholder { color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .select-multiple, .select[multiple], .select[size].select:not([size="1"]) { background-image: none; padding-right: 1rem; } [dir="rtl"] .select { background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%); } @keyframes skeleton { from { background-position: 150%; } to { background-position: -50%; } } :where(.stats) > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); --tw-divide-y-reverse: 0; border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(0px * var(--tw-divide-y-reverse)); } [dir="rtl"] .stats > *:not([hidden]) ~ *:not([hidden]) { --tw-divide-x-reverse: 1; } .steps .\!step:before { top: 0px !important; grid-column-start: 1 !important; grid-row-start: 1 !important; height: 0.5rem !important; width: 100% !important; 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)) !important; --tw-bg-opacity: 1 !important; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) !important; --tw-text-opacity: 1 !important; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important; content: "" !important; margin-inline-start: -100% !important; } .steps .step:before { top: 0px; grid-column-start: 1; grid-row-start: 1; height: 0.5rem; width: 100%; 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)); --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); content: ""; margin-inline-start: -100%; } .steps .\!step:after { content: counter(step) !important; counter-increment: step !important; z-index: 1 !important; position: relative !important; grid-column-start: 1 !important; grid-row-start: 1 !important; display: grid !important; height: 2rem !important; width: 2rem !important; place-items: center !important; place-self: center !important; border-radius: 9999px !important; --tw-bg-opacity: 1 !important; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))) !important; --tw-text-opacity: 1 !important; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))) !important; } .steps .step:after { content: counter(step); counter-increment: step; z-index: 1; position: relative; grid-column-start: 1; grid-row-start: 1; display: grid; height: 2rem; width: 2rem; place-items: center; place-self: center; border-radius: 9999px; --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } .steps .\!step:first-child:before { content: none !important; } .steps .step:first-child:before { content: none; } .steps .\!step[data-content]:after { content: attr(data-content) !important; } .steps .step[data-content]:after { content: attr(data-content); } .\!table:where([dir="rtl"], [dir="rtl"] *) { text-align: right !important; } .table:where([dir="rtl"], [dir="rtl"] *) { text-align: right; } .\!table :where(th, td) { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; vertical-align: middle !important; } .table :where(th, td) { padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; vertical-align: middle; } .\!table tr.active, .\!table tr.active:nth-child(even) { --tw-bg-opacity: 1 !important; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important; } .table tr.active, .table tr.active:nth-child(even), .table-zebra tbody tr:nth-child(even) { --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); } .\!table tr.active, .\!table tr.active:nth-child(even) { --tw-bg-opacity: 1 !important; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important; } .table-zebra tr.active, .table-zebra tr.active:nth-child(even), .table-zebra-zebra tbody tr:nth-child(even) { --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); } .\!table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) { border-bottom-width: 1px !important; --tw-border-opacity: 1 !important; border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) !important; } .table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) { border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); } .\!table :where(thead, tfoot) { white-space: nowrap !important; font-size: 0.75rem !important; line-height: 1rem !important; font-weight: 700 !important; color: var(--fallback-bc,oklch(var(--bc)/0.6)) !important; } .table :where(thead, tfoot) { white-space: nowrap; font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: var(--fallback-bc,oklch(var(--bc)/0.6)); } .\!table :where(tfoot) { border-top-width: 1px !important; --tw-border-opacity: 1 !important; border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) !important; } .table :where(tfoot) { border-top-width: 1px; --tw-border-opacity: 1; border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); } .textarea:focus { box-shadow: none; border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .textarea-disabled, .textarea:disabled, .textarea[disabled] { cursor: not-allowed; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); color: var(--fallback-bc,oklch(var(--bc)/0.4)); } .textarea-disabled::-moz-placeholder, .textarea:disabled::-moz-placeholder, .textarea[disabled]::-moz-placeholder { color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .textarea-disabled::placeholder, .textarea:disabled::placeholder, .textarea[disabled]::placeholder { color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .toast > * { animation: toast-pop 0.25s ease-out; } @keyframes toast-pop { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } [dir="rtl"] .toggle { --handleoffsetcalculator: calc(var(--handleoffset) * 1); } .toggle:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .toggle:hover { background-color: currentColor; } .toggle:checked, .toggle[aria-checked="true"] { background-image: none; --handleoffsetcalculator: var(--handleoffset); --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } [dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[aria-checked="true"] { --handleoffsetcalculator: calc(var(--handleoffset) * -1); } .toggle:indeterminate { --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset; } [dir="rtl"] .toggle:indeterminate { box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset; } .toggle:disabled { cursor: not-allowed; --tw-border-opacity: 1; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); background-color: transparent; opacity: 0.3; --togglehandleborder: 0 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset, var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset; } .artboard.phone-1.horizontal, .artboard.phone-1.artboard-horizontal { width: 568px; height: 320px; } .artboard.phone-2.horizontal, .artboard.phone-2.artboard-horizontal { width: 667px; height: 375px; } .artboard.phone-3.horizontal, .artboard.phone-3.artboard-horizontal { width: 736px; height: 414px; } .artboard.phone-4.horizontal, .artboard.phone-4.artboard-horizontal { width: 812px; height: 375px; } .artboard.phone-5.horizontal, .artboard.phone-5.artboard-horizontal { width: 896px; height: 414px; } .artboard.phone-6.horizontal, .artboard.phone-6.artboard-horizontal { width: 1024px; height: 320px; } .btm-nav-xs > *:where(.active) { border-top-width: 1px; } .btm-nav-sm > *:where(.active) { border-top-width: 2px; } .btm-nav-md > *:where(.active) { border-top-width: 2px; } .btm-nav-lg > *:where(.active) { border-top-width: 4px; } .btn-xs { height: 1.5rem; min-height: 1.5rem; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.75rem; } .btn-sm { height: 2rem; min-height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.875rem; } .btn-lg { height: 4rem; min-height: 4rem; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 1.125rem; } .btn-square:where(.btn-xs) { height: 1.5rem; width: 1.5rem; padding: 0px; } .btn-square:where(.btn-sm) { height: 2rem; width: 2rem; padding: 0px; } .btn-square:where(.btn-lg) { height: 4rem; width: 4rem; padding: 0px; } .btn-circle:where(.btn-xs) { height: 1.5rem; width: 1.5rem; border-radius: 9999px; padding: 0px; } .btn-circle:where(.btn-sm) { height: 2rem; width: 2rem; border-radius: 9999px; padding: 0px; } .btn-circle:where(.btn-lg) { height: 4rem; width: 4rem; border-radius: 9999px; padding: 0px; } .indicator :where(.indicator-item) { bottom: auto; inset-inline-end: 0px; inset-inline-start: auto; top: 0px; --tw-translate-y: -50%; --tw-translate-x: 50%; 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)); } .indicator :where(.indicator-item):where([dir="rtl"], [dir="rtl"] *) { --tw-translate-x: -50%; 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)); } .indicator :where(.indicator-item.indicator-start) { inset-inline-end: auto; inset-inline-start: 0px; --tw-translate-x: -50%; 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)); } .indicator :where(.indicator-item.indicator-start):where([dir="rtl"], [dir="rtl"] *) { --tw-translate-x: 50%; 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)); } .indicator :where(.indicator-item.indicator-center) { inset-inline-end: 50%; inset-inline-start: 50%; --tw-translate-x: -50%; 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)); } .indicator :where(.indicator-item.indicator-center):where([dir="rtl"], [dir="rtl"] *) { --tw-translate-x: 50%; 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)); } .indicator :where(.indicator-item.indicator-end) { inset-inline-end: 0px; inset-inline-start: auto; --tw-translate-x: 50%; 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)); } .indicator :where(.indicator-item.indicator-end):where([dir="rtl"], [dir="rtl"] *) { --tw-translate-x: -50%; 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)); } .indicator :where(.indicator-item.indicator-bottom) { bottom: 0px; top: auto; --tw-translate-y: 50%; 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)); } .indicator :where(.indicator-item.indicator-middle) { bottom: 50%; top: 50%; --tw-translate-y: -50%; 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)); } .indicator :where(.indicator-item.indicator-top) { bottom: auto; top: 0px; --tw-translate-y: -50%; 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)); } .input-xs { height: 1.5rem; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.75rem; line-height: 1rem; line-height: 1.625; } .input-lg { height: 4rem; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 1.125rem; line-height: 1.75rem; line-height: 2; } .input-sm { height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.875rem; line-height: 2rem; } .join.join-vertical { flex-direction: column; } .join.join-vertical .join-item:first-child:not(:last-child), .join.join-vertical *:first-child:not(:last-child) .join-item { border-end-start-radius: 0; border-end-end-radius: 0; border-start-start-radius: inherit; border-start-end-radius: inherit; } .join.join-vertical .join-item:last-child:not(:first-child), .join.join-vertical *:last-child:not(:first-child) .join-item { border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: inherit; border-end-end-radius: inherit; } .join.join-horizontal { flex-direction: row; } .join.join-horizontal .join-item:first-child:not(:last-child), .join.join-horizontal *:first-child:not(:last-child) .join-item { border-end-end-radius: 0; border-start-end-radius: 0; border-end-start-radius: inherit; border-start-start-radius: inherit; } .join.join-horizontal .join-item:last-child:not(:first-child), .join.join-horizontal *:last-child:not(:first-child) .join-item { border-end-start-radius: 0; border-start-start-radius: 0; border-end-end-radius: inherit; border-start-end-radius: inherit; } .select-lg { height: 4rem; min-height: 4rem; padding-left: 1.5rem; padding-right: 2rem; font-size: 1.125rem; line-height: 1.75rem; line-height: 2; } [dir="rtl"] .select-lg { padding-left: 2rem; padding-right: 1.5rem; } .select-sm { height: 2rem; min-height: 2rem; padding-left: 0.75rem; padding-right: 2rem; font-size: 0.875rem; line-height: 2rem; } [dir="rtl"] .select-sm { padding-left: 2rem; padding-right: 0.75rem; } .steps-horizontal .\!step { display: grid !important; grid-template-columns: repeat(1, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; place-items: center !important; text-align: center !important; } .steps-horizontal .step { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); place-items: center; text-align: center; } .steps-vertical .\!step { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(1, minmax(0, 1fr)) !important; } .steps-vertical .step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr)); } :where(.toast) { bottom: 0px; inset-inline-end: 0px; inset-inline-start: auto; top: auto; --tw-translate-x: 0px; --tw-translate-y: 0px; 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)); } .toast:where(.toast-start) { inset-inline-end: auto; inset-inline-start: 0px; --tw-translate-x: 0px; 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)); } .toast:where(.toast-center) { inset-inline-end: 50%; inset-inline-start: 50%; --tw-translate-x: -50%; 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)); } .toast:where(.toast-center):where([dir="rtl"], [dir="rtl"] *) { --tw-translate-x: 50%; 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)); } .toast:where(.toast-end) { inset-inline-end: 0px; inset-inline-start: auto; --tw-translate-x: 0px; 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)); } .toast:where(.toast-bottom) { bottom: 0px; top: auto; --tw-translate-y: 0px; 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)); } .toast:where(.toast-middle) { bottom: auto; top: 50%; --tw-translate-y: -50%; 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)); } .toast:where(.toast-top) { bottom: auto; top: 0px; --tw-translate-y: 0px; 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)); } .tooltip { position: relative; display: inline-block; --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px)); } .tooltip:before { position: absolute; pointer-events: none; z-index: 1; content: var(--tw-content); --tw-content: attr(data-tip); } .tooltip:before, .tooltip-top:before { transform: translateX(-50%); top: auto; left: 50%; right: auto; bottom: var(--tooltip-offset); } .card-compact .card-body { padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .card-normal .card-body { padding: var(--padding-card, 2rem); font-size: 1rem; line-height: 1.5rem; } .join.join-vertical > :where(*:not(:first-child)) { margin-left: 0px; margin-right: 0px; margin-top: -1px; } .join.join-vertical > :where(*:not(:first-child)):is(.btn) { margin-top: calc(var(--border-btn) * -1); } .join.join-vertical > :where(*:not(:first-child)):is(.\!btn) { margin-top: calc(var(--border-btn) * -1) !important; } .join.join-horizontal > :where(*:not(:first-child)) { margin-top: 0px; margin-bottom: 0px; margin-inline-start: -1px; } .join.join-horizontal > :where(*:not(:first-child)):is(.btn) { margin-inline-start: calc(var(--border-btn) * -1); margin-top: 0px; } .join.join-horizontal > :where(*:not(:first-child)):is(.\!btn) { margin-inline-start: calc(var(--border-btn) * -1) !important; margin-top: 0px !important; } .steps-horizontal .\!step { grid-template-rows: 40px 1fr !important; grid-template-columns: auto !important; min-width: 4rem !important; } .steps-horizontal .step { grid-template-rows: 40px 1fr; grid-template-columns: auto; min-width: 4rem; } .steps-horizontal .\!step:before { height: 0.5rem !important; width: 100% !important; --tw-translate-x: 0px !important; --tw-translate-y: 0px !important; 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)) !important; content: "" !important; margin-inline-start: -100% !important; } .steps-horizontal .step:before { height: 0.5rem; width: 100%; --tw-translate-x: 0px; --tw-translate-y: 0px; 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)); content: ""; margin-inline-start: -100%; } .steps-horizontal .\!step:where([dir="rtl"], [dir="rtl"] *):before { --tw-translate-x: 0px !important; 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)) !important; } .steps-horizontal .step:where([dir="rtl"], [dir="rtl"] *):before { --tw-translate-x: 0px; 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)); } .steps-vertical .\!step { gap: 0.5rem !important; grid-template-columns: 40px 1fr !important; grid-template-rows: auto !important; min-height: 4rem !important; justify-items: start !important; } .steps-vertical .step { gap: 0.5rem; grid-template-columns: 40px 1fr; grid-template-rows: auto; min-height: 4rem; justify-items: start; } .steps-vertical .\!step:before { height: 100% !important; width: 0.5rem !important; --tw-translate-x: -50% !important; --tw-translate-y: -50% !important; 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)) !important; margin-inline-start: 50% !important; } .steps-vertical .step:before { height: 100%; width: 0.5rem; --tw-translate-x: -50%; --tw-translate-y: -50%; 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)); margin-inline-start: 50%; } .steps-vertical .\!step:where([dir="rtl"], [dir="rtl"] *):before { --tw-translate-x: 50% !important; 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)) !important; } .steps-vertical .step:where([dir="rtl"], [dir="rtl"] *):before { --tw-translate-x: 50%; 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)); } .tooltip { position: relative; display: inline-block; text-align: center; --tooltip-tail: 0.1875rem; --tooltip-color: var(--fallback-n,oklch(var(--n)/1)); --tooltip-text-color: var(--fallback-nc,oklch(var(--nc)/1)); --tooltip-tail-offset: calc(100% + 0.0625rem - var(--tooltip-tail)); } .tooltip:before, .tooltip:after { opacity: 0; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-delay: 100ms; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .tooltip:after { position: absolute; content: ""; border-style: solid; border-width: var(--tooltip-tail, 0); width: 0; height: 0; display: block; } .tooltip:before { max-width: 20rem; white-space: normal; border-radius: 0.25rem; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; background-color: var(--tooltip-color); color: var(--tooltip-text-color); width: -moz-max-content; width: max-content; } .tooltip.tooltip-open:before { opacity: 1; transition-delay: 75ms; } .tooltip.tooltip-open:after { opacity: 1; transition-delay: 75ms; } .tooltip:hover:before { opacity: 1; transition-delay: 75ms; } .tooltip:hover:after { opacity: 1; transition-delay: 75ms; } .tooltip:has(:focus-visible):after, .tooltip:has(:focus-visible):before { opacity: 1; transition-delay: 75ms; } .tooltip:not([data-tip]):hover:before, .tooltip:not([data-tip]):hover:after { visibility: hidden; opacity: 0; } .tooltip:after, .tooltip-top:after { transform: translateX(-50%); border-color: var(--tooltip-color) transparent transparent transparent; top: auto; left: 50%; right: auto; bottom: var(--tooltip-tail-offset); } .visible { visibility: visible; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-x-0 { left: 0px; right: 0px; } .left-0 { left: 0px; } .right-6 { right: 1.5rem; } .top-0 { top: 0px; } .top-6 { top: 1.5rem; } .top-\[var\(--branch-panel-h\2c 0px\)\] { top: var(--branch-panel-h,0px); } .isolate { isolation: isolate; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-\[100\] { z-index: 100; } .z-\[1\] { z-index: 1; } .z-\[60\] { z-index: 60; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-start-1 { grid-column-start: 1; } .col-start-2 { grid-column-start: 2; } .row-span-2 { grid-row: span 2 / span 2; } .row-start-1 { grid-row-start: 1; } .row-start-2 { grid-row-start: 2; } .row-start-3 { grid-row-start: 3; } .m-0 { margin: 0px; } .mx-0\.5 { margin-left: 0.125rem; margin-right: 0.125rem; } .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-auto { margin-left: auto; margin-right: auto; } .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; } .my-7 { margin-top: 1.75rem; margin-bottom: 1.75rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-7 { margin-bottom: 1.75rem; } .mb-8 { margin-bottom: 2rem; } .ml-1 { margin-left: 0.25rem; } .ml-1\.5 { margin-left: 0.375rem; } .ml-2 { margin-left: 0.5rem; } .ml-3 { margin-left: 0.75rem; } .ml-5 { margin-left: 1.25rem; } .ml-auto { margin-left: auto; } .mr-2 { margin-right: 0.5rem; } .mr-3 { margin-right: 0.75rem; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-1\.5 { margin-top: 0.375rem; } .mt-10 { margin-top: 2.5rem; } .mt-2 { margin-top: 0.5rem; } .mt-2\.5 { margin-top: 0.625rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-7 { margin-top: 1.75rem; } .mt-8 { margin-top: 2rem; } .mt-\[0\.15rem\] { margin-top: 0.15rem; } .ml-0\.5 { margin-left: 0.125rem; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .\!table { display: table !important; } .table { display: table; } .grid { display: grid; } .contents { display: contents; } .hidden { display: none; } .h-1 { height: 0.25rem; } .h-2 { height: 0.5rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-7 { height: 1.75rem; } .h-\[9px\] { height: 9px; } .h-\[calc\(100vh-240px\)\] { height: calc(100vh - 240px); } .h-auto { height: auto; } .h-px { height: 1px; } .h-9 { height: 2.25rem; } .max-h-\[80vh\] { max-height: 80vh; } .min-h-0 { min-height: 0px; } .min-h-\[180px\] { min-height: 180px; } .min-h-\[420px\] { min-height: 420px; } .min-h-\[44px\] { min-height: 44px; } .min-h-\[480px\] { min-height: 480px; } .w-1 { width: 0.25rem; } .w-2 { width: 0.5rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-64 { width: 16rem; } .w-7 { width: 1.75rem; } .w-9 { width: 2.25rem; } .w-\[260px\] { width: 260px; } .w-\[32rem\] { width: 32rem; } .w-\[9px\] { width: 9px; } .w-auto { width: auto; } .w-full { width: 100%; } .min-w-0 { min-width: 0px; } .min-w-\[100px\] { min-width: 100px; } .min-w-\[120px\] { min-width: 120px; } .min-w-\[140px\] { min-width: 140px; } .min-w-\[160px\] { min-width: 160px; } .min-w-\[200px\] { min-width: 200px; } .min-w-\[280px\] { min-width: 280px; } .min-w-\[300px\] { min-width: 300px; } .min-w-\[60px\] { min-width: 60px; } .max-w-\[1600px\] { max-width: 1600px; } .max-w-\[1800px\] { max-width: 1800px; } .max-w-\[820px\] { max-width: 820px; } .max-w-full { max-width: 100%; } .max-w-md { max-width: 28rem; } .flex-1 { flex: 1 1 0%; } .flex-none { flex: none; } .shrink-0 { flex-shrink: 0; } .border-collapse { border-collapse: collapse; } .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)); } .cursor-pointer { cursor: pointer; } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize { resize: both; } .list-disc { list-style-type: disc; } .list-none { list-style-type: 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)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-\[14px_1fr\] { grid-template-columns: 14px 1fr; } .grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; } .grid-cols-\[1fr_auto_28px\] { grid-template-columns: 1fr auto 28px; } .grid-cols-\[380px_1fr\] { grid-template-columns: 380px 1fr; } .grid-cols-\[minmax\(0\2c 1fr\)_auto_auto\] { grid-template-columns: minmax(0,1fr) auto auto; } .grid-rows-\[auto_auto\] { grid-template-rows: auto auto; } .grid-rows-\[auto_auto_auto\] { grid-template-rows: auto auto auto; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .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-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-0\.5 { gap: 0.125rem; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-2\.5 { gap: 0.625rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } .gap-x-2 { -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .gap-x-2\.5 { -moz-column-gap: 0.625rem; column-gap: 0.625rem; } .gap-x-3 { -moz-column-gap: 0.75rem; column-gap: 0.75rem; } .gap-x-3\.5 { -moz-column-gap: 0.875rem; column-gap: 0.875rem; } .gap-x-4 { -moz-column-gap: 1rem; column-gap: 1rem; } .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .gap-x-8 { -moz-column-gap: 2rem; column-gap: 2rem; } .gap-y-1 { row-gap: 0.25rem; } .gap-y-1\.5 { row-gap: 0.375rem; } .gap-y-2 { row-gap: 0.5rem; } .gap-y-\[0\.05rem\] { row-gap: 0.05rem; } .gap-y-\[0\.15rem\] { row-gap: 0.15rem; } .gap-y-\[0\.1rem\] { row-gap: 0.1rem; } .gap-y-\[0\.2rem\] { row-gap: 0.2rem; } .space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); 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 * calc(1 - var(--tw-space-y-reverse))); 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 * calc(1 - var(--tw-space-y-reverse))); 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 * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .space-y-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .self-center { align-self: center; } .self-stretch { align-self: stretch; } .justify-self-center { justify-self: center; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .text-ellipsis { text-overflow: ellipsis; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre { white-space: pre; } .rounded { border-radius: 0.25rem; } .rounded-full { border-radius: 9999px; } .rounded-md { border-radius: 0.375rem; } .rounded-sm { border-radius: 0.125rem; } .border { border-width: 1px; } .border-0 { border-width: 0px; } .border-2 { border-width: 2px; } .border-y-2 { border-top-width: 2px; border-bottom-width: 2px; } .border-b { border-bottom-width: 1px; } .border-b-2 { border-bottom-width: 2px; } .border-l { border-left-width: 1px; } .border-l-2 { border-left-width: 2px; } .border-l-\[3px\] { border-left-width: 3px; } .border-r { border-right-width: 1px; } .border-t { border-top-width: 1px; } .border-t-2 { border-top-width: 2px; } .border-dotted { border-style: dotted; } .border-\[\#ebeef4\]\/20 { border-color: rgb(235 238 244 / 0.2); } .border-\[\#ebeef4\]\/25 { border-color: rgb(235 238 244 / 0.25); } .border-accent\/40 { border-color: var(--fallback-a,oklch(var(--a)/0.4)); } .border-base-300 { --tw-border-opacity: 1; border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity, 1))); } .border-base-content\/10 { border-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } .border-base-content\/15 { border-color: var(--fallback-bc,oklch(var(--bc)/0.15)); } .border-base-content\/20 { border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .border-base-content\/25 { border-color: var(--fallback-bc,oklch(var(--bc)/0.25)); } .border-base-content\/30 { border-color: var(--fallback-bc,oklch(var(--bc)/0.3)); } .border-base-content\/5 { border-color: var(--fallback-bc,oklch(var(--bc)/0.05)); } .border-base-content\/85 { border-color: var(--fallback-bc,oklch(var(--bc)/0.85)); } .border-error\/40 { border-color: var(--fallback-er,oklch(var(--er)/0.4)); } .border-error\/50 { border-color: var(--fallback-er,oklch(var(--er)/0.5)); } .border-info\/40 { border-color: var(--fallback-in,oklch(var(--in)/0.4)); } .border-neutral-content\/15 { border-color: var(--fallback-nc,oklch(var(--nc)/0.15)); } .border-primary { --tw-border-opacity: 1; border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity, 1))); } .border-primary\/30 { border-color: var(--fallback-p,oklch(var(--p)/0.3)); } .border-primary\/40 { border-color: var(--fallback-p,oklch(var(--p)/0.4)); } .border-success\/40 { border-color: var(--fallback-su,oklch(var(--su)/0.4)); } .border-warning { --tw-border-opacity: 1; border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity, 1))); } .border-warning\/30 { border-color: var(--fallback-wa,oklch(var(--wa)/0.3)); } .border-warning\/40 { border-color: var(--fallback-wa,oklch(var(--wa)/0.4)); } .border-base-content\/40 { border-color: var(--fallback-bc,oklch(var(--bc)/0.4)); } .border-white\/15 { border-color: rgb(255 255 255 / 0.15); } .border-white\/20 { border-color: rgb(255 255 255 / 0.2); } .border-l-error { --tw-border-opacity: 1; border-left-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity, 1))); } .border-l-primary { --tw-border-opacity: 1; border-left-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity, 1))); } .bg-\[\#101c32\] { --tw-bg-opacity: 1; background-color: rgb(16 28 50 / var(--tw-bg-opacity, 1)); } .bg-\[\#15325f\] { --tw-bg-opacity: 1; background-color: rgb(21 50 95 / var(--tw-bg-opacity, 1)); } .bg-accent\/15 { background-color: var(--fallback-a,oklch(var(--a)/0.15)); } .bg-base-100 { --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity, 1))); } .bg-base-100\/60 { background-color: var(--fallback-b1,oklch(var(--b1)/0.6)); } .bg-base-200 { --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity, 1))); } .bg-base-200\/40 { background-color: var(--fallback-b2,oklch(var(--b2)/0.4)); } .bg-base-200\/50 { background-color: var(--fallback-b2,oklch(var(--b2)/0.5)); } .bg-base-300 { --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity, 1))); } .bg-base-300\/70 { background-color: var(--fallback-b3,oklch(var(--b3)/0.7)); } .bg-base-content\/10 { background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } .bg-base-content\/25 { background-color: var(--fallback-bc,oklch(var(--bc)/0.25)); } .bg-base-content\/30 { background-color: var(--fallback-bc,oklch(var(--bc)/0.3)); } .bg-error\/10 { background-color: var(--fallback-er,oklch(var(--er)/0.1)); } .bg-error\/15 { background-color: var(--fallback-er,oklch(var(--er)/0.15)); } .bg-info\/10 { background-color: var(--fallback-in,oklch(var(--in)/0.1)); } .bg-info\/15 { background-color: var(--fallback-in,oklch(var(--in)/0.15)); } .bg-inherit { background-color: inherit; } .bg-neutral { --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity, 1))); } .bg-primary { --tw-bg-opacity: 1; background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity, 1))); } .bg-primary\/10 { background-color: var(--fallback-p,oklch(var(--p)/0.1)); } .bg-primary\/15 { background-color: var(--fallback-p,oklch(var(--p)/0.15)); } .bg-primary\/20 { background-color: var(--fallback-p,oklch(var(--p)/0.2)); } .bg-primary\/5 { background-color: var(--fallback-p,oklch(var(--p)/0.05)); } .bg-primary\/60 { background-color: var(--fallback-p,oklch(var(--p)/0.6)); } .bg-success\/10 { background-color: var(--fallback-su,oklch(var(--su)/0.1)); } .bg-success\/15 { background-color: var(--fallback-su,oklch(var(--su)/0.15)); } .bg-success\/20 { background-color: var(--fallback-su,oklch(var(--su)/0.2)); } .bg-transparent { background-color: transparent; } .bg-warning { --tw-bg-opacity: 1; background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity, 1))); } .bg-warning\/10 { background-color: var(--fallback-wa,oklch(var(--wa)/0.1)); } .bg-warning\/15 { background-color: var(--fallback-wa,oklch(var(--wa)/0.15)); } .bg-warning\/20 { background-color: var(--fallback-wa,oklch(var(--wa)/0.2)); } .bg-warning\/5 { background-color: var(--fallback-wa,oklch(var(--wa)/0.05)); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-\[\#0d2435\] { --tw-bg-opacity: 1; background-color: rgb(13 36 53 / var(--tw-bg-opacity, 1)); } .bg-base-200\/30 { background-color: var(--fallback-b2,oklch(var(--b2)/0.3)); } .p-0 { padding: 0px; } .p-10 { padding: 2.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-7 { padding: 1.75rem; } .p-8 { padding: 2rem; } .px-0 { padding-left: 0px; padding-right: 0px; } .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; } .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } .px-12 { padding-left: 3rem; padding-right: 3rem; } .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-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; } .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; } .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .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-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-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-\[0\.12rem\] { padding-top: 0.12rem; padding-bottom: 0.12rem; } .py-\[0\.1rem\] { padding-top: 0.1rem; padding-bottom: 0.1rem; } .pb-1\.5 { padding-bottom: 0.375rem; } .pb-16 { padding-bottom: 4rem; } .pb-2 { padding-bottom: 0.5rem; } .pb-3 { padding-bottom: 0.75rem; } .pb-4 { padding-bottom: 1rem; } .pb-5 { padding-bottom: 1.25rem; } .pb-\[0\.1rem\] { padding-bottom: 0.1rem; } .pl-3 { padding-left: 0.75rem; } .pl-5 { padding-left: 1.25rem; } .pt-2\.5 { padding-top: 0.625rem; } .pt-3 { padding-top: 0.75rem; } .pt-3\.5 { padding-top: 0.875rem; } .pt-5 { padding-top: 1.25rem; } .pt-6 { padding-top: 1.5rem; } .pt-9 { padding-top: 2.25rem; } .pt-\[1\.1rem\] { padding-top: 1.1rem; } .pt-2 { padding-top: 0.5rem; } .pt-7 { padding-top: 1.75rem; } .pt-1 { padding-top: 0.25rem; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .align-middle { vertical-align: middle; } .font-display { font-family: "Inter", "Founders Grotesk", system-ui, sans-serif; } .font-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; } .font-sans { font-family: "Inter", "Founders Grotesk", system-ui, sans-serif; } .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-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-\[13px\] { font-size: 13px; } .text-\[15px\] { font-size: 15px; } .text-\[2\.2rem\] { font-size: 2.2rem; } .text-\[9px\] { font-size: 9px; } .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; } .text-\[1\.6rem\] { font-size: 1.6rem; } .font-bold { font-weight: 700; } .font-light { font-weight: 300; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .normal-case { text-transform: none; } .italic { font-style: italic; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .leading-\[0\.95\] { line-height: 0.95; } .leading-\[1\.6\] { line-height: 1.6; } .leading-none { line-height: 1; } .leading-normal { line-height: 1.5; } .leading-relaxed { line-height: 1.625; } .leading-snug { line-height: 1.375; } .leading-tight { line-height: 1.25; } .tracking-\[0\.01em\] { letter-spacing: 0.01em; } .tracking-\[0\.02em\] { letter-spacing: 0.02em; } .tracking-\[0\.03em\] { letter-spacing: 0.03em; } .tracking-\[0\.04em\] { letter-spacing: 0.04em; } .tracking-\[0\.06em\] { letter-spacing: 0.06em; } .tracking-\[0\.10em\] { letter-spacing: 0.10em; } .tracking-\[0\.12em\] { letter-spacing: 0.12em; } .tracking-\[0\.14em\] { letter-spacing: 0.14em; } .tracking-\[0\.16em\] { letter-spacing: 0.16em; } .tracking-normal { letter-spacing: 0em; } .tracking-tight { letter-spacing: -0.025em; } .tracking-wide { letter-spacing: 0.025em; } .tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; } .text-\[\#15191f\] { --tw-text-opacity: 1; color: rgb(21 25 31 / var(--tw-text-opacity, 1)); } .text-\[\#ebeef4\] { --tw-text-opacity: 1; color: rgb(235 238 244 / var(--tw-text-opacity, 1)); } .text-\[\#ebeef4\]\/80 { color: rgb(235 238 244 / 0.8); } .text-\[\#ebeef4\]\/85 { color: rgb(235 238 244 / 0.85); } .text-base-content { --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity, 1))); } .text-base-content\/30 { color: var(--fallback-bc,oklch(var(--bc)/0.3)); } .text-base-content\/40 { color: var(--fallback-bc,oklch(var(--bc)/0.4)); } .text-base-content\/45 { color: var(--fallback-bc,oklch(var(--bc)/0.45)); } .text-base-content\/50 { color: var(--fallback-bc,oklch(var(--bc)/0.5)); } .text-base-content\/55 { color: var(--fallback-bc,oklch(var(--bc)/0.55)); } .text-base-content\/60 { color: var(--fallback-bc,oklch(var(--bc)/0.6)); } .text-base-content\/65 { color: var(--fallback-bc,oklch(var(--bc)/0.65)); } .text-base-content\/70 { color: var(--fallback-bc,oklch(var(--bc)/0.7)); } .text-base-content\/75 { color: var(--fallback-bc,oklch(var(--bc)/0.75)); } .text-base-content\/80 { color: var(--fallback-bc,oklch(var(--bc)/0.8)); } .text-base-content\/85 { color: var(--fallback-bc,oklch(var(--bc)/0.85)); } .text-base-content\/90 { color: var(--fallback-bc,oklch(var(--bc)/0.9)); } .text-base-content\/95 { color: var(--fallback-bc,oklch(var(--bc)/0.95)); } .text-current { color: currentColor; } .text-error { --tw-text-opacity: 1; color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity, 1))); } .text-info { --tw-text-opacity: 1; color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity, 1))); } .text-inherit { color: inherit; } .text-neutral-content { --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity, 1))); } .text-primary { --tw-text-opacity: 1; color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1))); } .text-primary-content { --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity, 1))); } .text-primary\/80 { color: var(--fallback-p,oklch(var(--p)/0.8)); } .text-success { --tw-text-opacity: 1; color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity, 1))); } .text-success-content { --tw-text-opacity: 1; color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity, 1))); } .text-transparent { color: transparent; } .text-warning { --tw-text-opacity: 1; color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity, 1))); } .text-warning-content { --tw-text-opacity: 1; color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity, 1))); } .text-\[\#ebeef4\]\/70 { color: rgb(235 238 244 / 0.7); } .text-\[\#80a3bf\] { --tw-text-opacity: 1; color: rgb(128 163 191 / var(--tw-text-opacity, 1)); } .text-white\/80 { color: rgb(255 255 255 / 0.8); } .text-white\/85 { color: rgb(255 255 255 / 0.85); } .line-through { text-decoration-line: line-through; } .no-underline { text-decoration-line: none; } .opacity-50 { opacity: 0.5; } .opacity-70 { opacity: 0.7; } .opacity-75 { opacity: 0.75; } .opacity-85 { opacity: 0.85; } .opacity-80 { opacity: 0.8; } .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(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: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-2xl { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_6px_16px_-4px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] { --tw-shadow: 0 6px 16px -4px rgba(0,0,0,0.25); --tw-shadow-colored: 0 6px 16px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_8px_24px_-10px_rgba\(16\2c 28\2c 50\2c 0\.28\)\] { --tw-shadow: 0 8px 24px -10px rgba(16,28,50,0.28); --tw-shadow-colored: 0 8px 24px -10px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(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: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(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: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_8px_24px_-10px_rgba\(16\2c 28\2c 50\2c 0\.18\)\] { --tw-shadow: 0 8px 24px -10px rgba(16,28,50,0.18); --tw-shadow-colored: 0 8px 24px -10px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_8px_24px_-10px_rgba\(13\2c 36\2c 53\2c 0\.18\)\] { --tw-shadow: 0 8px 24px -10px rgba(13,36,53,0.18); --tw-shadow-colored: 0 8px 24px -10px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline { outline-style: solid; } .outline-1 { outline-width: 1px; } .-outline-offset-1 { outline-offset: -1px; } .outline-primary\/60 { outline-color: var(--fallback-p,oklch(var(--p)/0.6)); } .ring-2 { --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: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-primary\/30 { --tw-ring-color: var(--fallback-p,oklch(var(--p)/0.3)); } .blur { --tw-blur: blur(8px); 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) 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); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-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; } .\[transform\:rotate\(180deg\)\] { transform: rotate(180deg); } .\[writing-mode\:vertical-rl\] { writing-mode: vertical-rl; } .before\:mr-1::before { content: var(--tw-content); margin-right: 0.25rem; } .before\:opacity-60::before { content: var(--tw-content); opacity: 0.6; } .before\:content-\[\'\?\'\]::before { --tw-content: '?'; content: var(--tw-content); } .hover\:border-primary:hover { --tw-border-opacity: 1; border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity, 1))); } .hover\:border-primary\/50:hover { border-color: var(--fallback-p,oklch(var(--p)/0.5)); } .hover\:border-warning:hover { --tw-border-opacity: 1; border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity, 1))); } .hover\:bg-base-200:hover { --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity, 1))); } .hover\:bg-base-200\/50:hover { background-color: var(--fallback-b2,oklch(var(--b2)/0.5)); } .hover\:bg-base-200\/60:hover { background-color: var(--fallback-b2,oklch(var(--b2)/0.6)); } .hover\:bg-base-content\/5:hover { background-color: var(--fallback-bc,oklch(var(--bc)/0.05)); } .hover\:bg-primary\/10:hover { background-color: var(--fallback-p,oklch(var(--p)/0.1)); } .hover\:bg-primary\/20:hover { background-color: var(--fallback-p,oklch(var(--p)/0.2)); } .hover\:bg-primary\/5:hover { background-color: var(--fallback-p,oklch(var(--p)/0.05)); } .hover\:bg-warning\/20:hover { background-color: var(--fallback-wa,oklch(var(--wa)/0.2)); } .hover\:text-accent:hover { --tw-text-opacity: 1; color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity, 1))); } .hover\:text-base-content:hover { --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity, 1))); } .hover\:text-primary:hover { --tw-text-opacity: 1; color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1))); } .hover\:text-\[\#80a3bf\]:hover { --tw-text-opacity: 1; color: rgb(128 163 191 / var(--tw-text-opacity, 1)); } .hover\:opacity-100:hover { opacity: 1; } .hover\:brightness-110:hover { --tw-brightness: brightness(1.1); 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); } .hover\:brightness-95:hover { --tw-brightness: brightness(.95); 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); } .focus\:border-info:focus { --tw-border-opacity: 1; border-color: var(--fallback-in,oklch(var(--in)/var(--tw-border-opacity, 1))); } .focus\:bg-base-200:focus { --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-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: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-info\/10:focus { --tw-ring-color: var(--fallback-in,oklch(var(--in)/0.1)); } .focus-visible\:outline:focus-visible { outline-style: solid; } .focus-visible\:outline-2:focus-visible { outline-width: 2px; } .focus-visible\:outline-offset-1:focus-visible { outline-offset: 1px; } .focus-visible\:outline-primary:focus-visible { outline-color: var(--fallback-p,oklch(var(--p)/1)); } .hover\:enabled\:border-primary:enabled:hover { --tw-border-opacity: 1; border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity, 1))); } .hover\:enabled\:bg-primary\/10:enabled:hover { background-color: var(--fallback-p,oklch(var(--p)/0.1)); } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:opacity-40:disabled { opacity: 0.4; } .group:hover .group-hover\:text-primary { --tw-text-opacity: 1; color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1))); } @media (min-width: 768px) { .md\:inline-block { display: inline-block; } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:col-span-2 { grid-column: span 2 / span 2; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .\[\&_td\]\:px-2 td { padding-left: 0.5rem; padding-right: 0.5rem; } .\[\&_td\]\:py-0\.5 td { padding-top: 0.125rem; padding-bottom: 0.125rem; } .\[\&_th\]\:px-2 th { padding-left: 0.5rem; padding-right: 0.5rem; } .\[\&_th\]\:py-1 th { padding-top: 0.25rem; padding-bottom: 0.25rem; } .\[\&_th\]\:text-left th { text-align: left; } .\[\&_th\]\:font-normal th { font-weight: 400; } .\[\&_th\]\:text-base-content\/70 th { color: var(--fallback-bc,oklch(var(--bc)/0.7)); }