/* app/assets/tailwind/application.css */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-500: oklch(63.7% 0.237 25.331); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-neutral-100: oklch(97% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-md: 28rem; --container-xl: 36rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-loose: 2; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --blur-xs: 4px; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::-moz-placeholder { opacity: 1; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::-moz-placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type=button], [type=reset], [type=submit]), ::file-selector-button { -webkit-appearance: button; -moz-appearance: button; appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden=until-found])) { display: none !important; } } @layer utilities { .diff { position: relative; display: grid; width: 100%; overflow: hidden; container-type: inline-size; grid-template-columns: auto 1fr; } .modal { pointer-events: none; position: fixed; inset: calc(0.25rem * 0); z-index: 80; margin: calc(0.25rem * 0); display: grid; width: 100%; height: 100%; justify-items: center; padding: calc(0.25rem * 4); opacity: 0%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 500ms; --tw-duration: 500ms; } .carousel-prev { position: absolute; inset-block: calc(0.25rem * 0); display: inline-flex; height: 100%; width: 10%; align-items: center; justify-content: center; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } &:hover { @media (hover: hover) { color: var(--color-base-content); } } @media (width < 40rem) { width: 18%; } &.disabled { pointer-events: none; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 30%, transparent); } } inset-inline-start: calc(0.25rem * 0); border-start-start-radius: var(--radius-2xl); border-end-start-radius: var(--radius-2xl); } .carousel-next { position: absolute; inset-block: calc(0.25rem * 0); display: inline-flex; height: 100%; width: 10%; align-items: center; justify-content: center; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } &:hover { @media (hover: hover) { color: var(--color-base-content); } } @media (width < 40rem) { width: 18%; } &.disabled { pointer-events: none; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 30%, transparent); } } inset-inline-end: calc(0.25rem * 0); border-start-end-radius: var(--radius-2xl); border-end-end-radius: var(--radius-2xl); } .menu { display: flex; flex-direction: column; flex-wrap: wrap; gap: calc(0.25rem * 0.5); border-radius: var(--radius-box); background-color: var(--color-base-100); padding: calc(0.25rem * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --menu-active-fg: var(--color-primary); --menu-active-bg: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --menu-active-bg: color-mix(in oklab, var(--color-primary) 10%, #0000); } :where(li ul) { position: relative; white-space: nowrap; } :where(li:not(.dropdown) ul) { margin-inline-start: calc(0.25rem * 4); padding-inline-start: calc(0.25rem * 2); &:before { position: absolute; inset-inline-start: calc(0.25rem * 0); top: calc(0.25rem * 3); bottom: calc(0.25rem * 2.5); background-color: var(--color-base-content); opacity: 10%; width: var(--border); content: ""; } } :where(li > .menu-dropdown:not(.menu-dropdown-show)) { display: none; } :where(.menu li:empty) { background-color: var(--color-base-content); opacity: 10%; margin: 0.5rem 1rem; height: 1px; } :where(li:not(.menu-title, .tooltip) > *:not(ul, .collapse, .menu-title, .btn)) { border-radius: var(--radius-field); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2.5); text-align: start; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 200ms; --tw-duration: 200ms; --tw-ease: var(--ease-out); text-wrap: balance; } :where(li:not(.menu-title) > *:not(ul, .collapse, .menu-title, .btn)) { display: grid; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: calc(0.25rem * 2); grid-auto-columns: minmax(auto, max-content) auto max-content; -webkit-user-select: none; -moz-user-select: none; user-select: none; } li.tooltip > * { border-radius: var(--radius-field); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2.5); text-align: start; } :where(.menu li:not(.menu-title, .menu-disabled)) { color: var(--color-base-content); } :where(.menu li:not(.menu-title, .menu-disabled) > *:not(ul, .collapse, .menu-title)) { &:not(.btn).menu-focus, &:not(.btn):focus-visible { cursor: pointer; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } color: var(--color-base-content); --tw-outline-style: none; outline-style: none; } &:hover { cursor: pointer; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } color: var(--color-base-content); --tw-outline-style: none; outline-style: none; } } li:not(.menu-title, .menu-disabled) > :not(ul, .menu-title, .collapse, .btn):active, li:not(.menu-title, .menu-disabled) > :not(ul, .menu-title, .collapse, .btn).menu-active { color: var(--menu-active-fg); background-color: var(--menu-active-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); } li.menu-disabled { pointer-events: none; opacity: 50%; webkit-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } :where(& li) { position: relative; display: flex; flex-shrink: 0; flex-direction: column; flex-wrap: wrap; align-items: stretch; .badge { justify-self: flex-end; } } } .link { --link-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --link-color: color-mix(in oklab, var(--color-base-content) 80%, #0000); } display: inline-block; cursor: pointer; --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); text-decoration-line: underline; color: var(--link-color); &:hover { color: var(--link-color); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--link-color) 80%, #000); } } &:focus { --tw-outline-style: none; outline-style: none; } &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } &.disabled, &[disabled], &:disabled { pointer-events: none; opacity: 50%; } &.link-hover { text-decoration-line: none; @media (hover:hover) { &:hover { @media (hover: hover) { text-decoration-line: underline; } } } } &.link-animated { position: relative; text-decoration-line: none; &::before { content: var(--tw-content); pointer-events: none; position: absolute; inset-inline-start: calc(0.25rem * 0); bottom: calc(0.25rem * 0); height: 1px; width: 100%; background-color: currentColor; transition-property: transform, translate, scale, rotate; transition-timing-function: var(--ease-in-out); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); --tw-content: ""; } } &.link-animated::before { transform-origin: 100% 50%; transform: scale3d(0, 1, 1); } &.link-animated:hover::before { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); } } .range { -webkit-appearance: none; -moz-appearance: none; appearance: none; webkit-appearance: none; --range-color: var(--color-base-content); --range-thumb-border-width: 3px; --range-track-height: 8px; --range-thumb-size: 16px; position: relative; width: 100%; border-radius: calc(infinity * 1px); background-color: transparent; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); height: var(--range-track-height); &::-webkit-slider-runnable-track { width: 100%; border-radius: calc(infinity * 1px); background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } height: var(--range-track-height); } &::-moz-range-track { width: 100%; border-radius: calc(infinity * 1px); background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } height: var(--range-track-height); } &::-webkit-slider-thumb { position: relative; top: calc(1/2 * 100%); --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: calc(infinity * 1px); background-color: var(--color-base-100); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-base-300) 20%, transparent); } -webkit-transition-property: all; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 150ms; --tw-duration: 150ms; --tw-ease: var(--ease-in-out); &:hover { @media (hover: hover) { --tw-scale-x: 125%; --tw-scale-y: 125%; --tw-scale-z: 125%; scale: var(--tw-scale-x) var(--tw-scale-y); } cursor: grab; box-shadow: 0 0 0 2px var(--range-color); } &:active { --tw-scale-x: 125%; --tw-scale-y: 125%; --tw-scale-z: 125%; scale: var(--tw-scale-x) var(--tw-scale-y); cursor: grabbing; box-shadow: 0 0 0 3px var(--range-color); } -webkit-appearance: none; appearance: none; box-sizing: border-box; webkit-appearance: none; color: var(--range-color); border-color: var(--range-color); border-style: solid; border-width: var(--range-thumb-border-width); height: var(--range-thumb-size); width: var(--range-thumb-size); } &::-moz-range-thumb { position: relative; border-radius: calc(infinity * 1px); background-color: var(--color-base-100); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); -moz-transition-property: all; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 150ms; --tw-duration: 150ms; --tw-ease: var(--ease-in-out); top: 50%; color: var(--range-color); box-sizing: border-box; border-color: var(--range-color); border-style: solid; border-width: var(--range-thumb-border-width); height: var(--range-thumb-size); width: var(--range-thumb-size); &:hover { cursor: grab; box-shadow: 0 0 0 2px var(--range-color); } &:active { cursor: grabbing; box-shadow: 0 0 0 3px var(--range-color); } } &:focus { outline: none; } &.disabled { pointer-events: none; opacity: 30%; } &:disabled { pointer-events: none; opacity: 30%; } &[disabled] { pointer-events: none; opacity: 30%; } [dir=rtl] &::-webkit-slider-thumb { transform: scaleX(-1); } [dir=rtl] &::-moz-range-thumb { transform: scaleX(-1); } [dir=rtl] &::-webkit-slider-runnable-track { direction: rtl; } [dir=rtl] &::-moz-range-track { direction: rtl; } } .tab { .tabs-lifted > &:focus-visible { border-end-end-radius: 0; border-end-start-radius: 0; } position: relative; display: inline-flex; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; align-items: center; justify-content: center; text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); webkit-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; height: var(--size); --size: calc(var(--size-field, 0.25rem) * 9.5); --tab-p: 1rem; --tab-bg: var(--color-base-100); --tab-border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tab-border-color: color-mix(in oklab, var(--color-base-content), #0000 90%); } padding-inline: var(--tab-p, 1rem); &:focus, &:focus-visible { --tw-outline-style: none; outline-style: none; } &[disabled] { pointer-events: none; opacity: 40%; } @media (hover: hover) { &[disabled]:hover { pointer-events: none; opacity: 40%; } } .tabs-bordered > & { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } @media (hover:hover) { &:hover { @media (hover: hover) { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } } } @media (hover:hover) { &:hover { @media (hover: hover) { color: var(--color-primary); } } } border-style: solid; border-bottom-width: calc(var(--border, 1px) + 1px); } .tabs-lifted > & { @media (hover:hover) { &:hover { @media (hover: hover) { border-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); } } } } @media (hover:hover) { &:hover { @media (hover: hover) { color: var(--color-primary); } } } border: var(--tab-border, 1px) solid transparent; border-width: 0 0 var(--tab-border, 1px) 0; border-radius: var(--radius-field, 0.375rem); border-bottom-color: var(--tab-border-color); padding-inline-start: var(--tab-p, 1rem); padding-inline-end: var(--tab-p, 1rem); padding-top: var(--tab-border, 1px); } .tabs-lifted > &.tab-active:not([disabled]) { background-color: var(--tab-bg); border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px); border-color: var(--tab-border-color); border-end-start-radius: 0; border-end-end-radius: 0; padding-inline-start: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); padding-inline-end: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); padding-bottom: var(--tab-border, 1px); padding-top: 0; &:before { z-index: 1; content: ""; display: block; position: absolute; width: calc(100% + var(--radius-field, 0.375rem) * 2); height: var(--radius-field, 0.375rem); bottom: 0; background-size: var(--radius-field, 0.375rem); background-position: top left, top right; background-repeat: no-repeat; --tab-grad: calc(69% - var(--tab-border, 1px)); --radius-start: radial-gradient( circle at top left, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); --radius-end: radial-gradient( circle at top right, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); background-image: var(--radius-start), var(--radius-end); } &:first-child:before { background-image: var(--radius-end); background-position: top right; [dir=rtl] & { background-image: var(--radius-start); background-position: top left; } } &:last-child:before { background-image: var(--radius-start); background-position: top left; [dir=rtl] & { background-image: var(--radius-end); background-position: top right; } } } .tabs-xl :where(&) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --size: calc(var(--size-field, 0.25rem) * 14); --tab-p: 1.5rem; } .tabs-lg :where(&) { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --size: calc(var(--size-field, 0.25rem) * 11.5); --tab-p: 1.25rem; } .tabs-md :where(&) { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --size: calc(var(--size-field, 0.25rem) * 9.5); --tab-p: 1rem; } .tabs-sm :where(&) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --size: calc(var(--size-field, 0.25rem) * 7.5); --tab-p: 0.75rem; } .tabs-xs :where(&) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --size: calc(var(--size-field, 0.25rem) * 6); --tab-p: 0.5rem; } } .btn { display: inline-flex; flex-shrink: 0; cursor: pointer; flex-wrap: nowrap; align-items: center; justify-content: center; gap: calc(0.25rem * 2); text-align: center; vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); text-decoration-line: none; webkit-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; @media (prefers-reduced-motion: reduce) { transition-property: none; } padding-inline: var(--btn-p); color: var(--btn-fg); height: var(--size); outline-color: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { outline-color: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, var(--color-base-100)); } transition-property: color, background-color, border-color, box-shadow; transition-timing-function: cubic-bezier(0, 0, 0.96, 1.03); transition-duration: 0.25s; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); background-color: var(--btn-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--btn-noise); border: var(--border) solid var(--btn-border); box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 8%)) inset, var(--btn-shadow); --size: calc(var(--size-field, 0.25rem) * 9.5); --btn-bg: var(--btn-color, var(--color-neutral)); --btn-fg: var(--color-neutral-content); --btn-p: 1rem; --btn-border: var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); } --btn-shadow: 0px 1px 3px 0px var(--color-base-300), 0px 1px 2px -1px var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0px 1px 3px 0px color-mix(in oklab, var(--color-base-300) 40%, #0000), 0px 1px 2px -1px color-mix(in oklab, var(--color-base-300) 40%, #0000); } --btn-noise: var(--fx-noise); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 90%, #000); } } } &:active:hover:not(.btn-active), &:active:focus:not(.btn-active) { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: ease-out; transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)), #000 10%); } outline-width: 2px; outline-style: solid; } &:is(:disabled, [disabled], .btn-disabled) { pointer-events: none; opacity: 50%; --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:is(input[type=checkbox], input[type=radio]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; &::after { content: attr(aria-label); } &:checked { background: var(--color-primary); color: var(--color-primary-content); outline-color: var(--color-primary); --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); isolation: isolate; } } } .pin-input { border-radius: var(--radius-field); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } background-color: var(--color-base-100); text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); &::-moz-placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } height: var(--size); width: var(--size); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; --size: calc(var(--size-field, 0.25rem) * 9.5); &:hover:not(:focus, :focus-within) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } } &:focus, &:focus-within { border-color: var(--color-primary); --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-primary) 30%, #0000); } outline: 1px solid var(--color-primary); isolation: isolate; } &.pin-input-underline { border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } background-color: transparent; &:focus, &:focus-within { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; border-color: var(--color-primary); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-outline-style: none; outline-style: none; } } &.disabled, &:disabled, &[disabled] { pointer-events: none; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); } color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } &::-moz-placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } } } .dropdown-item { clear: both; display: flex; width: 100%; align-items: center; -moz-column-gap: calc(0.25rem * 2); column-gap: calc(0.25rem * 2); border-radius: var(--radius-field); background-color: transparent; padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2.5); color: var(--color-base-content); text-decoration-line: none; text-decoration-thickness: 0px; text-align: inherit; &:hover, &:focus, &:focus-within, &:focus-visible { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } --tw-outline-style: none; outline-style: none; } &.dropdown-disabled, &:disabled, &[disabled] { pointer-events: none; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 5%, transparent); } color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } & > .label { padding-block: calc(0.25rem * 1); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } &-text { color: var(--color-base-content); } } &:active { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } color: var(--color-primary); } } .loading { pointer-events: none; display: inline-block; aspect-ratio: 1 / 1; background-color: currentColor; vertical-align: middle; width: calc(var(--size-selector, 0.25rem) * 6); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .accordion-toggle { width: 100%; cursor: pointer; padding-inline: calc(0.25rem * 5); padding-block: calc(0.25rem * 4); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); &:disabled { pointer-events: none; opacity: 50%; } } .disabled { &.carousel-prev { pointer-events: none; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 30%, transparent); } } &.carousel-next { pointer-events: none; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 30%, transparent); } } } .disabled { &.range { pointer-events: none; opacity: 30%; } } .pointer-events-none { pointer-events: none; } .tooltip-content { visibility: hidden; position: absolute; display: inline-block; padding: calc(0.25rem * 2); opacity: 0%; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); width: -moz-max-content; width: max-content; z-index: 20; } .collapse { visibility: collapse; } .collapse { &:not(td):not(tr):not(colgroup) { visibility: visible; } } .collapse\! { visibility: collapse !important; } .collapse\! { &:not(td):not(tr):not(colgroup) { visibility: visible !important; } } .invisible { visibility: hidden; } .visible { visibility: visible; } .indicator { position: relative; display: inline-flex; width: -moz-max-content; width: max-content; :where(.indicator-item) { z-index: 1; position: absolute; white-space: nowrap; top: var(--inidicator-t, 0); bottom: var(--inidicator-b, auto); inset-inline-start: var(--inidicator-s, auto); inset-inline-end: var(--inidicator-e, 0); translate: var(--inidicator-x, 50%) var(--indicator-y, -50%); [dir=rtl] & { --inidicator-x: -50%; } } } .tree-view-space { position: relative; margin-inline-start: calc(0.25rem * 4); padding-inline-start: calc(0.25rem * 4); &::before { content: var(--tw-content); position: absolute; inset-inline-start: calc(0.25rem * 0); top: calc(0.25rem * 0); margin-inline-start: calc(0.25rem * -0.5); height: 100%; width: calc(0.25rem * 0.5); background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } } .chat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: calc(0.25rem * 4); column-gap: calc(0.25rem * 4); padding-block: calc(0.25rem * 1); .chat-avatar { grid-row: span 2 / span 2; align-self: flex-end; } .chat-header { grid-row-start: 1; margin-bottom: calc(0.25rem * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .chat-footer { grid-row-start: 3; margin-top: calc(0.25rem * 1); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .chat-bubble { position: relative; display: block; width: -moz-fit-content; width: fit-content; border-radius: var(--radius-box); padding: calc(0.25rem * 3); max-width: 90%; min-height: 2.75rem; min-width: 2.75rem; &:before { position: absolute; bottom: calc(0.25rem * 0); width: calc(0.25rem * 4); height: calc(0.25rem * 4); background-color: inherit; content: ""; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } } &.chat-receiver { place-items: start; grid-template-columns: auto 1fr; .chat-header { grid-column-start: 2; } .chat-footer { grid-column-start: 2; } .chat-avatar { grid-column-start: 1; } .chat-bubble { grid-column-start: 2; border-end-start-radius: 0; background-color: var(--color-base-100); color: var(--color-base-content); &:before { inset-inline-start: -0.749rem; -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e"); } [dir=rtl] &:before { -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e"); } } } &.chat-sender { place-items: end; grid-template-columns: 1fr auto; .chat-header { grid-column-start: 1; } .chat-footer { grid-column-start: 1; } .chat-avatar { grid-column-start: 2; } .chat-bubble { grid-column-start: 1; border-end-end-radius: 0; background-color: var(--color-primary); text-align: end; color: var(--color-primary-content); &:before { inset-inline-start: 99.9%; -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e"); } [dir=rtl] &:before { -webkit-mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e"); } } } } .switch { border: var(--border) solid #0000; color: var(--color-base-100); position: relative; display: inline-grid; flex-shrink: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; place-content: center; border-radius: calc(infinity * 1px); vertical-align: middle; webkit-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; @media print { outline: .25rem solid; } grid-template-columns: 0fr 1fr 1fr; padding: var(--toggle-p); box-shadow: 0 1px currentColor inset; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset; } background-color: var(--input-color); transition: color 0.3s, grid-template-columns 0.2s; --input-color: var(--color-neutral); --toggle-p: 0.1875rem; --size: calc(var(--size-selector, 0.25rem) * 6); width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2); height: var(--size); &:before { position: relative; inset-inline-start: calc(0.25rem * 0); grid-column-start: 2; grid-row-start: 1; aspect-ratio: 1 / 1; height: 100%; border-radius: calc(infinity * 1px); background-color: currentColor; @media print { outline: .25rem solid; } @media print { outline-offset: -1rem; } translate: 0; --tw-content: ""; content: var(--tw-content); transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s; box-shadow: 0 -1px oklch(59.99% 0 0 / calc(var(--depth) * 0.08)) inset, 0 8px 0 -4px oklch(59.99% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px 2px 0 oklch(0% 0 0 / 0.2); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); @media (forced-colors: active) { outline-style: var(--tw-outline-style); outline-width: 1px; outline-offset: calc(1px * -1); } } &:focus-visible, &:has(:focus-visible) { outline: 2px solid var(--input-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { outline: 2px solid color-mix(in oklab, var(--input-color, var(--color-neutral)) 30%, #0000); } outline-offset: 0px; } &:checked, &[aria-checked=true], &:has(> input:checked) { grid-template-columns: 1fr 1fr 0fr; background-color: var(--input-color); &:before { background-color: currentColor; @starting-style { opacity: 0; } } } &:indeterminate { grid-template-columns: 0.5fr 1fr 0.5fr; } &:disabled { cursor: not-allowed; opacity: 40%; &:before { background-color: transparent; } } } .table { position: relative; width: 100%; overflow-x: hidden; overflow-y: auto; border-radius: var(--radius-box); text-align: left; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { text-align: right; } tr.row-hover { &, &:nth-child(even) { &:hover { @media (hover: hover) { background-color: var(--color-base-200); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200) 80%, transparent); } } } } } tr.row-active { &, &:nth-child(even) { background-color: var(--color-base-200); } } :where(th, td) { padding-inline: calc(0.25rem * 5); padding-block: calc(0.25rem * 3); vertical-align: middle; text-wrap: nowrap; } :where(thead, tfoot) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); white-space: nowrap; color: var(--color-base-content); text-transform: uppercase; letter-spacing: 1px; } :where(th) { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } :where(.table-pin-rows thead tr) { position: sticky; top: calc(0.25rem * 0); z-index: 1; background-color: var(--color-base-100); } :where(.table-pin-rows tfoot tr) { position: sticky; bottom: calc(0.25rem * 0); z-index: 1; background-color: var(--color-base-100); } :where(.table-pin-cols tr th) { position: sticky; right: calc(0.25rem * 0); left: calc(0.25rem * 0); background-color: var(--color-base-100); } :where(thead tr) { border-bottom: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 25%, #0000); } } :where(tbody tr:not(:last-child)) { border-bottom: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 10%, #0000); } } :where(tfoot) { border-top: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 25%, #0000); } } } .table\! { position: relative !important; width: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; border-radius: var(--radius-box) !important; text-align: left !important; font-size: var(--text-sm) !important; line-height: var(--tw-leading, var(--text-sm--line-height)) !important; &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { text-align: right !important; } tr.row-hover { &, &:nth-child(even) { &:hover { @media (hover: hover) { background-color: var(--color-base-200) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200) 80%, transparent) !important; } } } } } tr.row-active { &, &:nth-child(even) { background-color: var(--color-base-200) !important; } } :where(th, td) { padding-inline: calc(0.25rem * 5) !important; padding-block: calc(0.25rem * 3) !important; vertical-align: middle !important; text-wrap: nowrap !important; } :where(thead, tfoot) { font-size: var(--text-sm) !important; line-height: var(--tw-leading, var(--text-sm--line-height)) !important; white-space: nowrap !important; color: var(--color-base-content) !important; text-transform: uppercase !important; letter-spacing: 1px !important; } :where(th) { --tw-font-weight: var(--font-weight-medium) !important; font-weight: var(--font-weight-medium) !important; } :where(.table-pin-rows thead tr) { position: sticky !important; top: calc(0.25rem * 0) !important; z-index: 1 !important; background-color: var(--color-base-100) !important; } :where(.table-pin-rows tfoot tr) { position: sticky !important; bottom: calc(0.25rem * 0) !important; z-index: 1 !important; background-color: var(--color-base-100) !important; } :where(.table-pin-cols tr th) { position: sticky !important; right: calc(0.25rem * 0) !important; left: calc(0.25rem * 0) !important; background-color: var(--color-base-100) !important; } :where(thead tr) { border-bottom: var(--border) solid var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 25%, #0000) !important; } } :where(tbody tr:not(:last-child)) { border-bottom: var(--border) solid var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 10%, #0000) !important; } } :where(tfoot) { border-top: var(--border) solid var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 25%, #0000) !important; } } } .avatar { position: relative; display: inline-flex; vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); & > div { display: block; aspect-ratio: 1 / 1; overflow: hidden; } img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } &.avatar-placeholder { & > div { display: flex; align-items: center; justify-content: center; } } &.avatar-online-top { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-success); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; top: 3%; right: 3%; } } &.avatar-offline-top { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-base-200); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; top: 3%; right: 3%; } } &.avatar-busy-top { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-error); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; top: 3%; right: 3%; } } &.avatar-away-top { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-warning); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; top: 3%; right: 3%; } } &.avatar-online-bottom { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-success); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; bottom: 3%; right: 3%; } } &.avatar-offline-bottom { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-base-200); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; bottom: 3%; right: 3%; } } &.avatar-busy-bottom { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-error); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; bottom: 3%; right: 3%; } } &.avatar-away-bottom { &:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: calc(infinity * 1px); background-color: var(--color-warning); outline-style: var(--tw-outline-style); outline-width: 1px; outline-width: 2px; outline-color: var(--color-base-100); width: 20%; height: 20%; bottom: 3%; right: 3%; } } } .select { position: relative; display: inline-flex; width: 100%; flex-shrink: 1; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--color-base-100); padding-inline-start: calc(0.25rem * 3); padding-inline-end: calc(0.25rem * 10); vertical-align: middle; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); webkit-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; height: var(--size); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); background-image: url("data:image/svg+xml;utf8,"); background-size: 1.3em; background-position: calc(100% - 0.5rem) center; background-repeat: no-repeat; text-overflow: ellipsis; border: var(--border) solid #0000; border-color: var(--input-color); --input-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000); } --size: calc(var(--size-field, 0.25rem) * 9.5); [dir=rtl] & { background-position: calc(0% + 1.3em) center; } select { margin-inline-end: calc(0.25rem * -10); height: 100%; width: calc(100% + 2.75rem); -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-inline-start: calc(0.25rem * 3); padding-inline-end: calc(0.25rem * 10); background-color: transparent; border-style: none; &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; } } &[multiple] { background-image: none; } &:focus, &:focus-within { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --input-color: var(--color-primary); --tw-shadow-color: var(--input-color); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000); } outline: 1px solid var(--input-color); border-color: var(--input-color); isolation: isolate; } &:has(> select[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-style: var(--tw-border-style); border-width: 0px; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } &::-moz-placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } &:has(> select[disabled]) > select[disabled] { cursor: not-allowed; } .input > & { height: auto; border-style: var(--tw-border-style); border-width: 0px; &:focus, &:focus-within { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); outline-style: var(--tw-outline-style); outline-width: 0px; } } &:has(> .select-floating) select { &::-moz-placeholder { color: transparent; } &::placeholder { color: transparent; } &:focus { &::-moz-placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } } } .select\! { position: relative !important; display: inline-flex !important; width: 100% !important; flex-shrink: 1 !important; cursor: pointer !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-color: var(--color-base-100) !important; padding-inline-start: calc(0.25rem * 3) !important; padding-inline-end: calc(0.25rem * 10) !important; vertical-align: middle !important; font-size: var(--text-base) !important; line-height: var(--tw-leading, var(--text-base--line-height)) !important; color: var(--color-base-content) !important; webkit-user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; height: var(--size) !important; border-start-start-radius: var(--join-ss, var(--radius-field)) !important; border-start-end-radius: var(--join-se, var(--radius-field)) !important; border-end-start-radius: var(--join-es, var(--radius-field)) !important; border-end-end-radius: var(--join-ee, var(--radius-field)) !important; background-image: url("data:image/svg+xml;utf8,") !important; background-size: 1.3em !important; background-position: calc(100% - 0.5rem) center !important; background-repeat: no-repeat !important; text-overflow: ellipsis !important; border: var(--border) solid #0000 !important; border-color: var(--input-color) !important; --input-color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000) !important; } --size: calc(var(--size-field, 0.25rem) * 9.5) !important; [dir=rtl] & { background-position: calc(0% + 1.3em) center !important; } select { margin-inline-end: calc(0.25rem * -10) !important; height: 100% !important; width: calc(100% + 2.75rem) !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; padding-inline-start: calc(0.25rem * 3) !important; padding-inline-end: calc(0.25rem * 10) !important; background-color: transparent !important; border-style: none !important; &:focus, &:focus-within { --tw-outline-style: none !important; outline-style: none !important; } } &[multiple] { background-image: none !important; } &:focus, &:focus-within { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)) !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; --input-color: var(--color-primary) !important; --tw-shadow-color: var(--input-color) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000) !important; } outline: 1px solid var(--input-color) !important; border-color: var(--input-color) !important; isolation: isolate !important; } &:has(> select[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed !important; border-style: var(--tw-border-style) !important; border-width: 0px !important; border-color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent) !important; } background-color: var(--color-neutral) !important; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent) !important; } color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) !important; } &::-moz-placeholder { color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) !important; } } &::placeholder { color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) !important; } } } &:has(> select[disabled]) > select[disabled] { cursor: not-allowed !important; } .input > & { height: auto !important; border-style: var(--tw-border-style) !important; border-width: 0px !important; &:focus, &:focus-within { --tw-shadow: 0 0 #0000 !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; outline-style: var(--tw-outline-style) !important; outline-width: 0px !important; } } &:has(> .select-floating) select { &::-moz-placeholder { color: transparent !important; } &::placeholder { color: transparent !important; } &:focus { &::-moz-placeholder { color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) !important; } } &::placeholder { color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) !important; } } } } } .drawer { position: fixed; z-index: 80; display: flex; width: 100%; height: 100%; max-width: calc(0.25rem * 96); flex-direction: column; justify-content: space-between; background-color: var(--color-base-100); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: calc(0.25rem * 6); } .drawer-title { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); } .drawer-body { flex-grow: 1; overflow-x: hidden; overflow-y: auto; padding-inline: calc(0.25rem * 6); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); &::-webkit-scrollbar { width: calc(0.25rem * 2); } &:last-child { padding-bottom: calc(0.25rem * 6); } } .drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: calc(0.25rem * 3); padding: calc(0.25rem * 6); } } .swap { position: relative; display: inline-grid; cursor: pointer; place-content: center; vertical-align: middle; webkit-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; } > * { grid-column-start: 1; grid-row-start: 1; transition-property: transform, rotate, opacity; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .swap-on, .swap-indeterminate, input:indeterminate ~ .swap-on { opacity: 0%; } input:is(:checked, :indeterminate) { & ~ .swap-off { opacity: 0%; } } input:checked ~ .swap-on, input:indeterminate ~ .swap-indeterminate { opacity: 100%; } } .checkbox { position: relative; flex-shrink: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: var(--radius-selector); padding: calc(0.25rem * 1); vertical-align: middle; color: var(--color-neutral-content); border: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000); } --input-color: var(--color-neutral); box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000; transition: background-color 0.2s, box-shadow 0.2s; --size: calc(var(--size-selector, 0.25rem) * 6); width: var(--size); height: var(--size); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); &:before { --tw-content: ""; content: var(--tw-content); display: block; width: 100%; height: 100%; rotate: 45deg; background-color: currentColor; opacity: 0%; transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s; transition-delay: 0.1s; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; font-size: 1rem; line-height: 0.75; } &:focus-visible { outline: 2px solid var(--input-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { outline: 2px solid color-mix(in oklab, var(--input-color, var(--color-neutral)) 30%, #0000); } outline-offset: 0px; } &:checked, &[aria-checked=true] { background-color: var(--input-color, #0000); border-color: var(--input-color, #0000); box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 2px 0 var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 2px 0 color-mix(in oklab, var(--color-base-300) 20%, #0000); } &:before { clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); opacity: 100%; } @media (forced-colors: active) { &:before { rotate: 0deg; background-color: transparent; --tw-content: "\2714\fe0e"; clip-path: none; } } @media print { &:before { rotate: 0deg; background-color: transparent; --tw-content: "\2714\fe0e"; clip-path: none; } } } &:indeterminate { background-color: var(--color-neutral); &:before { rotate: 0deg; opacity: 100%; translate: 0 -35%; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); } } &:disabled { cursor: not-allowed; opacity: 40%; } } .radio { position: relative; flex-shrink: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: calc(infinity * 1px); padding: calc(0.25rem * 1); vertical-align: middle; border: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000); } box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset; --size: calc(var(--size-selector, 0.25rem) * 6); width: var(--size); height: var(--size); color: var(--input-color, var(--color-neutral)); &:before { display: block; width: 100%; height: 100%; border-radius: calc(infinity * 1px); --tw-content: ""; content: var(--tw-content); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); } &:focus-visible { outline: 2px solid var(--input-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { outline: 2px solid color-mix(in oklab, var(--input-color, var(--color-neutral)) 30%, #0000); } outline-offset: 0px; } &:checked, &[aria-checked=true] { animation: radio 0.2s ease-out; border-color: currentColor; background-color: var(--color-base-100); box-shadow: 0 1px 2px 0 var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 1px 2px 0 color-mix(in oklab, var(--color-base-300) 30%, #0000); } &:before { background-color: currentColor; box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); } @media (forced-colors: active) { &:before { outline-style: var(--tw-outline-style); outline-width: 1px; outline-offset: calc(1px * -1); } } @media print { &:before { outline: 0.25rem solid; outline-offset: -1rem; } } } &:disabled { cursor: not-allowed; opacity: 20%; } } .carousel { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-2xl); } .alert { position: relative; width: 100%; border-radius: var(--radius-box); padding: calc(0.25rem * 4); color: var(--color-neutral-content); text-align: start; background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--alert-bg); border: var(--border) solid var(--alert-border); box-shadow: 0 0.1875rem 0 -0.125rem oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset; --alert-bg: var(--alert-color, var(--color-neutral)); --alert-border: var(--alert-color, var(--color-neutral)); &.alert-outline { color: var(--alert-color, var(--color-neutral)); --alert-bg: transparent; box-shadow: none; background-image: none; } &.alert-soft { color: var(--alert-color, var(--color-neutral)); --alert-bg: var(--alert-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --alert-bg: color-mix(in oklab, var(--alert-color, var(--color-neutral)) 10%, var(--color-base-100)); } box-shadow: none; background-image: none; } } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .drawer-bottom { inset-inline: calc(0.25rem * 0); bottom: calc(0.25rem * 0); max-height: calc(0.25rem * 60); max-width: none; --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); } .inset-y-0 { inset-block: calc(var(--spacing) * 0); } .start { inset-inline-start: var(--spacing); } .start\! { inset-inline-start: var(--spacing) !important; } .end { inset-inline-end: var(--spacing); } .end-3 { inset-inline-end: calc(var(--spacing) * 3); } .-top-1 { top: calc(var(--spacing) * -1); } .top-0 { top: calc(var(--spacing) * 0); } .top-1 { top: calc(var(--spacing) * 1); } .top-3 { top: calc(var(--spacing) * 3); } .top-full { top: 100%; } .-right-1 { right: calc(var(--spacing) * -1); } .bottom-full { bottom: 100%; } .left-0 { left: calc(var(--spacing) * 0); } .left-1 { left: calc(var(--spacing) * 1); } .input { display: inline-flex; width: 100%; flex-shrink: 1; cursor: text; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--color-base-100); padding-inline: calc(0.25rem * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-base-content); &::-moz-placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &:focus-visible { --tw-outline-style: none; outline-style: none; } border: var(--border) solid #0000; height: var(--size); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-color: var(--input-color); --input-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000); } --size: calc(var(--size-field, 0.25rem) * 9.5); &:hover:not(:focus, :focus-within), &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } } &:where(input) { display: inline-block; } :where(input:not([type=checkbox]):not([type=radio])) { display: inline-block; height: 100%; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: none; &:focus, &:focus-within, &:focus-visible { --tw-outline-style: none; outline-style: none; } } &:focus, &:focus-within { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --input-color: var(--color-primary); --tw-shadow-color: var(--input-color); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000); } outline: 1px solid var(--input-color); isolation: isolate; } &:has(> input[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-style: var(--tw-border-style); border-width: 0px; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } box-shadow: none; } &:has(> input[disabled]) > input[disabled] { cursor: not-allowed; } &::-webkit-date-and-time-value { text-align: inherit; } &[type=number] { &::-webkit-inner-spin-button { margin-block: calc(0.25rem * -3); margin-inline-end: calc(0.25rem * -3); } } &:has(> .input-floating) input { &::-moz-placeholder { color: transparent; } &::placeholder { color: transparent; } &:focus { &::-moz-placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } } } .textarea { display: inline-flex; min-height: calc(0.25rem * 20); width: 100%; flex-shrink: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: var(--radius-field); background-color: var(--color-base-100); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); color: var(--color-base-content); &::-moz-placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &:hover { @media (hover: hover) { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } } } &:focus-visible { --tw-outline-style: none; outline-style: none; } border: var(--border) solid #0000; border-color: var(--input-color); --input-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000); } :where(textarea) { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: none; &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; } } &:focus, &:focus-within { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --input-color: var(--color-primary); --tw-shadow-color: var(--input-color); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000); } outline: 1px solid var(--input-color); border-color: var(--input-color); isolation: isolate; } &:has(> textarea[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } &::-moz-placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } } &:has(> textarea[disabled]) > textarea[disabled] { cursor: not-allowed; } &:has(> textarea) { padding: calc(0.25rem * 0); textarea { height: auto; min-height: calc(0.25rem * 20); width: 100%; &:first-child { padding-block: calc(0.25rem * 2); padding-inline-start: calc(0.25rem * 4); } &:last-child { padding-block: calc(0.25rem * 2); padding-inline-end: calc(0.25rem * 4); } } } &:has(> .textarea-floating) { padding: calc(0.25rem * 0); :where(.textarea-floating:first-child) > textarea { padding-block: calc(0.25rem * 2); padding-inline-start: calc(0.25rem * 4); } :where(.textarea-floating:last-child) > textarea { padding-block: calc(0.25rem * 2); padding-inline-end: calc(0.25rem * 4); } :where(.textarea-floating:last-child) .textarea-floating-label { margin-inline-start: calc(0.25rem * 0); } & * > textarea { width: 100%; height: 100%; min-height: calc(0.25rem * 20); } } &:has(> .textarea-floating) textarea { &::-moz-placeholder { color: transparent; } &::placeholder { color: transparent; } &:focus { &::-moz-placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } } } } .stack { display: inline-grid; place-items: center; align-items: flex-end; & > * { grid-column-start: 1; grid-row-start: 1; height: 100%; width: 100%; opacity: 60%; transform: translateY(14%) scale(0.9); z-index: 1; } & > *:nth-child(2) { opacity: 80%; transform: translateY(7%) scale(0.95); z-index: 2; } & > *:nth-child(1) { opacity: 100%; transform: translateY(0) scale(1) translateX(0); z-index: 3; } } .dropdown-menu { z-index: 10; margin-top: calc(0.25rem * 2); :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse))); } border-radius: var(--radius-box); background-color: var(--color-base-100); padding: calc(0.25rem * 2); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); text-wrap: nowrap; opacity: 0%; --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-base-300) 20%, transparent); } transition-property: opacity, margin; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; } .z-10 { z-index: 10; } .order-2 { order: 2; } .order-3 { order: 3; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .stat { display: inline-grid; width: 100%; -moz-column-gap: calc(0.25rem * 4); column-gap: calc(0.25rem * 4); row-gap: calc(0.25rem * 1); padding-inline: calc(0.25rem * 6); padding-block: calc(0.25rem * 4); grid-template-columns: repeat(1, 1fr); border-color: inherit; .stat-figure { grid-column-start: 2; grid-row: span 3 / span 3; grid-row-start: 1; place-self: center; justify-self: flex-end; } .stat-title { grid-column-start: 1; white-space: nowrap; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .stat-value { grid-column-start: 1; font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); white-space: nowrap; color: var(--color-base-content); } .stat-desc { grid-column-start: 1; font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); white-space: nowrap; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } .stat-actions { grid-column-start: 1; margin-top: calc(0.25rem * 3); white-space: nowrap; } } .stat\! { display: inline-grid !important; width: 100% !important; -moz-column-gap: calc(0.25rem * 4) !important; column-gap: calc(0.25rem * 4) !important; row-gap: calc(0.25rem * 1) !important; padding-inline: calc(0.25rem * 6) !important; padding-block: calc(0.25rem * 4) !important; grid-template-columns: repeat(1, 1fr) !important; border-color: inherit !important; .stat-figure { grid-column-start: 2 !important; grid-row: span 3 / span 3 !important; grid-row-start: 1 !important; place-self: center !important; justify-self: flex-end !important; } .stat-title { grid-column-start: 1 !important; white-space: nowrap !important; color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent) !important; } } .stat-value { grid-column-start: 1 !important; font-size: var(--text-3xl) !important; line-height: var(--tw-leading, var(--text-3xl--line-height)) !important; --tw-font-weight: var(--font-weight-semibold) !important; font-weight: var(--font-weight-semibold) !important; white-space: nowrap !important; color: var(--color-base-content) !important; } .stat-desc { grid-column-start: 1 !important; font-size: var(--text-xs) !important; line-height: var(--tw-leading, var(--text-xs--line-height)) !important; white-space: nowrap !important; color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) !important; } } .stat-actions { grid-column-start: 1 !important; margin-top: calc(0.25rem * 3) !important; white-space: nowrap !important; } } .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } } .m-4 { margin: calc(var(--spacing) * 4); } .filter { display: flex; flex-wrap: wrap; input[type=radio] { width: auto; } input { overflow: hidden; opacity: 100%; scale: 1; transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s; &:not(:last-child) { margin-inline-end: calc(0.25rem * 1); } &.filter-reset { aspect-ratio: 1 / 1; &::after { content: "\d7"; } } } &:not(:has(input:checked:not(.filter-reset))) { .filter-reset, input[type=reset] { scale: 0; border-width: 0; margin-inline: calc(0.25rem * 0); width: calc(0.25rem * 0); padding-inline: calc(0.25rem * 0); opacity: 0%; } } &:has(input:checked:not(.filter-reset)) { input:not(:checked, .filter-reset, input[type=reset]) { scale: 0; border-width: 0; margin-inline: calc(0.25rem * 0); width: calc(0.25rem * 0); padding-inline: calc(0.25rem * 0); opacity: 0%; } } } .mx-auto { margin-inline: auto; } .input-lg { padding-inline: calc(0.25rem * 4); font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --size: calc(var(--size-field, 0.25rem) * 11.5); &[type=number] { &::-webkit-inner-spin-button { margin-block: calc(0.25rem * -3); margin-inline-end: calc(0.25rem * -3); } } } .accordion-item { .accordion-shadow :where(&) { margin-block: calc(0.25rem * 2); border-radius: var(--radius-box); background-color: var(--color-base-100); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-base-300) 20%, transparent); } .accordion-item:first-of-type { margin-top: calc(0.25rem * 0); } .accordion-item:last-of-type { margin-bottom: calc(0.25rem * 0); } & > *:first-child { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); } & > *:last-child { border-bottom-right-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box); } } } .\!ms-auto { margin-inline-start: auto !important; } .ms-2 { margin-inline-start: calc(var(--spacing) * 2); } .input { &::file-selector-button { margin-inline-end: calc(0.25rem * 4); display: inline-flex; height: 100%; flex-shrink: 0; cursor: pointer; flex-wrap: wrap; align-items: center; justify-content: center; border-style: var(--tw-border-style); border-width: 0px; background-color: var(--color-primary); padding-inline: calc(0.25rem * 4); text-align: center; font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-leading: 1; --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-primary-content); text-transform: uppercase; text-decoration-line: none; webkit-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; --input-color: var(--color-primary); &.input-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } &.input-md { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } &.input-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } &.input-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } &[type=file] { overflow: hidden; padding-inline-start: calc(0.25rem * 0); } .input-floating &::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-inline-end: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000); } outline: none; } } .\!me-1\.5 { margin-inline-end: calc(var(--spacing) * 1.5) !important; } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mr-1 { margin-right: calc(var(--spacing) * 1); } .mr-2 { margin-right: calc(var(--spacing) * 2); } .mr-4 { margin-right: calc(var(--spacing) * 4); } .footer { display: grid; width: 100%; grid-auto-flow: row; place-items: start; -moz-column-gap: calc(0.25rem * 4); column-gap: calc(0.25rem * 4); row-gap: calc(0.25rem * 10); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } @media (width >= 48rem) { grid-auto-flow: column; } & > * { display: grid; place-items: start; gap: calc(0.25rem * 3); } .footer-title { margin-bottom: calc(0.25rem * 1); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-base-content); } &.footer-center { place-items: center; text-align: center; @media (width >= 48rem) { grid-auto-flow: row dense; } & > * { place-items: center; } } :where(.link) { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } } .mb-0\.5 { margin-bottom: calc(var(--spacing) * 0.5); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-4\! { margin-bottom: calc(var(--spacing) * 4) !important; } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .-ml-2 { margin-left: calc(var(--spacing) * -2); } .-ml-4 { margin-left: calc(var(--spacing) * -4); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-auto { margin-left: auto; } .status { display: inline-block; aspect-ratio: 1 / 1; width: calc(0.25rem * 2.5); height: calc(0.25rem * 2.5); border-radius: calc(infinity * 1px); background-color: var(--color-neutral); background-position: center; background-repeat: no-repeat; vertical-align: middle; color: var(--color-neutral); background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000); box-shadow: 0 2px 3px -1px currentColor; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); } } .status\! { display: inline-block !important; aspect-ratio: 1 / 1 !important; width: calc(0.25rem * 2.5) !important; height: calc(0.25rem * 2.5) !important; border-radius: calc(infinity * 1px) !important; background-color: var(--color-neutral) !important; background-position: center !important; background-repeat: no-repeat !important; vertical-align: middle !important; color: var(--color-neutral) !important; background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000) !important; box-shadow: 0 2px 3px -1px currentColor !important; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000) !important; } } .divider { display: flex; width: 100%; align-items: center; align-self: stretch; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); white-space: nowrap; &:before, &:after { content: ""; height: 1px; width: 100%; flex-grow: 1; border-inline-end-style: var(--tw-border-style); border-inline-end-width: 0px; border-top-style: var(--tw-border-style); border-top-width: 1px; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } &:not(:empty) { gap: calc(0.25rem * 4); } } .badge { display: inline-flex; align-items: center; justify-content: center; gap: calc(0.25rem * 1.5); border-radius: var(--radius-selector); text-align: center; vertical-align: middle; font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); border: var(--border) solid var(--badge-border); padding-inline: calc(0.25rem * 3 - var(--border)); width: -moz-fit-content; width: fit-content; color: var(--badge-fg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-border: var(--badge-color, var(--color-neutral)); --badge-bg: var(--badge-color, var(--color-neutral)); --badge-fg: var(--color-neutral-content); --size: calc(var(--size-selector, 0.25rem) * 6); height: var(--size); &.badge-outline { --badge-fg: var(--badge-color, var(--color-neutral)); --badge-bg: transparent; background-image: none; } &.badge-soft { --badge-border: none; --badge-fg: var(--badge-color, var(--color-neutral)); --badge-bg: var(--badge-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --badge-bg: color-mix(in oklab, var(--badge-color, var(--color-neutral)) 10%, var(--color-base-100)); } background-image: none; } } .progress { display: flex; height: calc(0.25rem * 1.5); width: 100%; overflow: hidden; border-radius: var(--radius-box); background-color: var(--color-base-200); } .icon-\[material-symbols--order-approve-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m17.275 20.25l3.475-3.45l-1.05-1.05l-2.425 2.375l-.975-.975l-1.05 1.075zM6 9h12V7H6zm12 14q-2.075 0-3.537-1.463T13 18t1.463-3.537T18 13t3.538 1.463T23 18t-1.463 3.538T18 23M3 22V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v6.675q-.475-.225-.975-.375T19 11.075V5H5v14.05h6.075q.125.775.388 1.475t.687 1.325L12 22l-1.5-1.5L9 22l-1.5-1.5L6 22l-1.5-1.5zm3-5h5.075q.075-.525.225-1.025t.375-.975H6zm0-4h7.1q.95-.925 2.213-1.463T18 11H6zm-1 6.05V5z'/%3E%3C/svg%3E"); } .icon-\[mdi--account-off-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m2.75 7l1.28-1.25L13.26 15L20 21.72L18.73 23l-3-3H4v-3c0-1.86 2.61-3.08 5.09-3.64zM20 17v2.18l-1.9-1.9V17c0-.26-.5-.65-1.3-1L14 13.18c2.71.45 6 1.73 6 3.82M5.9 17v1.1h7.93L10.72 15c-2.53.3-4.82 1.45-4.82 2M12 4a4 4 0 0 1 4 4c0 1.95-1.4 3.58-3.25 3.93L8.07 7.25A4.004 4.004 0 0 1 12 4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); } .icon-\[mdi--book-open-variant-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 21.5c-1.35-.85-3.8-1.5-5.5-1.5c-1.65 0-3.35.3-4.75 1.05c-.1.05-.15.05-.25.05c-.25 0-.5-.25-.5-.5V6c.6-.45 1.25-.75 2-1c1.11-.35 2.33-.5 3.5-.5c1.95 0 4.05.4 5.5 1.5c1.45-1.1 3.55-1.5 5.5-1.5c1.17 0 2.39.15 3.5.5c.75.25 1.4.55 2 1v14.6c0 .25-.25.5-.5.5c-.1 0-.15 0-.25-.05c-1.4-.75-3.1-1.05-4.75-1.05c-1.7 0-4.15.65-5.5 1.5m-1-14c-1.36-.6-3.16-1-4.5-1c-1.2 0-2.4.15-3.5.5v11.5c1.1-.35 2.3-.5 3.5-.5c1.34 0 3.14.4 4.5 1zM13 19c1.36-.6 3.16-1 4.5-1c1.2 0 2.4.15 3.5.5V7c-1.1-.35-2.3-.5-3.5-.5c-1.34 0-3.14.4-4.5 1zm1-2.65c.96-.35 2.12-.52 3.5-.52c1.04 0 1.88.08 2.5.24v-1.5a13.9 13.9 0 0 0-6 .19zm0-2.66c.96-.35 2.12-.53 3.5-.53c1.04 0 1.88.08 2.5.24v-1.5c-.87-.16-1.71-.23-2.5-.23c-1.28 0-2.45.15-3.5.45zM14 11c.96-.33 2.12-.5 3.5-.5c.91 0 1.76.09 2.5.28V9.23c-.87-.15-1.71-.23-2.5-.23c-1.32 0-2.5.15-3.5.46z'/%3E%3C/svg%3E"); } .icon-\[mdi--cart-check\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9 20c0 1.1-.9 2-2 2s-2-.9-2-2s.9-2 2-2s2 .9 2 2m8-2c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2m-9.8-3.2v-.1l.9-1.7h7.4c.7 0 1.4-.4 1.7-1l3.9-7l-1.7-1l-3.9 7h-7L4.3 2H1v2h2l3.6 7.6L5.2 14c-.1.3-.2.6-.2 1c0 1.1.9 2 2 2h12v-2H7.4c-.1 0-.2-.1-.2-.2M18 2.8l-1.4-1.4l-4.8 4.8l-2.6-2.6L7.8 5l4 4z'/%3E%3C/svg%3E"); } .icon-\[mdi--cart-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17 18a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2c0-1.11.89-2 2-2M1 2h3.27l.94 2H20a1 1 0 0 1 1 1c0 .17-.05.34-.12.5l-3.58 6.47c-.34.61-1 1.03-1.75 1.03H8.1l-.9 1.63l-.03.12a.25.25 0 0 0 .25.25H19v2H7a2 2 0 0 1-2-2c0-.35.09-.68.24-.96l1.36-2.45L3 4H1zm6 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2c0-1.11.89-2 2-2m9-7l2.78-5H6.14l2.36 5z'/%3E%3C/svg%3E"); } .icon-\[mdi--cart-variant\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 20c0 1.11-.89 2-2 2a2 2 0 0 1-2-2c0-1.11.89-2 2-2a2 2 0 0 1 2 2M7 18c-1.11 0-2 .89-2 2a2 2 0 0 0 2 2c1.11 0 2-.89 2-2s-.89-2-2-2m.2-3.37l-.03.12c0 .14.11.25.25.25H19v2H7a2 2 0 0 1-2-2c0-.35.09-.68.24-.96l1.36-2.45L3 4H1V2h3.27l.94 2H20c.55 0 1 .45 1 1c0 .17-.05.34-.12.5l-3.58 6.47c-.34.61-1 1.03-1.75 1.03H8.1zM8.5 11H10V9H7.56zM11 9v2h3V9zm3-1V6h-3v2zm3.11 1H15v2h1zm1.67-3H15v2h2.67zM6.14 6l.94 2H10V6z'/%3E%3C/svg%3E"); } .icon-\[mdi--cart\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M17 18c-1.11 0-2 .89-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2M1 2v2h2l3.6 7.59l-1.36 2.45c-.15.28-.24.61-.24.96a2 2 0 0 0 2 2h12v-2H7.42a.25.25 0 0 1-.25-.25q0-.075.03-.12L8.1 13h7.45c.75 0 1.41-.42 1.75-1.03l3.58-6.47c.07-.16.12-.33.12-.5a1 1 0 0 0-1-1H5.21l-.94-2M7 18c-1.11 0-2 .89-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); } .icon-\[mdi--check-circle\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8z'/%3E%3C/svg%3E"); } .icon-\[mdi--check-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19.78 2.2L24 6.42L8.44 22L0 13.55l4.22-4.22l4.22 4.22zm0 2.8L8.44 16.36l-4.22-4.17l-1.41 1.36l5.63 5.62L21.19 6.42z'/%3E%3C/svg%3E"); } .icon-\[mdi--chevron-left\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z'/%3E%3C/svg%3E"); } .icon-\[mdi--chevron-right\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E"); } .icon-\[mdi--clipboard-text-multiple-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 7v14h14v2H4c-1.1 0-2-.9-2-2V7zm16-4c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h3.18C11.6 1.84 12.7 1 14 1s2.4.84 2.82 2zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1s1-.45 1-1s-.45-1-1-1m-4 4V5H8v12h12V5h-2v2m-3 8h-5v-2h5m3-2h-8V9h8z'/%3E%3C/svg%3E"); } .icon-\[mdi--clock-time-four-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 20c4.4 0 8-3.6 8-8s-3.6-8-8-8s-8 3.6-8 8s3.6 8 8 8m0-18c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12S6.5 2 12 2m5 11.9l-.7 1.3l-5.3-2.9V7h1.5v4.4z'/%3E%3C/svg%3E"); } .icon-\[mdi--close-circle\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12S6.47 2 12 2m3.59 5L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41z'/%3E%3C/svg%3E"); } .icon-\[mdi--close\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E"); } .icon-\[mdi--email\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2'/%3E%3C/svg%3E"); } .icon-\[mdi--error-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8'/%3E%3C/svg%3E"); } .icon-\[mdi--exchange\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m21 9l-4-4v3h-7v2h7v3M7 11l-4 4l4 4v-3h7v-2H7z'/%3E%3C/svg%3E"); } .icon-\[mdi--file-document\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m9 16v-2H6v2zm3-4v-2H6v2z'/%3E%3C/svg%3E"); } .icon-\[mdi--file-search-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h7c-.41-.25-.8-.56-1.14-.9c-.33-.33-.61-.7-.86-1.1H6V4h7v5h5v1.18c.71.16 1.39.43 2 .82V8zm6.31 16.9c1.33-2.11.69-4.9-1.4-6.22c-2.11-1.33-4.91-.68-6.22 1.4c-1.34 2.11-.69 4.89 1.4 6.22c1.46.93 3.32.93 4.79.02L22 23.39L23.39 22zm-3.81.1a2.5 2.5 0 0 1-2.5-2.5a2.5 2.5 0 0 1 2.5-2.5a2.5 2.5 0 0 1 2.5 2.5a2.5 2.5 0 0 1-2.5 2.5'/%3E%3C/svg%3E"); } .icon-\[mdi--home\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z'/%3E%3C/svg%3E"); } .icon-\[mdi--information-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z'/%3E%3C/svg%3E"); } .icon-\[mdi--logout\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5M4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z'/%3E%3C/svg%3E"); } .icon-\[mdi--magnify\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5'/%3E%3C/svg%3E"); } .icon-\[mdi--menu\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E"); } .icon-\[mdi--minus\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 13H5v-2h14z'/%3E%3C/svg%3E"); } .icon-\[mdi--office-building-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 3v18h-6v-3.5h-2V21H5V3zm-4 4h2V5h-2zm-4 0h2V5h-2zM7 7h2V5H7zm8 4h2V9h-2zm-4 0h2V9h-2zm-4 0h2V9H7zm8 4h2v-2h-2zm-4 0h2v-2h-2zm-4 0h2v-2H7zm8 4h2v-2h-2zm-8 0h2v-2H7zM21 1H3v22h18z'/%3E%3C/svg%3E"); } .icon-\[mdi--package-variant-closed-remove\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m13 12.6l6-3.4V13c.7 0 1.4.1 2 .4V7.5c0-.4-.2-.7-.5-.9l-7.9-4.4c-.2-.1-.4-.2-.6-.2s-.4.1-.6.2L3.5 6.6c-.3.2-.5.5-.5.9v9c0 .4.2.7.5.9l7.9 4.4c.2.1.4.2.6.2s.4-.1.6-.2l.9-.5c-.3-.6-.4-1.3-.5-2M12 4.2l6 3.3l-2 1.1l-5.9-3.4zm-1 15.1l-6-3.4V9.2l6 3.4zm1-8.5L6 7.5l2-1.2l6 3.5zm4.9 4.7l2.1 2.1l2.1-2.1l1.4 1.4l-2.1 2.1l2.1 2.1l-1.4 1.4l-2.1-2.1l-2.1 2.1l-1.4-1.4l2.1-2.1l-2.1-2.1z'/%3E%3C/svg%3E"); } .icon-\[mdi--pencil\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83l3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z'/%3E%3C/svg%3E"); } .icon-\[mdi--plus\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E"); } .icon-\[mdi--trash-outline\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E"); } .icon-\[mdi--trash\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z'/%3E%3C/svg%3E"); } .icon-\[mdi--warning\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z'/%3E%3C/svg%3E"); } .icon-\[tabler--trending-down\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m3 7l6 6l4-4l8 8'/%3E%3Cpath d='M21 10v7h-7'/%3E%3C/g%3E%3C/svg%3E"); } .icon-\[tabler--trending-up\] { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m3 17l6-6l4 4l8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/g%3E%3C/svg%3E"); } .tabs { display: flex; --tabs-height: auto; --tabs-direction: row; height: var(--tabs-height); flex-direction: var(--tabs-direction); } .progress-bar { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-box); background-color: var(--color-neutral); font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); white-space: nowrap; color: var(--color-neutral-content); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 500ms; --tw-duration: 500ms; --tw-ease: var(--ease-in-out); &.progress-indeterminate { width: 100%; background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 50%, var(--progress-color) 50%); background-size: 50% 100%; background-repeat: no-repeat; animation: indeterminate-progress 4s infinite ease-in-out; } } .label-text { display: block; cursor: pointer; padding: calc(0.25rem * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: var(--color-base-content); } .stats { display: inline-grid; grid-auto-flow: column; :where(& > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(0px * var(--tw-divide-y-reverse)); border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); } overflow-x: auto; border-radius: var(--radius-box); --tw-border-style: solid; border-style: solid; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } background-color: var(--color-base-100); box-shadow: var( --card-shadow, 0 1px 3px 0 var(--color-base-300), 0 1px 2px -1px var(--color-base-300) ); @supports (color: color-mix(in lab, red, red)) { box-shadow: var( --card-shadow, 0 1px 3px 0 color-mix(in oklab, var(--color-base-300) 20%, #0000), 0 1px 2px -1px color-mix(in oklab, var(--color-base-300) 20%, #0000) ); } border-width: var(--card-border, 0px); &:where(.stats-border) { border: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid color-mix(in oklab, var(--color-base-content) 20%, transparent); } } } .carousel-body { display: flex; flex-wrap: nowrap; transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 700ms; --tw-duration: 700ms; } .join { display: inline-flex; align-items: stretch; --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; :where(.join-item) { border-start-start-radius: var(--join-ss, 0); border-start-end-radius: var(--join-se, 0); border-end-start-radius: var(--join-es, 0); border-end-end-radius: var(--join-ee, 0); * { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } } > .join-item:where(:first-child) { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } :first-child:not(:last-child) { :where(.join-item) { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } } > .join-item:where(:last-child) { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } :last-child:not(:first-child) { :where(.join-item) { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } } > .join-item:where(:only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } :only-child { :where(.join-item) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } } } .prose { :root & { --tw-prose-body: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000); } --tw-prose-headings: var(--color-base-content); --tw-prose-lead: var(--tw-prose-body); --tw-prose-links: var(--color-primary); --tw-prose-kbd: var(--tw-prose-body); --tw-prose-bold: var(--tw-prose-headings); --tw-prose-counters: var(--tw-prose-headings); --tw-prose-bullets: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000); } --tw-prose-hr: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000); } --tw-prose-quotes: var(--tw-prose-headings); --tw-prose-quote-borders: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); } --tw-prose-captions: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-captions: color-mix(in oklab, var(--color-base-content) 40%, #0000); } --tw-prose-code: #e83e8c; --tw-prose-pre-code: var(--color-neutral-content); --tw-prose-pre-bg: var(--color-neutral); --tw-prose-th-borders: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 24%, #0000); } --tw-prose-td-borders: var(--tw-prose-th-borders); line-height: 1.5rem; } & :where(code):not(:where([class~=not-prose], [class~=not-prose] *))::before, & :where(code):not(:where([class~=not-prose], [class~=not-prose] *))::after { display: none; } pre { code { border-radius: 0; padding: 0; } } & :where(code):not(:where([class~=not-prose], [class~=not-prose] *)) { font-weight: 500; font-size: 0.875rem; } & :where(kbd):not(:where([class~=not-prose], [class~=not-prose] *)) { padding: calc(0.25rem * 0); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .validate { & *:valid ~ .success-message { display: block; } & *:has(:valid) ~ .success-message { display: block; } & *:invalid ~ .error-message { display: block; } & *:has(:invalid) ~ .error-message { display: block; } & .input:valid::file-selector-button { background-color: var(--color-success); color: var(--color-success-content); --input-color: var(--color-success); } & .input:invalid::file-selector-button { background-color: var(--color-error); color: var(--color-error-content); --input-color: var(--color-error); } & .input-floating > .input:valid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-success); } & .input-floating > .input:invalid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-error); } & .label-text:has(~ :valid) { color: var(--color-success); } & .label-text:has(~ * :valid) { color: var(--color-success); } & :is(:valid) ~ .helper-text { color: var(--color-success); } & *:has(:valid) ~ .helper-text { color: var(--color-success); } & :is(:valid) ~ .label-text { color: var(--color-success); } & :is(:valid) ~ .label-text * { color: var(--color-success); } & :is(:valid) ~ * > .label-text { color: var(--color-success); } & .label-text:has(~ :invalid) { color: var(--color-error); } & .label-text:has(~ * :invalid) { color: var(--color-error); } & :is(:invalid) ~ .helper-text { color: var(--color-error); } & *:has(:invalid) ~ .helper-text { color: var(--color-error); } & :is(:invalid) ~ .label-text { color: var(--color-error); } & :is(:invalid) ~ .label-text * { color: var(--color-error); } & :is(:invalid) ~ * > .label-text { color: var(--color-error); } & select:has(~ * > .selected) + .advance-select-toggle { --input-color: var(--color-success); &:focus, &:focus-within { --input-color: var(--color-success); } } & select:not(:has(~ * > .selected)) + .advance-select-toggle { --input-color: var(--color-error); &:focus, &:focus-within { --input-color: var(--color-error); } } } .validate\! { & *:valid ~ .success-message { display: block !important; } & *:has(:valid) ~ .success-message { display: block !important; } & *:invalid ~ .error-message { display: block !important; } & *:has(:invalid) ~ .error-message { display: block !important; } & .input:valid::file-selector-button { background-color: var(--color-success) !important; color: var(--color-success-content) !important; --input-color: var(--color-success) !important; } & .input:invalid::file-selector-button { background-color: var(--color-error) !important; color: var(--color-error-content) !important; --input-color: var(--color-error) !important; } & .input-floating > .input:valid::file-selector-button { background-color: var(--color-base-100) !important; color: var(--color-base-content) !important; border-inline-end: var(--border) solid var(--color-success) !important; } & .input-floating > .input:invalid::file-selector-button { background-color: var(--color-base-100) !important; color: var(--color-base-content) !important; border-inline-end: var(--border) solid var(--color-error) !important; } & .label-text:has(~ :valid) { color: var(--color-success) !important; } & .label-text:has(~ * :valid) { color: var(--color-success) !important; } & :is(:valid) ~ .helper-text { color: var(--color-success) !important; } & *:has(:valid) ~ .helper-text { color: var(--color-success) !important; } & :is(:valid) ~ .label-text { color: var(--color-success) !important; } & :is(:valid) ~ .label-text * { color: var(--color-success) !important; } & :is(:valid) ~ * > .label-text { color: var(--color-success) !important; } & .label-text:has(~ :invalid) { color: var(--color-error) !important; } & .label-text:has(~ * :invalid) { color: var(--color-error) !important; } & :is(:invalid) ~ .helper-text { color: var(--color-error) !important; } & *:has(:invalid) ~ .helper-text { color: var(--color-error) !important; } & :is(:invalid) ~ .label-text { color: var(--color-error) !important; } & :is(:invalid) ~ .label-text * { color: var(--color-error) !important; } & :is(:invalid) ~ * > .label-text { color: var(--color-error) !important; } & select:has(~ * > .selected) + .advance-select-toggle { --input-color: var(--color-success) !important; &:focus, &:focus-within { --input-color: var(--color-success) !important; } } & select:not(:has(~ * > .selected)) + .advance-select-toggle { --input-color: var(--color-error) !important; &:focus, &:focus-within { --input-color: var(--color-error) !important; } } } .tooltip { display: inline-block; text-align: center; } .\!flex { display: flex !important; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .table { display: table; } .table\! { display: table !important; } .aspect-square { aspect-ratio: 1 / 1; } .btn-circle { border-radius: calc(infinity * 1px); padding-inline: calc(0.25rem * 0); width: var(--size); height: var(--size); } .size-2 { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } .size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); } .size-4\.5 { width: calc(var(--spacing) * 4.5); height: calc(var(--spacing) * 4.5); } .size-5 { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .size-6 { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } .size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } .size-9 { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } .size-10 { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .size-12 { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); } .size-16 { width: calc(var(--spacing) * 16); height: calc(var(--spacing) * 16); } .size-18 { width: calc(var(--spacing) * 18); height: calc(var(--spacing) * 18); } .input { & > .select { height: auto; border-style: var(--tw-border-style); border-width: 0px; &:focus, &:focus-within { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); outline-style: var(--tw-outline-style); outline-width: 0px; } } } .\!h-2\.5 { height: calc(var(--spacing) * 2.5) !important; } .h-2 { height: calc(var(--spacing) * 2); } .h-16 { height: calc(var(--spacing) * 16); } .h-auto { height: auto; } .h-dvh { height: 100dvh; } .h-fit { height: -moz-fit-content; height: fit-content; } .h-full { height: 100%; } .max-h-1\/3 { max-height: calc(1 / 3 * 100%); } .max-h-2\/3 { max-height: calc(2 / 3 * 100%); } .max-h-full { max-height: 100%; } .min-h-0 { min-height: calc(var(--spacing) * 0); } .min-h-full { min-height: 100%; } .advance-select-option { width: 100%; cursor: pointer; border-radius: var(--radius-field); padding-inline: calc(0.25rem * 4); padding-block: calc(0.25rem * 2.5); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-base-content); &:hover { @media (hover: hover) { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } } } &:focus { background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); } --tw-outline-style: none; outline-style: none; } } .custom-soft-option { width: 100%; overflow: hidden; border-radius: var(--radius-box); border-style: var(--tw-border-style); border-width: 1px; padding: calc(0.25rem * 4); text-align: center; border: var(--border) solid var(--input-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000)); } transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; &:hover { border-color: var(--input-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { border-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000)); } box-shadow: 0 0 0 1px var(--input-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 0 0 1px var(--input-color, color-mix(in oklab, var(--color-base-content) 40%, #0000)); } } & > .label-text { padding: calc(0.25rem * 0); } background-color: var(--input-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--input-color, var(--color-neutral)) 5%, #0000); } &:has(:checked) { border-color: var(--input-color, var(--color-primary)); background-color: var(--input-color, var(--color-primary)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--input-color, var(--color-primary)) 10%, #0000); } box-shadow: 0 0 0 1px var(--input-color, var(--color-primary)); } } .\!w-2\.5 { width: calc(var(--spacing) * 2.5) !important; } .loading-xs { width: calc(var(--size-selector, 0.25rem) * 4); } .w-1\/2 { width: calc(1 / 2 * 100%); } .w-1\/3 { width: calc(1 / 3 * 100%); } .w-1\/5 { width: calc(1 / 5 * 100%); } .w-12 { width: calc(var(--spacing) * 12); } .w-16 { width: calc(var(--spacing) * 16); } .w-24 { width: calc(var(--spacing) * 24); } .w-32 { width: calc(var(--spacing) * 32); } .w-fit { width: -moz-fit-content; width: fit-content; } .w-full { width: 100%; } .w-screen { width: 100vw; } .max-w-1\/2 { max-width: calc(1 / 2 * 100%); } .max-w-full { max-width: 100%; } .max-w-md { max-width: var(--container-md); } .min-w-28 { min-width: calc(var(--spacing) * 28); } .min-w-48 { min-width: calc(var(--spacing) * 48); } .flex-shrink-0 { flex-shrink: 0; } .shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .grow { flex-grow: 1; } .border-collapse { border-collapse: collapse; } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .transform\! { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important; } .cursor-pointer { cursor: pointer; } .touch-manipulation { touch-action: manipulation; } .resize { resize: both; } .list-none { list-style-type: none; } .grid-cols-1 { grid-template-columns: repeat(1, 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-rows-\[1fr\] { grid-template-rows: 1fr; } .grid-rows-\[auto_1fr_auto\] { grid-template-rows: auto 1fr auto; } .grid-rows-\[auto_minmax\(0\,1fr\)_auto\] { grid-template-rows: auto minmax(0, 1fr) auto; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap { flex-wrap: wrap; } .place-content-start { place-content: start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .\!justify-between { justify-content: space-between !important; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-px { gap: 1px; } .space-y-2 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-3 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-4 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } } .gap-x-1 { -moz-column-gap: calc(var(--spacing) * 1); column-gap: calc(var(--spacing) * 1); } .gap-x-2 { -moz-column-gap: calc(var(--spacing) * 2); column-gap: calc(var(--spacing) * 2); } .gap-x-3 { -moz-column-gap: calc(var(--spacing) * 3); column-gap: calc(var(--spacing) * 3); } .space-x-4 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } .divide-y { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } } .accordion { &:where(.accordion-bordered) { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } } border-radius: var(--radius-box); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); } background-color: var(--color-base-100); } } .divide-slate-200 { :where(& > :not(:last-child)) { border-color: var(--color-slate-200); } } .self-center { align-self: center; } .justify-self-end { justify-self: flex-end; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-y-scroll { overflow-y: scroll; } .overscroll-none { overscroll-behavior: none; } .alert { .card & { border-radius: 0; &:first-child { border-top-left-radius: var(--radius-box); border-top-right-radius: var(--radius-box); } &:last-child { border-bottom-right-radius: var(--radius-box); border-bottom-left-radius: var(--radius-box); } } } .skeleton { border-radius: var(--radius-box); background-color: var(--color-base-200); will-change: background-position; background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100%); background-size: 200% auto; background-repeat: no-repeat; background-position-x: -50%; } .collapse { :where(.menu-horizontal > li:not(.menu-title) > & > ul) { border-radius: var(--radius-box); background-color: var(--color-base-100); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-base-300) 20%, transparent); } } } .collapse\! { :where(.menu-horizontal > li:not(.menu-title) > & > ul) { border-radius: var(--radius-box) !important; background-color: var(--color-base-100) !important; --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; --tw-shadow-color: var(--color-base-300) !important; @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-base-300) 20%, transparent) !important; } } } .\!rounded-full { border-radius: calc(infinity * 1px) !important; } .rounded-box { border-radius: var(--radius-box); } .rounded-box { border-radius: var(--radius-box); } .rounded-field { border-radius: var(--radius-field); } .rounded-field { border-radius: var(--radius-field); } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0px; } .btn-text { --btn-shadow: ""; color: var(--btn-color, var(--color-neutral)); --btn-bg: ""; --btn-border: ""; --btn-noise: none; border-width: 0; outline-color: var(--btn-color, var(--color-neutral)); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } &.btn-active { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); } } } .btn-soft { --btn-shadow: ""; color: var(--btn-color, var(--color-neutral)); --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, var(--color-base-100)); } border-width: 0; --btn-noise: none; &:focus-visible { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } } &.btn-active { --btn-bg: var(--btn-color, var(--color-neutral)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); } } } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .\!border-none { --tw-border-style: none !important; border-style: none !important; } .input { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { border-color: var(--color-success); &:hover { @media (hover: hover) { border-color: var(--color-success); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-success); } &:focus, &:focus-within { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { border-color: var(--color-error); &:hover { @media (hover: hover) { border-color: var(--color-error); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-error); } &:focus, &:focus-within { --input-color: var(--color-error); } } &.is-valid::file-selector-button { background-color: var(--color-success); color: var(--color-success-content); --input-color: var(--color-success); } .validate &:valid::file-selector-button { background-color: var(--color-success); color: var(--color-success-content); --input-color: var(--color-success); } &.is-invalid::file-selector-button { background-color: var(--color-error); color: var(--color-error-content); --input-color: var(--color-error); } .validate &:invalid::file-selector-button { background-color: var(--color-error); color: var(--color-error-content); --input-color: var(--color-error); } .input-floating > &.is-valid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-success); } .validate .input-floating > &:valid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-success); } .input-floating > &.is-invalid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-error); } .validate .input-floating > &:invalid::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-error); } } .checkbox { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { --input-color: var(--color-success); border-color: var(--input-color); &:checked, &[aria-checked=true], &:has(> input:checked) { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { --input-color: var(--color-error); border-color: var(--input-color); &:checked, &[aria-checked=true], &:has(> input:checked) { --input-color: var(--color-error); } } &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { color: var(--color-success-content); } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { color: var(--color-error-content); } } .validate { & .input-floating:has(:valid) { &:hover { @media (hover: hover) { border-color: var(--color-success); } } .input-floating-label { color: var(--color-success); } &:not(:has(input:-moz-placeholder)) { .input-floating-label { color: var(--color-success); } } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus) { .input-floating-label { color: var(--color-success); } } } & .input-floating:has(:invalid) { &:hover { @media (hover: hover) { border-color: var(--color-error); } } .input-floating-label { color: var(--color-error); } &:not(:has(input:-moz-placeholder)) { .input-floating-label { color: var(--color-error); } } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus) { .input-floating-label { color: var(--color-error); } } } } .validate\! { & .input-floating:has(:valid) { &:hover { @media (hover: hover) { border-color: var(--color-success) !important; } } .input-floating-label { color: var(--color-success) !important; } &:not(:has(input:-moz-placeholder)) { .input-floating-label { color: var(--color-success) !important; } } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus) { .input-floating-label { color: var(--color-success) !important; } } } & .input-floating:has(:invalid) { &:hover { @media (hover: hover) { border-color: var(--color-error) !important; } } .input-floating-label { color: var(--color-error) !important; } &:not(:has(input:-moz-placeholder)) { .input-floating-label { color: var(--color-error) !important; } } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus) { .input-floating-label { color: var(--color-error) !important; } } } } .is-invalid { .input-floating:has(&) { &:hover { @media (hover: hover) { border-color: var(--color-error); } } .input-floating-label { color: var(--color-error); } &:not(:has(input:-moz-placeholder)) { .input-floating-label { color: var(--color-error); } } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus) { .input-floating-label { color: var(--color-error); } } } } .is-valid { .input-floating:has(&) { &:hover { @media (hover: hover) { border-color: var(--color-success); } } .input-floating-label { color: var(--color-success); } &:not(:has(input:-moz-placeholder)) { .input-floating-label { color: var(--color-success); } } &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus) { .input-floating-label { color: var(--color-success); } } } } .select { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { border-color: var(--color-success); &:hover { @media (hover: hover) { border-color: var(--color-success); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-success); } &:focus, &:focus-within { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { border-color: var(--color-error); &:hover { @media (hover: hover) { border-color: var(--color-error); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-error); } &:focus, &:focus-within { --input-color: var(--color-error); } } } .select\! { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { border-color: var(--color-success) !important; &:hover { @media (hover: hover) { border-color: var(--color-success) !important; } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-success) !important; } &:focus, &:focus-within { --input-color: var(--color-success) !important; } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { border-color: var(--color-error) !important; &:hover { @media (hover: hover) { border-color: var(--color-error) !important; } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-error) !important; } &:focus, &:focus-within { --input-color: var(--color-error) !important; } } } .textarea { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { border-color: var(--color-success); &:hover { @media (hover: hover) { border-color: var(--color-success); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-success); } &:focus, &:focus-within { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { border-color: var(--color-error); &:hover { @media (hover: hover) { border-color: var(--color-error); } } &:has(:hover):not(:focus, :focus-within) { border-color: var(--color-error); } &:focus, &:focus-within { --input-color: var(--color-error); } } } .radio { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { --input-color: var(--color-success); border-color: var(--input-color); &:checked, &[aria-checked=true], &:has(> input:checked) { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { --input-color: var(--color-error); border-color: var(--input-color); &:checked, &[aria-checked=true], &:has(> input:checked) { --input-color: var(--color-error); } } } .switch { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { --input-color: var(--color-success); border-color: var(--input-color); &:checked, &[aria-checked=true], &:has(> input:checked) { --input-color: var(--color-success); } } &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { --input-color: var(--color-error); border-color: var(--input-color); &:checked, &[aria-checked=true], &:has(> input:checked) { --input-color: var(--color-error); } } } .\!border-base-content\/40 { border-color: var(--color-base-content) !important; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important; } } .border-base-content\/20 { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } .border-base-content\/40 { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } .border-neutral-100 { border-color: var(--color-neutral-100); } .border-slate-200 { border-color: var(--color-slate-200); } .border-slate-300 { border-color: var(--color-slate-300); } .is-invalid { &.input::file-selector-button { background-color: var(--color-error); color: var(--color-error-content); --input-color: var(--color-error); } .input-floating > &.input::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-error); } .label-text:has(~ &) { color: var(--color-error); } .label-text:has(~ * &) { color: var(--color-error); } :is(&) ~ .helper-text { color: var(--color-error); } *:has(&) ~ .helper-text { color: var(--color-error); } :is(&) ~ .label-text { color: var(--color-error); } :is(&) ~ .label-text * { color: var(--color-error); } :is(&) ~ * > .label-text { color: var(--color-error); } select& + .advance-select-toggle { --input-color: var(--color-error); &:focus, &:focus-within { --input-color: var(--color-error); } } .advance-select-tag:has(> &) { --input-color: var(--color-error); &:focus, &:focus-within { --input-color: var(--color-error); } } } .is-valid { &.input::file-selector-button { background-color: var(--color-success); color: var(--color-success-content); --input-color: var(--color-success); } .input-floating > &.input::file-selector-button { background-color: var(--color-base-100); color: var(--color-base-content); border-inline-end: var(--border) solid var(--color-success); } .label-text:has(~ &) { color: var(--color-success); } .label-text:has(~ * &) { color: var(--color-success); } :is(&) ~ .helper-text { color: var(--color-success); } *:has(&) ~ .helper-text { color: var(--color-success); } :is(&) ~ .label-text { color: var(--color-success); } :is(&) ~ .label-text * { color: var(--color-success); } :is(&) ~ * > .label-text { color: var(--color-success); } select& + .advance-select-toggle { --input-color: var(--color-success); &:focus, &:focus-within { --input-color: var(--color-success); } } .advance-select-tag:has(> &) { --input-color: var(--color-success); &:focus, &:focus-within { --input-color: var(--color-success); } } } .progress-primary { background-color: var(--color-primary); color: var(--color-primary-content); } .\!bg-base-100 { background-color: var(--color-base-100) !important; } .bg-base-100 { background-color: var(--color-base-100); } .bg-base-300\/60 { background-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-300) 60%, transparent); } } .bg-black\/60 { background-color: color-mix(in srgb, #000 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .bg-primary { background-color: var(--color-primary); } .bg-secondary\/10 { background-color: var(--color-secondary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent); } } .bg-slate-100 { background-color: var(--color-slate-100); } .bg-slate-200 { background-color: var(--color-slate-200); } .bg-slate-200\/50 { background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-200) 50%, transparent); } } .bg-slate-200\/80 { background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-200) 80%, transparent); } } .bg-warning\/15 { background-color: var(--color-warning); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-warning) 15%, transparent); } } .bg-white { background-color: var(--color-white); } .bg-white\/30 { background-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } .bg-white\/50 { background-color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 50%, transparent); } } .loading-dots { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E"); } .loading-spinner { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .mask { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .fill-black { fill: var(--color-black); } .object-contain { -o-object-fit: contain; object-fit: contain; } .checkbox-sm { padding: calc(0.25rem * 0.5); --size: calc(var(--size-selector, 0.25rem) * 5); } .p-0 { padding: calc(var(--spacing) * 0); } .p-0\.5 { padding: calc(var(--spacing) * 0.5); } .p-1 { padding: calc(var(--spacing) * 1); } .p-2 { padding: calc(var(--spacing) * 2); } .p-3 { padding: calc(var(--spacing) * 3); } .p-4 { padding: calc(var(--spacing) * 4); } .p-6 { padding: calc(var(--spacing) * 6); } .p-8 { padding: calc(var(--spacing) * 8); } .badge-sm { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); --size: calc(var(--size-selector, 0.25rem) * 5); padding-inline: calc(0.25rem * 2 - var(--border)); } .\!px-2\.5 { padding-inline: calc(var(--spacing) * 2.5) !important; } .px-0 { padding-inline: calc(var(--spacing) * 0); } .px-1 { padding-inline: calc(var(--spacing) * 1); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .py-0\.5 { padding-block: calc(var(--spacing) * 0.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-4 { padding-block: calc(var(--spacing) * 4); } .ps-\[0\] { padding-inline-start: 0; } .pt-2 { padding-top: calc(var(--spacing) * 2); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pr-3 { padding-right: calc(var(--spacing) * 3); } .pr-4 { padding-right: calc(var(--spacing) * 4); } .pr-8 { padding-right: calc(var(--spacing) * 8); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pl-3 { padding-left: calc(var(--spacing) * 3); } .pl-6 { padding-left: calc(var(--spacing) * 6); } .pl-10 { padding-left: calc(var(--spacing) * 10); } .pl-96 { padding-left: calc(var(--spacing) * 96); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-start { text-align: start; } .align-bottom { vertical-align: bottom; } .btn-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --btn-p: 1.25rem; --size: calc(var(--size-field, 0.25rem) * 11.5); } .btn-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); --btn-p: 0.75rem; --size: calc(var(--size-field, 0.25rem) * 7.5); } .\!text-sm { font-size: var(--text-sm) !important; line-height: var(--tw-leading, var(--text-sm--line-height)) !important; } .input-lg { &::file-selector-button { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } .text-7xl { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .leading-loose { --tw-leading: var(--leading-loose); line-height: var(--leading-loose); } .\!font-medium { --tw-font-weight: var(--font-weight-medium) !important; font-weight: var(--font-weight-medium) !important; } .\!font-semibold { --tw-font-weight: var(--font-weight-semibold) !important; font-weight: var(--font-weight-semibold) !important; } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .whitespace-nowrap { white-space: nowrap; } .label-text { &:has(~ .is-valid) { color: var(--color-success); } &:has(~ * .is-valid) { color: var(--color-success); } .validate &:has(~ :valid) { color: var(--color-success); } .validate &:has(~ * :valid) { color: var(--color-success); } :is(.is-valid) ~ & { color: var(--color-success); } :is(.is-valid) ~ & * { color: var(--color-success); } :is(.is-valid) ~ * > & { color: var(--color-success); } .validate :is(:valid) ~ & { color: var(--color-success); } .validate :is(:valid) ~ & * { color: var(--color-success); } .validate :is(:valid) ~ * > & { color: var(--color-success); } &:has(~ .is-invalid) { color: var(--color-error); } &:has(~ * .is-invalid) { color: var(--color-error); } .validate &:has(~ :invalid) { color: var(--color-error); } .validate &:has(~ * :invalid) { color: var(--color-error); } :is(.is-invalid) ~ & { color: var(--color-error); } :is(.is-invalid) ~ & * { color: var(--color-error); } :is(.is-invalid) ~ * > & { color: var(--color-error); } .validate :is(:invalid) ~ & { color: var(--color-error); } .validate :is(:invalid) ~ & * { color: var(--color-error); } .validate :is(:invalid) ~ * > & { color: var(--color-error); } } .validate { & .textarea-floating:has(:valid) { .textarea-floating-label { color: var(--color-success); } &:not(:has(textarea:-moz-placeholder)) { .textarea-floating-label { color: var(--color-success); } } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus) { .textarea-floating-label { color: var(--color-success); } } } & .textarea-floating:has(:invalid) { .textarea-floating-label { color: var(--color-error); } &:not(:has(textarea:-moz-placeholder)) { .textarea-floating-label { color: var(--color-error); } } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus) { .textarea-floating-label { color: var(--color-error); } } } } .validate { & .select-floating:has(:valid) { .select-floating-label { color: var(--color-success); } &:not(:has(select:-moz-placeholder)) { .select-floating-label { color: var(--color-success); } } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .select-floating-label { color: var(--color-success); } } } & .select-floating:has(:invalid) { .select-floating-label { color: var(--color-error); } &:not(:has(select:-moz-placeholder)) { .select-floating-label { color: var(--color-error); } } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .select-floating-label { color: var(--color-error); } } } } .validate\! { & .textarea-floating:has(:valid) { .textarea-floating-label { color: var(--color-success) !important; } &:not(:has(textarea:-moz-placeholder)) { .textarea-floating-label { color: var(--color-success) !important; } } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus) { .textarea-floating-label { color: var(--color-success) !important; } } } & .textarea-floating:has(:invalid) { .textarea-floating-label { color: var(--color-error) !important; } &:not(:has(textarea:-moz-placeholder)) { .textarea-floating-label { color: var(--color-error) !important; } } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus) { .textarea-floating-label { color: var(--color-error) !important; } } } } .validate\! { & .select-floating:has(:valid) { .select-floating-label { color: var(--color-success) !important; } &:not(:has(select:-moz-placeholder)) { .select-floating-label { color: var(--color-success) !important; } } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .select-floating-label { color: var(--color-success) !important; } } } & .select-floating:has(:invalid) { .select-floating-label { color: var(--color-error) !important; } &:not(:has(select:-moz-placeholder)) { .select-floating-label { color: var(--color-error) !important; } } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .select-floating-label { color: var(--color-error) !important; } } } } .alert-error { color: var(--color-error-content); --alert-color: var(--color-error); } .alert-primary { color: var(--color-primary-content); --alert-color: var(--color-primary); } .alert-success { color: var(--color-success-content); --alert-color: var(--color-success); } .alert-warning { color: var(--color-warning-content); --alert-color: var(--color-warning); } .checkbox-primary { color: var(--color-primary-content); --input-color: var(--color-primary); } .is-invalid { .textarea-floating:has(&) { .textarea-floating-label { color: var(--color-error); } &:not(:has(textarea:-moz-placeholder)) { .textarea-floating-label { color: var(--color-error); } } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus) { .textarea-floating-label { color: var(--color-error); } } } } .is-invalid { .select-floating:has(&) { .select-floating-label { color: var(--color-error); } &:not(:has(select:-moz-placeholder)) { .select-floating-label { color: var(--color-error); } } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .select-floating-label { color: var(--color-error); } } } } .is-valid { .textarea-floating:has(&) { .textarea-floating-label { color: var(--color-success); } &:not(:has(textarea:-moz-placeholder)) { .textarea-floating-label { color: var(--color-success); } } &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus) { .textarea-floating-label { color: var(--color-success); } } } } .is-valid { .select-floating:has(&) { .select-floating-label { color: var(--color-success); } &:not(:has(select:-moz-placeholder)) { .select-floating-label { color: var(--color-success); } } &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { .select-floating-label { color: var(--color-success); } } } } .text-base-content { color: var(--color-base-content); } .text-base-content\/50 { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } .text-base-content\/80 { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 80%, transparent); } } .text-error { color: var(--color-error); } .text-neutral-500 { color: var(--color-neutral-500); } .text-primary { color: var(--color-primary); } .text-red-500 { color: var(--color-red-500); } .text-secondary { color: var(--color-secondary); } .text-slate-400 { color: var(--color-slate-400); } .text-slate-500 { color: var(--color-slate-500); } .text-slate-600 { color: var(--color-slate-600); } .text-slate-700 { color: var(--color-slate-700); } .text-slate-800 { color: var(--color-slate-800); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-white { color: var(--color-white); } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } .normal-case { text-transform: none; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .ordinal { --tw-ordinal: ordinal; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .no-underline { text-decoration-line: none; } .underline { text-decoration-line: underline; } .opacity-0 { opacity: 0%; } .opacity-100 { opacity: 100%; } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-base-300\/20 { --tw-shadow-color: var(--color-base-300); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-secondary\/30 { --tw-shadow-color: var(--color-secondary); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-secondary) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .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,); } .backdrop-blur-xs { --tw-backdrop-blur: blur(var(--blur-xs)); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .carousel-slide { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 700ms; --tw-duration: 700ms; } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[height\] { transition-property: height; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-discrete { transition-behavior: allow-discrete; } .delay-1000 { transition-delay: 1000ms; } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; } .badge-error { --badge-color: var(--color-error); --badge-fg: var(--color-error-content); } .badge-info { --badge-color: var(--color-info); --badge-fg: var(--color-info-content); } .badge-primary { --badge-color: var(--color-primary); --badge-fg: var(--color-primary-content); } .badge-success { --badge-color: var(--color-success); --badge-fg: var(--color-success-content); } .badge-warning { --badge-color: var(--color-warning); --badge-fg: var(--color-warning-content); } .btn-primary { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); } .btn-secondary { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content); } .custom-soft-option { .validate &:has(:valid), &:has(.is-valid) { --input-color: var(--color-success); } .validate &:has(:invalid), &:has(.is-invalid) { --input-color: var(--color-error); } } .outline-none { --tw-outline-style: none; outline-style: none; } .selected { .validate select:has(~ * > &) + .advance-select-toggle { --input-color: var(--color-success); &:focus, &:focus-within { --input-color: var(--color-success); } } } .selected\! { .validate select:has(~ * > &) + .advance-select-toggle { --input-color: var(--color-success) !important; &:focus, &:focus-within { --input-color: var(--color-success) !important; } } } .\[rdoc-ref\:lib\/racc\/rdoc\/grammar\.en\.rdoc\] { rdoc-ref: lib/racc/rdoc/grammar.en.rdoc; } .link-primary { --link-color: var(--color-primary); } .radio-primary { --input-color: var(--color-primary); } .group-focus-within\:text-primary { &:is(:where(.group):focus-within *) { color: var(--color-primary); } } .group-has-\[\.focus\]\/form\:inline { &:is(:where(.group\/form):has(*:is(.focus)) *) { display: inline; } } .group-has-\[\.focus\]\/form\:-translate-y-full { &:is(:where(.group\/form):has(*:is(.focus)) *) { --tw-translate-y: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } .group-has-\[\.focus\]\/form\:grid-rows-\[0fr\] { &:is(:where(.group\/form):has(*:is(.focus)) *) { grid-template-rows: 0fr; } } .group-has-\[\.focus\]\/form\:opacity-0 { &:is(:where(.group\/form):has(*:is(.focus)) *) { opacity: 0%; } } .group-has-\[\.turbo-progress-bar\]\/page\:flex { &:is(:where(.group\/page):has(*:is(.turbo-progress-bar)) *) { display: flex; } } .group-aria-busy\:hidden { &:is(:where(.group)[aria-busy=true] *) { display: none; } } .group-aria-busy\:inline-block { &:is(:where(.group)[aria-busy=true] *) { display: inline-block; } } .group-aria-busy\/cart-item\:flex { &:is(:where(.group\/cart-item)[aria-busy=true] *) { display: flex; } } .group-aria-busy\/page\:flex { &:is(:where(.group\/page)[aria-busy=true] *) { display: flex; } } .group-aria-busy\/page\:overflow-hidden { &:is(:where(.group\/page)[aria-busy=true] *) { overflow: hidden; } } .first\:mt-0 { &:first-child { margin-top: calc(var(--spacing) * 0); } } .first\:border-t-0 { &:first-child { border-top-style: var(--tw-border-style); border-top-width: 0px; } } .last\:border-b-0 { &:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } } .hover\:bg-slate-50 { &:hover { @media (hover: hover) { background-color: var(--color-slate-50); } } } .hover\:text-secondary { &:hover { @media (hover: hover) { color: var(--color-secondary); } } } .hover\:no-underline { &:hover { @media (hover: hover) { text-decoration-line: none; } } } .focus\:border-primary { &:focus { border-color: var(--color-primary); } } .focus\:bg-white { &:focus { background-color: var(--color-white); } } .focus\:ring-2 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:ring-4 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:ring-primary { &:focus { --tw-ring-color: var(--color-primary); } } .focus\:outline-1 { &:focus { outline-style: var(--tw-outline-style); outline-width: 1px; } } .focus\:outline-primary { &:focus { outline-color: var(--color-primary); } } .focus\:outline-none { &:focus { --tw-outline-style: none; outline-style: none; } } .active\:bg-slate-100 { &:active { background-color: var(--color-slate-100); } } .has-\[\.focus\]\:pt-0 { &:has(*:is(.focus)) { padding-top: calc(var(--spacing) * 0); } } .max-md\:drawer-bottom { @media (width < 48rem) { inset-inline: calc(0.25rem * 0); bottom: calc(0.25rem * 0); max-height: calc(0.25rem * 60); max-width: none; --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); } } .max-md\:max-h-3\/4 { @media (width < 48rem) { max-height: calc(3 / 4 * 100%); } } .md\:drawer-start { @media (width >= 48rem) { inset-inline-start: calc(0.25rem * 0); inset-inline-end: auto; top: calc(0.25rem * 0); --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--ease-in-out); transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: 300ms; --tw-duration: 300ms; --tw-ease: var(--ease-in-out); &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } } .md\:col-start-2 { @media (width >= 48rem) { grid-column-start: 2; } } .md\:mt-4 { @media (width >= 48rem) { margin-top: calc(var(--spacing) * 4); } } .md\:inline { @media (width >= 48rem) { display: inline; } } .md\:w-1\/2 { @media (width >= 48rem) { width: calc(1 / 2 * 100%); } } .md\:w-fit { @media (width >= 48rem) { width: -moz-fit-content; width: fit-content; } } .md\:w-xl { @media (width >= 48rem) { width: var(--container-xl); } } .md\:grid-cols-2 { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .md\:grid-cols-4 { @media (width >= 48rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .md\:grid-cols-5 { @media (width >= 48rem) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .md\:flex-row { @media (width >= 48rem) { flex-direction: row; } } .md\:p-1\.5 { @media (width >= 48rem) { padding: calc(var(--spacing) * 1.5); } } .md\:py-4 { @media (width >= 48rem) { padding-block: calc(var(--spacing) * 4); } } .md\:pt-2 { @media (width >= 48rem) { padding-top: calc(var(--spacing) * 2); } } .md\:pb-4 { @media (width >= 48rem) { padding-bottom: calc(var(--spacing) * 4); } } .lg\:input-md { @media (width >= 64rem) { padding-inline: calc(0.25rem * 3); font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); --size: calc(var(--size-field, 0.25rem) * 9.5); &[type=number] { &::-webkit-inner-spin-button { margin-block: calc(0.25rem * -3); margin-inline-end: calc(0.25rem * -3); } } } } .lg\:mt-4 { @media (width >= 64rem) { margin-top: calc(var(--spacing) * 4); } } .lg\:w-64 { @media (width >= 64rem) { width: calc(var(--spacing) * 64); } } .lg\:input-md { @media (width >= 64rem) { &::file-selector-button { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } } } .xl\:static { @media (width >= 80rem) { position: static; } } .xl\:-top-2 { @media (width >= 80rem) { top: calc(var(--spacing) * -2); } } .xl\:-right-2 { @media (width >= 80rem) { right: calc(var(--spacing) * -2); } } .xl\:order-1 { @media (width >= 80rem) { order: 1; } } .xl\:mx-auto { @media (width >= 80rem) { margin-inline: auto; } } .xl\:ml-auto { @media (width >= 80rem) { margin-left: auto; } } .xl\:block { @media (width >= 80rem) { display: block; } } .xl\:flex { @media (width >= 80rem) { display: flex; } } .xl\:hidden { @media (width >= 80rem) { display: none; } } .xl\:inline { @media (width >= 80rem) { display: inline; } } .xl\:max-h-\[40\%\] { @media (width >= 80rem) { max-height: 40%; } } .xl\:w-1\/2 { @media (width >= 80rem) { width: calc(1 / 2 * 100%); } } .xl\:w-1\/4 { @media (width >= 80rem) { width: calc(1 / 4 * 100%); } } .xl\:w-3\/5 { @media (width >= 80rem) { width: calc(3 / 5 * 100%); } } .xl\:flex-shrink-0 { @media (width >= 80rem) { flex-shrink: 0; } } .xl\:translate-x-0 { @media (width >= 80rem) { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } } .xl\:grid-cols-\[repeat\(auto-fit\,minmax\(16rem\,1fr\)\)\] { @media (width >= 80rem) { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } } .xl\:flex-col { @media (width >= 80rem) { flex-direction: column; } } .xl\:justify-center { @media (width >= 80rem) { justify-content: center; } } .xl\:border-r { @media (width >= 80rem) { border-right-style: var(--tw-border-style); border-right-width: 1px; } } .xl\:border-b { @media (width >= 80rem) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } } .xl\:px-8 { @media (width >= 80rem) { padding-inline: calc(var(--spacing) * 8); } } .xl\:py-2 { @media (width >= 80rem) { padding-block: calc(var(--spacing) * 2); } } .xl\:pt-10 { @media (width >= 80rem) { padding-top: calc(var(--spacing) * 10); } } .xl\:pb-4 { @media (width >= 80rem) { padding-bottom: calc(var(--spacing) * 4); } } .md\:landscape\:max-h-full { @media (width >= 48rem) { @media (orientation: landscape) { max-height: 100%; } } } .rtl\:\!mr-0 { &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { margin-right: calc(var(--spacing) * 0) !important; } } .rtl\:-rotate-180 { &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { rotate: calc(180deg * -1); } } .starting\:opacity-0 { @starting-style { opacity: 0%; } } .accordion-item-active\:-rotate-90 { &.accordion-item.active { rotate: calc(90deg * -1); } .accordion-item.active > & { rotate: calc(90deg * -1); } .accordion-item.active > .accordion-toggle & { rotate: calc(90deg * -1); } .accordion-item.active > .accordion-heading > .accordion-toggle & { rotate: calc(90deg * -1); } &.accordion-toggle { .accordion-item.active > & { rotate: calc(90deg * -1); } } &.accordion-toggle { .accordion-item.active > .accordion-heading > & { rotate: calc(90deg * -1); } } &.accordion-force-active { .accordion-item.active & { rotate: calc(90deg * -1); } } } .overlay-open\:translate-y-0 { &.open { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .open & { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } } .md\:overlay-open\:translate-x-0 { @media (width >= 48rem) { &.open { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .open & { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .overlay-backdrop-open\:bg-black\/90 { &.overlay-backdrop { background-color: color-mix(in srgb, #000 90%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 90%, transparent); } } .overlay-backdrop & { background-color: color-mix(in srgb, #000 90%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 90%, transparent); } } } .combo-box-selected\:block { &.selected { display: block; } .selected & { display: block; } } .combo-box-selected\:dropdown-active { &.selected { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } color: var(--color-primary); } .selected & { background-color: var(--color-primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); } color: var(--color-primary); } } .file-upload-complete\:progress-success { &.complete { background-color: var(--color-success); color: var(--color-success-content); } .complete & { background-color: var(--color-success); color: var(--color-success-content); } } .\[\&_em\]\:bg-yellow-400 { & em { background-color: var(--color-yellow-400); } } .\[\&_em\]\:p-0\.5 { & em { padding: calc(var(--spacing) * 0.5); } } .\[\&_em\]\:not-italic { & em { font-style: normal; } } .\[\.accordion-item_\&\]\:border-t-0 { .accordion-item & { border-top-style: var(--tw-border-style); border-top-width: 0px; } } .\[\.accordion-item_\&\]\:py-0 { .accordion-item & { padding-block: calc(var(--spacing) * 0); } } } @keyframes notyf-fadeinup { 0% { opacity: 0; transform: translateY(25%); } to { opacity: 1; transform: translateY(0); } } @keyframes notyf-fadeinleft { 0% { opacity: 0; transform: translateX(25%); } to { opacity: 1; transform: translateX(0); } } @keyframes notyf-fadeoutright { 0% { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(25%); } } @keyframes notyf-fadeoutdown { 0% { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(25%); } } @keyframes ripple { 0% { transform: scale(0) translateY(-45%) translateX(13%); } to { transform: scale(1) translateY(-45%) translateX(13%); } } .notyf { position: fixed; top: 0; left: 0; height: 100%; width: 100%; color: #fff; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; pointer-events: none; box-sizing: border-box; padding: 20px; } .notyf__icon--error, .notyf__icon--success { height: 21px; width: 21px; background: #fff; border-radius: 50%; display: block; margin: 0 auto; position: relative; } .notyf__icon--error:after, .notyf__icon--error:before { content: ""; background: currentColor; display: block; position: absolute; width: 3px; border-radius: 3px; left: 9px; height: 12px; top: 5px; } .notyf__icon--error:after { transform: rotate(-45deg); } .notyf__icon--error:before { transform: rotate(45deg); } .notyf__icon--success:after, .notyf__icon--success:before { content: ""; background: currentColor; display: block; position: absolute; width: 3px; border-radius: 3px; } .notyf__icon--success:after { height: 6px; transform: rotate(-45deg); top: 9px; left: 6px; } .notyf__icon--success:before { height: 11px; transform: rotate(45deg); top: 5px; left: 10px; } .notyf__toast { display: block; overflow: hidden; pointer-events: auto; animation: notyf-fadeinup .3s ease-in forwards; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .25); position: relative; padding: 0 15px; border-radius: 2px; max-width: 300px; transform: translateY(25%); box-sizing: border-box; flex-shrink: 0; } .notyf__toast--disappear { transform: translateY(0); animation: notyf-fadeoutdown .3s forwards; animation-delay: .25s; } .notyf__toast--disappear .notyf__icon, .notyf__toast--disappear .notyf__message { animation: notyf-fadeoutdown .3s forwards; opacity: 1; transform: translateY(0); } .notyf__toast--disappear .notyf__dismiss { animation: notyf-fadeoutright .3s forwards; opacity: 1; transform: translateX(0); } .notyf__toast--disappear .notyf__message { animation-delay: .05s; } .notyf__toast--upper { margin-bottom: 20px; } .notyf__toast--lower { margin-top: 20px; } .notyf__toast--dismissible .notyf__wrapper { padding-right: 30px; } .notyf__ripple { height: 400px; width: 400px; position: absolute; transform-origin: bottom right; right: 0; top: 0; border-radius: 50%; transform: scale(0) translateY(-51%) translateX(13%); z-index: 5; animation: ripple .4s ease-out forwards; } .notyf__wrapper { display: flex; align-items: center; padding-top: 17px; padding-bottom: 17px; padding-right: 15px; border-radius: 3px; position: relative; z-index: 10; } .notyf__icon { width: 22px; text-align: center; font-size: 1.3em; opacity: 0; animation: notyf-fadeinup .3s forwards; animation-delay: .3s; margin-right: 13px; } .notyf__dismiss { position: absolute; top: 0; right: 0; height: 100%; width: 26px; margin-right: -15px; animation: notyf-fadeinleft .3s forwards; animation-delay: .35s; opacity: 0; } .notyf__dismiss-btn { background-color: rgba(0, 0, 0, .25); border: none; cursor: pointer; transition: opacity .2s ease, background-color .2s ease; outline: none; opacity: .35; height: 100%; width: 100%; } .notyf__dismiss-btn:after, .notyf__dismiss-btn:before { content: ""; background: #fff; height: 12px; width: 2px; border-radius: 3px; position: absolute; left: calc(50% - 1px); top: calc(50% - 5px); } .notyf__dismiss-btn:after { transform: rotate(-45deg); } .notyf__dismiss-btn:before { transform: rotate(45deg); } .notyf__dismiss-btn:hover { opacity: .7; background-color: rgba(0, 0, 0, .15); } .notyf__dismiss-btn:active { opacity: .8; } .notyf__message { vertical-align: middle; position: relative; opacity: 0; animation: notyf-fadeinup .3s forwards; animation-delay: .25s; line-height: 1.5em; } @media only screen and (max-width:480px) { .notyf { padding: 0; } .notyf__ripple { height: 600px; width: 600px; animation-duration: .5s; } .notyf__toast { max-width: none; border-radius: 0; box-shadow: 0 -2px 7px 0 rgba(0, 0, 0, .13); width: 100%; } .notyf__dismiss { width: 56px; } } @keyframes notyf-fadeinright { 0% { opacity: 0; transform: translateX(-25%); } to { opacity: 1; transform: translateX(0%); } } @keyframes notyf-fadeoutleft { 0% { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-25%); } } .notyf__toast { border-radius: var(--radius-field); padding: calc(var(--spacing) * 0) !important; --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); @media (width < 40rem) { margin: calc(var(--spacing) * 2); } @media (width < 40rem) { width: calc(11 / 12 * 100%); } .notyf__wrapper { padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 2.5); .notyf__dismiss { margin-right: calc(var(--spacing) * 0) !important; &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { right: auto !important; } &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { left: calc(var(--spacing) * 0) !important; } .notyf__dismiss-btn { width: 100%; opacity: 50% !important; &:hover { @media (hover: hover) { opacity: 100% !important; } } &:active { opacity: 100% !important; } } } } .notyf__wrapper:has(> .notyf__dismiss) { padding-inline-end: calc(var(--spacing) * 12) !important; } } .notyf__toast--error { .notyf__ripple { background-color: var(--color-error) !important; } .notyf__icon i { color: var(--color-error) !important; } } .notyf__toast--success { .notyf__ripple { background-color: var(--color-success) !important; } .notyf__icon i { color: var(--color-success) !important; } } .notyf__icon { margin-inline-end: calc(var(--spacing) * 3) !important; display: flex; width: 26px; height: 26px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); background-color: var(--color-base-100); --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--color-base-100); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-base-100) 40%, transparent); } &:where(:dir(rtl), [dir=rtl], [dir=rtl] *) { margin-right: calc(var(--spacing) * 0) !important; } & i { width: 1.125rem; height: 1.125rem; } .notyf__icon--success:before, .notyf__icon--success:after, .notyf__icon--error:before, .notyf__icon--error:after { content: none; } .notyf__icon--error, .notyf__icon--success { display: inline-block; width: 1.125rem; height: 1.125rem; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .notyf__icon--error { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m2.7-6.3l12.6 12.6'/%3E%3C/svg%3E"); } .notyf__icon--success { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='m9 12l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E"); } } .notyf__message { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } [dir=rtl] .notyf__dismiss { animation: notyf-fadeinright 0.3s forwards !important; animation-delay: 0.35s !important; } [dir=rtl] .notyf__toast--disappear .notyf__dismiss { animation: notyf-fadeoutleft 0.3s forwards !important; } @layer components { .app-bar { display: flex; width: 100%; align-items: center; justify-content: space-evenly; @media (width >= 80rem) { width: calc(1 / 4 * 100%); } } .app-bar__link { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: calc(var(--spacing) * 1); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-slate-500) 80%, transparent); } } .app-bar__link--active { color: var(--color-secondary); .app-bar__link-caption { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } } .app-bar__link-icon { text-align: center; font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); @media (width >= 80rem) { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } } } .turbo-progress-bar { display: none !important; } @layer base { :where(:root), :root:has(input.theme-controller[value=light]:checked), [data-theme=light] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(97.8% 0.005 297.73); --color-base-300: oklch(37.01% 0.0069 297.49); --color-base-content: oklch(37.57% 0.022 281.8); --color-primary: oklch(57.59% 0.247 287.24); --color-primary-content: oklch(96.57% 0.017 289.61); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(97.64% 0.001 286.38); --color-accent: oklch(62.31% 0.188 259.81); --color-accent-content: oklch(97.05% 0.014 254.6); --color-neutral: oklch(37.57% 0.0222 281.8); --color-neutral-content: oklch(98.41% 0.019 200.87); --color-info: oklch(71.48% 0.126 215.22); --color-info-content: oklch(98.41% 0.019 200.87); --color-success: oklch(73.11% 0.217 147.04); --color-success-content: oklch(98.1% 0.014 174.18); --color-warning: oklch(79.87% 0.164 73.09); --color-warning-content: oklch(99.34% 0.011 95.16); --color-error: oklch(65.39% 0.222 25.86); --color-error-content: oklch(98.76% 0.009 67.73); --radius-selector: 0.25rem; --radius-field: 0.375rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --color-base-100: oklch(31.23% 0.026 301.24); --color-base-200: oklch(25.39% 0.025 298.72); --color-base-300: oklch(23.44% 0.0194 298.63); --color-base-content: oklch(84.98% 0.014 295.28); --color-primary: oklch(53.93% 0.271 286.75); --color-primary-content: oklch(88.22% 0.062 290.17); --color-secondary: oklch(49.12% 0.021 303.05); --color-secondary-content: oklch(88.83% 0.007 304.23); --color-accent: oklch(54.61% 0.215 262.88); --color-accent-content: oklch(88.23% 0.057 254.13); --color-neutral: oklch(65.75% 0.022 294.95); --color-neutral-content: oklch(18.51% 0.017 301.92); --color-info: oklch(60.89% 0.111 221.72); --color-info-content: oklch(91.67% 0.077 205.04); --color-success: oklch(67.35% 0.201 146.84); --color-success-content: oklch(91.38% 0.069 168.24); --color-warning: oklch(72.59% 0.152 69.05); --color-warning-content: oklch(96.07% 0.057 93.2); --color-error: oklch(59.54% 0.208 26.28); --color-error-content: oklch(93.4% 0.039 54.86); --radius-selector: 0.25rem; --radius-field: 0.375rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } } @layer base { :root:has(input.theme-controller[value=light]:checked), [data-theme=light] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(97.8% 0.005 297.73); --color-base-300: oklch(37.01% 0.0069 297.49); --color-base-content: oklch(37.57% 0.022 281.8); --color-primary: oklch(57.59% 0.247 287.24); --color-primary-content: oklch(96.57% 0.017 289.61); --color-secondary: oklch(55.79% 0.022 301.91); --color-secondary-content: oklch(97.64% 0.001 286.38); --color-accent: oklch(62.31% 0.188 259.81); --color-accent-content: oklch(97.05% 0.014 254.6); --color-neutral: oklch(37.57% 0.0222 281.8); --color-neutral-content: oklch(98.41% 0.019 200.87); --color-info: oklch(71.48% 0.126 215.22); --color-info-content: oklch(98.41% 0.019 200.87); --color-success: oklch(73.11% 0.217 147.04); --color-success-content: oklch(98.1% 0.014 174.18); --color-warning: oklch(79.87% 0.164 73.09); --color-warning-content: oklch(99.34% 0.011 95.16); --color-error: oklch(65.39% 0.222 25.86); --color-error-content: oklch(98.76% 0.009 67.73); --radius-selector: 0.25rem; --radius-field: 0.375rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { :root:has(input.theme-controller[value=dark]:checked), [data-theme=dark] { color-scheme: dark; --color-base-100: oklch(31.23% 0.026 301.24); --color-base-200: oklch(25.39% 0.025 298.72); --color-base-300: oklch(23.44% 0.0194 298.63); --color-base-content: oklch(84.98% 0.014 295.28); --color-primary: oklch(53.93% 0.271 286.75); --color-primary-content: oklch(88.22% 0.062 290.17); --color-secondary: oklch(49.12% 0.021 303.05); --color-secondary-content: oklch(88.83% 0.007 304.23); --color-accent: oklch(54.61% 0.215 262.88); --color-accent-content: oklch(88.23% 0.057 254.13); --color-neutral: oklch(65.75% 0.022 294.95); --color-neutral-content: oklch(18.51% 0.017 301.92); --color-info: oklch(60.89% 0.111 221.72); --color-info-content: oklch(91.67% 0.077 205.04); --color-success: oklch(67.35% 0.201 146.84); --color-success-content: oklch(91.38% 0.069 168.24); --color-warning: oklch(72.59% 0.152 69.05); --color-warning-content: oklch(96.07% 0.057 93.2); --color-error: oklch(59.54% 0.208 26.28); --color-error-content: oklch(93.4% 0.039 54.86); --radius-selector: 0.25rem; --radius-field: 0.375rem; --radius-box: 0.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } } @layer base { @property --radialprogress { syntax: ""; inherits: true; initial-value: 0%; } } @layer base { :root { scrollbar-color: currentColor #0000; @supports (color: color-mix(in lab, red, red)) { scrollbar-color: color-mix(in oklch, currentColor 20%, #0000) #0000; } } } @layer base { :root, [data-theme] { background-color: var(--root-bg, var(--color-base-100)); color: var(--color-base-content); } } @layer base { :root { --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); } .chat { --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); } .tooltip { --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); } } @keyframes skeleton { 0% { background-position: 150%; } 100% { background-position: -50%; } } @keyframes indeterminate-progress { 0% { background-position-x: -75%; } 50% { background-position-x: 125%; } 100% { background-position-x: -75%; } } @keyframes progress-bar-stripes { 0% { background-position-x: 0.75rem; } } @keyframes radio { 0% { padding: 5px; } 50% { padding: 3px; } } @keyframes radio-inset { 0% { padding: 1px; } 50% { padding: 4px; } } @layer base { @media (prefers-color-scheme: dark) { :root { color-scheme: normal; --color-base-100: oklch(99.43% 0.001 286.38); --color-base-200: oklch(97.33% 0.008 271.33); --color-base-300: oklch(48.52% 0.0225 279.09); --color-base-content: oklch(42.06% 0.049 276.53); --color-primary: oklch(62.31% 0.188 259.81); --color-primary-content: oklch(97.05% 0.014 254.6); --color-secondary: oklch(33.96% 0.0922 270.3); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(45.11% 0.172 270.31); --color-neutral-content: oklch(82.15% 0.055 277.12); --color-info: oklch(70.38% 0.123 182.5); --color-info-content: oklch(98.36% 0.014 180.72); --color-success: oklch(76.81% 0.204 130.85); --color-success-content: oklch(98.57% 0.031 120.76); --color-warning: oklch(79.52% 0.162 86.05); --color-warning-content: oklch(98.73% 0.026 102.21); --color-error: oklch(64.5% 0.215 16.44); --color-error-content: oklch(96.94% 0.015 12.42); --radius-selector: 0.125rem; --radius-field: 0.25rem; --radius-box: 0.375rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } } @layer base { :where(:root), :root:has(input.theme-controller[value=corporate]:checked), [data-theme=corporate] { color-scheme: normal; --color-base-100: oklch(99.43% 0.001 286.38); --color-base-200: oklch(97.33% 0.008 271.33); --color-base-300: oklch(48.52% 0.0225 279.09); --color-base-content: oklch(42.06% 0.049 276.53); --color-primary: oklch(62.31% 0.188 259.81); --color-primary-content: oklch(97.05% 0.014 254.6); --color-secondary: oklch(33.96% 0.0922 270.3); --color-secondary-content: oklch(95.05% 0.003 308.43); --color-accent: oklch(65.59% 0.212 354.31); --color-accent-content: oklch(97.14% 0.014 343.2); --color-neutral: oklch(45.11% 0.172 270.31); --color-neutral-content: oklch(82.15% 0.055 277.12); --color-info: oklch(70.38% 0.123 182.5); --color-info-content: oklch(98.36% 0.014 180.72); --color-success: oklch(76.81% 0.204 130.85); --color-success-content: oklch(98.57% 0.031 120.76); --color-warning: oklch(79.52% 0.162 86.05); --color-warning-content: oklch(98.73% 0.026 102.21); --color-error: oklch(64.5% 0.215 16.44); --color-error-content: oklch(96.94% 0.015 12.42); --radius-selector: 0.125rem; --radius-field: 0.25rem; --radius-box: 0.375rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-ordinal { syntax: "*"; inherits: false; } @property --tw-slashed-zero { syntax: "*"; inherits: false; } @property --tw-numeric-figure { syntax: "*"; inherits: false; } @property --tw-numeric-spacing { syntax: "*"; inherits: false; } @property --tw-numeric-fraction { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-divide-y-reverse: 0; --tw-border-style: solid; --tw-leading: initial; --tw-font-weight: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; } } } /*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */