| |
| @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-translate-x: 0; |
| --tw-translate-y: 0; |
| --tw-translate-z: 0; |
| --tw-space-y-reverse: 0; |
| --tw-divide-y-reverse: 0; |
| --tw-border-style: solid; |
| --tw-gradient-position: initial; |
| --tw-gradient-from: #0000; |
| --tw-gradient-via: #0000; |
| --tw-gradient-to: #0000; |
| --tw-gradient-stops: initial; |
| --tw-gradient-via-stops: initial; |
| --tw-gradient-from-position: 0%; |
| --tw-gradient-via-position: 50%; |
| --tw-gradient-to-position: 100%; |
| --tw-leading: initial; |
| --tw-font-weight: initial; |
| --tw-tracking: 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; |
| } |
| } |
| } |
|
|
| @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-100: oklch(.936 .032 17.717); |
| --color-red-600: oklch(.577 .245 27.325); |
| --color-red-700: oklch(.505 .213 27.518); |
| --color-orange-50: oklch(.98 .016 73.684); |
| --color-orange-100: oklch(.954 .038 75.164); |
| --color-orange-200: oklch(.901 .076 70.697); |
| --color-orange-600: oklch(.646 .222 41.116); |
| --color-orange-700: oklch(.553 .195 38.402); |
| --color-orange-800: oklch(.47 .157 37.304); |
| --color-orange-900: oklch(.408 .123 38.172); |
| --color-amber-100: oklch(.962 .059 95.617); |
| --color-amber-400: oklch(.828 .189 84.429); |
| --color-amber-500: oklch(.769 .188 70.08); |
| --color-amber-600: oklch(.666 .179 58.318); |
| --color-yellow-100: oklch(.973 .071 103.193); |
| --color-yellow-500: oklch(.795 .184 86.047); |
| --color-yellow-700: oklch(.554 .135 66.442); |
| --color-green-50: oklch(.982 .018 155.826); |
| --color-green-100: oklch(.962 .044 156.743); |
| --color-green-200: oklch(.925 .084 155.995); |
| --color-green-400: oklch(.792 .209 151.711); |
| --color-green-500: oklch(.723 .219 149.579); |
| --color-green-600: oklch(.627 .194 149.214); |
| --color-green-700: oklch(.527 .154 150.069); |
| --color-green-800: oklch(.448 .119 151.328); |
| --color-green-900: oklch(.393 .095 152.535); |
| --color-emerald-100: oklch(.95 .052 163.051); |
| --color-emerald-700: oklch(.508 .118 165.612); |
| --color-blue-50: oklch(.97 .014 254.604); |
| --color-blue-100: oklch(.932 .032 255.585); |
| --color-blue-200: oklch(.882 .059 254.128); |
| --color-blue-300: oklch(.809 .105 251.813); |
| --color-blue-500: oklch(.623 .214 259.815); |
| --color-blue-600: oklch(.546 .245 262.881); |
| --color-blue-700: oklch(.488 .243 264.376); |
| --color-blue-800: oklch(.424 .199 265.638); |
| --color-blue-900: oklch(.379 .146 265.522); |
| --color-purple-50: oklch(.977 .014 308.299); |
| --color-purple-100: oklch(.946 .033 307.174); |
| --color-purple-200: oklch(.902 .063 306.703); |
| --color-purple-600: oklch(.558 .288 302.321); |
| --color-purple-700: oklch(.496 .265 301.924); |
| --color-slate-50: oklch(.984 .003 247.858); |
| --color-slate-100: oklch(.968 .007 247.896); |
| --color-slate-200: oklch(.929 .013 255.508); |
| --color-slate-300: oklch(.869 .022 252.894); |
| --color-slate-400: oklch(.704 .04 256.788); |
| --color-slate-500: oklch(.554 .046 257.417); |
| --color-slate-600: oklch(.446 .043 257.281); |
| --color-slate-700: oklch(.372 .044 257.287); |
| --color-slate-800: oklch(.279 .041 260.031); |
| --color-slate-900: oklch(.208 .042 265.755); |
| --color-gray-100: oklch(.967 .003 264.542); |
| --color-gray-200: oklch(.928 .006 264.531); |
| --color-gray-300: oklch(.872 .01 258.338); |
| --color-gray-400: oklch(.707 .022 261.325); |
| --color-white: #fff; |
| --spacing: .25rem; |
| --container-2xl: 42rem; |
| --container-3xl: 48rem; |
| --container-4xl: 56rem; |
| --container-5xl: 64rem; |
| --container-6xl: 72rem; |
| --container-7xl: 80rem; |
| --text-xs: .75rem; |
| --text-xs--line-height: calc(1 / .75); |
| --text-sm: .875rem; |
| --text-sm--line-height: calc(1.25 / .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-7xl: 4.5rem; |
| --text-7xl--line-height: 1; |
| --font-weight-normal: 400; |
| --font-weight-medium: 500; |
| --font-weight-semibold: 600; |
| --font-weight-bold: 700; |
| --tracking-tight: -.025em; |
| --tracking-wide: .025em; |
| --tracking-wider: .05em; |
| --leading-tight: 1.25; |
| --leading-relaxed: 1.625; |
| --default-transition-duration: .15s; |
| --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); |
| --default-font-family: var(--font-sans); |
| --default-font-feature-settings: var(--font-sans--font-feature-settings); |
| --default-font-variation-settings: var(--font-sans--font-variation-settings); |
| --default-mono-font-family: var(--font-mono); |
| --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); |
| --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); |
| } |
| } |
|
|
| @layer base { |
| *, :after, :before, ::backdrop { |
| box-sizing: border-box; |
| border: 0 solid; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| ::file-selector-button { |
| box-sizing: border-box; |
| border: 0 solid; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| html, :host { |
| -webkit-text-size-adjust: 100%; |
| tab-size: 4; |
| line-height: 1.5; |
| 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; |
| } |
|
|
| body { |
| line-height: inherit; |
| } |
|
|
| 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; |
| -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 { |
| vertical-align: baseline; |
| font-size: 75%; |
| line-height: 0; |
| position: relative; |
| } |
|
|
| sub { |
| bottom: -.25em; |
| } |
|
|
| sup { |
| top: -.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 { |
| vertical-align: middle; |
| display: block; |
| } |
|
|
| img, video { |
| max-width: 100%; |
| height: auto; |
| } |
|
|
| button, input, select, optgroup, textarea { |
| font: inherit; |
| font-feature-settings: inherit; |
| font-variation-settings: inherit; |
| letter-spacing: inherit; |
| color: inherit; |
| opacity: 1; |
| background-color: #0000; |
| border-radius: 0; |
| } |
|
|
| ::file-selector-button { |
| font: inherit; |
| font-feature-settings: inherit; |
| font-variation-settings: inherit; |
| letter-spacing: inherit; |
| color: inherit; |
| opacity: 1; |
| background-color: #0000; |
| border-radius: 0; |
| } |
|
|
| :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; |
| } |
|
|
| ::placeholder { |
| opacity: 1; |
| color: currentColor; |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| ::placeholder { |
| 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 { |
| padding-block: 0; |
| } |
|
|
| ::-webkit-datetime-edit-year-field { |
| padding-block: 0; |
| } |
|
|
| ::-webkit-datetime-edit-month-field { |
| padding-block: 0; |
| } |
|
|
| ::-webkit-datetime-edit-day-field { |
| padding-block: 0; |
| } |
|
|
| ::-webkit-datetime-edit-hour-field { |
| padding-block: 0; |
| } |
|
|
| ::-webkit-datetime-edit-minute-field { |
| padding-block: 0; |
| } |
|
|
| ::-webkit-datetime-edit-second-field { |
| padding-block: 0; |
| } |
|
|
| ::-webkit-datetime-edit-millisecond-field { |
| padding-block: 0; |
| } |
|
|
| ::-webkit-datetime-edit-meridiem-field { |
| padding-block: 0; |
| } |
|
|
| :-moz-ui-invalid { |
| box-shadow: none; |
| } |
|
|
| button, input:where([type="button"], [type="reset"], [type="submit"]) { |
| appearance: button; |
| } |
|
|
| ::file-selector-button { |
| appearance: button; |
| } |
|
|
| ::-webkit-inner-spin-button { |
| height: auto; |
| } |
|
|
| ::-webkit-outer-spin-button { |
| height: auto; |
| } |
|
|
| [hidden]:where(:not([hidden="until-found"])) { |
| display: none !important; |
| } |
|
|
| * { |
| border-color: var(--border); |
| outline-color: var(--ring); |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| * { |
| outline-color: color-mix(in oklab, var(--ring) 50%, transparent); |
| } |
| } |
|
|
| body { |
| background-color: var(--background); |
| color: var(--foreground); |
| } |
|
|
| * { |
| border-color: var(--border); |
| outline-color: var(--ring); |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| * { |
| outline-color: color-mix(in oklab, var(--ring) 50%, transparent); |
| } |
| } |
|
|
| body { |
| background-color: var(--background); |
| color: var(--foreground); |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 { |
| font-size: var(--text-2xl); |
| font-weight: var(--font-weight-medium); |
| line-height: 1.5; |
| } |
|
|
| :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 { |
| font-size: var(--text-xl); |
| font-weight: var(--font-weight-medium); |
| line-height: 1.5; |
| } |
|
|
| :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 { |
| font-size: var(--text-lg); |
| font-weight: var(--font-weight-medium); |
| line-height: 1.5; |
| } |
|
|
| :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button { |
| font-size: var(--text-base); |
| font-weight: var(--font-weight-medium); |
| line-height: 1.5; |
| } |
|
|
| :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input { |
| font-size: var(--text-base); |
| font-weight: var(--font-weight-normal); |
| line-height: 1.5; |
| } |
| } |
|
|
| @layer utilities { |
| .pointer-events-none { |
| pointer-events: none; |
| } |
|
|
| .absolute { |
| position: absolute; |
| } |
|
|
| .fixed { |
| position: fixed; |
| } |
|
|
| .relative { |
| position: relative; |
| } |
|
|
| .sticky { |
| position: sticky; |
| } |
|
|
| .-top-2 { |
| top: calc(var(--spacing) * -2); |
| } |
|
|
| .top-0 { |
| top: calc(var(--spacing) * 0); |
| } |
|
|
| .top-1\/2 { |
| top: 50%; |
| } |
|
|
| .top-8 { |
| top: calc(var(--spacing) * 8); |
| } |
|
|
| .top-20 { |
| top: calc(var(--spacing) * 20); |
| } |
|
|
| .-right-2 { |
| right: calc(var(--spacing) * -2); |
| } |
|
|
| .right-0 { |
| right: calc(var(--spacing) * 0); |
| } |
|
|
| .right-2 { |
| right: calc(var(--spacing) * 2); |
| } |
|
|
| .bottom-8 { |
| bottom: calc(var(--spacing) * 8); |
| } |
|
|
| .left-0 { |
| left: calc(var(--spacing) * 0); |
| } |
|
|
| .left-3 { |
| left: calc(var(--spacing) * 3); |
| } |
|
|
| .left-4 { |
| left: calc(var(--spacing) * 4); |
| } |
|
|
| .z-10 { |
| z-index: 10; |
| } |
|
|
| .z-50 { |
| z-index: 50; |
| } |
|
|
| .container { |
| width: 100%; |
| } |
|
|
| @media (width >= 40rem) { |
| .container { |
| max-width: 40rem; |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .container { |
| max-width: 48rem; |
| } |
| } |
|
|
| @media (width >= 64rem) { |
| .container { |
| max-width: 64rem; |
| } |
| } |
|
|
| @media (width >= 80rem) { |
| .container { |
| max-width: 80rem; |
| } |
| } |
|
|
| @media (width >= 96rem) { |
| .container { |
| max-width: 96rem; |
| } |
| } |
|
|
| .-mx-1 { |
| margin-inline: calc(var(--spacing) * -1); |
| } |
|
|
| .mx-1 { |
| margin-inline: calc(var(--spacing) * 1); |
| } |
|
|
| .mx-auto { |
| margin-inline: auto; |
| } |
|
|
| .my-1 { |
| margin-block: calc(var(--spacing) * 1); |
| } |
|
|
| .mt-0\.5 { |
| margin-top: calc(var(--spacing) * .5); |
| } |
|
|
| .mt-1 { |
| margin-top: calc(var(--spacing) * 1); |
| } |
|
|
| .mt-1\.5 { |
| margin-top: calc(var(--spacing) * 1.5); |
| } |
|
|
| .mt-2 { |
| margin-top: calc(var(--spacing) * 2); |
| } |
|
|
| .mt-3 { |
| margin-top: calc(var(--spacing) * 3); |
| } |
|
|
| .mt-4 { |
| margin-top: calc(var(--spacing) * 4); |
| } |
|
|
| .mt-6 { |
| margin-top: calc(var(--spacing) * 6); |
| } |
|
|
| .mt-8 { |
| margin-top: calc(var(--spacing) * 8); |
| } |
|
|
| .mt-10 { |
| margin-top: calc(var(--spacing) * 10); |
| } |
|
|
| .mt-12 { |
| margin-top: calc(var(--spacing) * 12); |
| } |
|
|
| .mt-16 { |
| margin-top: calc(var(--spacing) * 16); |
| } |
|
|
| .mb-1 { |
| margin-bottom: calc(var(--spacing) * 1); |
| } |
|
|
| .mb-2 { |
| margin-bottom: calc(var(--spacing) * 2); |
| } |
|
|
| .mb-3 { |
| margin-bottom: calc(var(--spacing) * 3); |
| } |
|
|
| .mb-4 { |
| margin-bottom: calc(var(--spacing) * 4); |
| } |
|
|
| .mb-6 { |
| margin-bottom: calc(var(--spacing) * 6); |
| } |
|
|
| .mb-8 { |
| margin-bottom: calc(var(--spacing) * 8); |
| } |
|
|
| .mb-10 { |
| margin-bottom: calc(var(--spacing) * 10); |
| } |
|
|
| .mb-12 { |
| margin-bottom: calc(var(--spacing) * 12); |
| } |
|
|
| .mb-16 { |
| margin-bottom: calc(var(--spacing) * 16); |
| } |
|
|
| .ml-3 { |
| margin-left: calc(var(--spacing) * 3); |
| } |
|
|
| .ml-4 { |
| margin-left: calc(var(--spacing) * 4); |
| } |
|
|
| .block { |
| display: block; |
| } |
|
|
| .flex { |
| display: flex; |
| } |
|
|
| .grid { |
| display: grid; |
| } |
|
|
| .hidden { |
| display: none; |
| } |
|
|
| .inline-block { |
| display: inline-block; |
| } |
|
|
| .inline-flex { |
| display: inline-flex; |
| } |
|
|
| .table { |
| display: table; |
| } |
|
|
| .size-3\.5 { |
| width: calc(var(--spacing) * 3.5); |
| height: calc(var(--spacing) * 3.5); |
| } |
|
|
| .size-4 { |
| width: calc(var(--spacing) * 4); |
| height: calc(var(--spacing) * 4); |
| } |
|
|
| .h-0\.5 { |
| height: calc(var(--spacing) * .5); |
| } |
|
|
| .h-1\.5 { |
| height: calc(var(--spacing) * 1.5); |
| } |
|
|
| .h-2 { |
| height: calc(var(--spacing) * 2); |
| } |
|
|
| .h-3 { |
| height: calc(var(--spacing) * 3); |
| } |
|
|
| .h-4 { |
| height: calc(var(--spacing) * 4); |
| } |
|
|
| .h-5 { |
| height: calc(var(--spacing) * 5); |
| } |
|
|
| .h-6 { |
| height: calc(var(--spacing) * 6); |
| } |
|
|
| .h-7 { |
| height: calc(var(--spacing) * 7); |
| } |
|
|
| .h-8 { |
| height: calc(var(--spacing) * 8); |
| } |
|
|
| .h-9 { |
| height: calc(var(--spacing) * 9); |
| } |
|
|
| .h-10 { |
| height: calc(var(--spacing) * 10); |
| } |
|
|
| .h-12 { |
| height: calc(var(--spacing) * 12); |
| } |
|
|
| .h-16 { |
| height: calc(var(--spacing) * 16); |
| } |
|
|
| .h-20 { |
| height: calc(var(--spacing) * 20); |
| } |
|
|
| .h-24 { |
| height: calc(var(--spacing) * 24); |
| } |
|
|
| .h-\[var\(--radix-select-trigger-height\)\] { |
| height: var(--radix-select-trigger-height); |
| } |
|
|
| .h-px { |
| height: 1px; |
| } |
|
|
| .max-h-\(--radix-select-content-available-height\) { |
| max-height: var(--radix-select-content-available-height); |
| } |
|
|
| .min-h-screen { |
| min-height: 100vh; |
| } |
|
|
| .w-0\.5 { |
| width: calc(var(--spacing) * .5); |
| } |
|
|
| .w-1\.5 { |
| width: calc(var(--spacing) * 1.5); |
| } |
|
|
| .w-2 { |
| width: calc(var(--spacing) * 2); |
| } |
|
|
| .w-3 { |
| width: calc(var(--spacing) * 3); |
| } |
|
|
| .w-4 { |
| width: calc(var(--spacing) * 4); |
| } |
|
|
| .w-5 { |
| width: calc(var(--spacing) * 5); |
| } |
|
|
| .w-6 { |
| width: calc(var(--spacing) * 6); |
| } |
|
|
| .w-7 { |
| width: calc(var(--spacing) * 7); |
| } |
|
|
| .w-8 { |
| width: calc(var(--spacing) * 8); |
| } |
|
|
| .w-9 { |
| width: calc(var(--spacing) * 9); |
| } |
|
|
| .w-10 { |
| width: calc(var(--spacing) * 10); |
| } |
|
|
| .w-12 { |
| width: calc(var(--spacing) * 12); |
| } |
|
|
| .w-16 { |
| width: calc(var(--spacing) * 16); |
| } |
|
|
| .w-20 { |
| width: calc(var(--spacing) * 20); |
| } |
|
|
| .w-24 { |
| width: calc(var(--spacing) * 24); |
| } |
|
|
| .w-fit { |
| width: fit-content; |
| } |
|
|
| .w-full { |
| width: 100%; |
| } |
|
|
| .max-w-2xl { |
| max-width: var(--container-2xl); |
| } |
|
|
| .max-w-3xl { |
| max-width: var(--container-3xl); |
| } |
|
|
| .max-w-4xl { |
| max-width: var(--container-4xl); |
| } |
|
|
| .max-w-5xl { |
| max-width: var(--container-5xl); |
| } |
|
|
| .max-w-6xl { |
| max-width: var(--container-6xl); |
| } |
|
|
| .max-w-7xl { |
| max-width: var(--container-7xl); |
| } |
|
|
| .max-w-none { |
| max-width: none; |
| } |
|
|
| .min-w-0 { |
| min-width: calc(var(--spacing) * 0); |
| } |
|
|
| .min-w-\[8rem\] { |
| min-width: 8rem; |
| } |
|
|
| .min-w-\[140px\] { |
| min-width: 140px; |
| } |
|
|
| .min-w-\[var\(--radix-select-trigger-width\)\] { |
| min-width: var(--radix-select-trigger-width); |
| } |
|
|
| .flex-1 { |
| flex: 1; |
| } |
|
|
| .flex-shrink-0, .shrink-0 { |
| flex-shrink: 0; |
| } |
|
|
| .origin-\(--radix-select-content-transform-origin\) { |
| transform-origin: var(--radix-select-content-transform-origin); |
| } |
|
|
| .-translate-y-1\/2 { |
| --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); |
| translate: var(--tw-translate-x) var(--tw-translate-y); |
| } |
|
|
| .rotate-90 { |
| rotate: 90deg; |
| } |
|
|
| .cursor-default { |
| cursor: default; |
| } |
|
|
| .cursor-not-allowed { |
| cursor: not-allowed; |
| } |
|
|
| .cursor-pointer { |
| cursor: pointer; |
| } |
|
|
| .scroll-my-1 { |
| scroll-margin-block: calc(var(--spacing) * 1); |
| } |
|
|
| .grid-cols-1 { |
| grid-template-columns: repeat(1, minmax(0, 1fr)); |
| } |
|
|
| .grid-cols-2 { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .flex-col { |
| flex-direction: column; |
| } |
|
|
| .flex-wrap { |
| flex-wrap: wrap; |
| } |
|
|
| .items-baseline { |
| align-items: baseline; |
| } |
|
|
| .items-center { |
| align-items: center; |
| } |
|
|
| .items-start { |
| align-items: flex-start; |
| } |
|
|
| .justify-between { |
| justify-content: space-between; |
| } |
|
|
| .justify-center { |
| justify-content: center; |
| } |
|
|
| .gap-1 { |
| gap: calc(var(--spacing) * 1); |
| } |
|
|
| .gap-2 { |
| gap: calc(var(--spacing) * 2); |
| } |
|
|
| .gap-3 { |
| gap: calc(var(--spacing) * 3); |
| } |
|
|
| .gap-4 { |
| gap: calc(var(--spacing) * 4); |
| } |
|
|
| .gap-6 { |
| gap: calc(var(--spacing) * 6); |
| } |
|
|
| .gap-8 { |
| gap: calc(var(--spacing) * 8); |
| } |
|
|
| :where(.space-y-1 > :not(:last-child)) { |
| --tw-space-y-reverse: 0; |
| margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); |
| margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); |
| } |
|
|
| :where(.space-y-2 > :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))); |
| } |
|
|
| :where(.space-y-3 > :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))); |
| } |
|
|
| :where(.space-y-4 > :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))); |
| } |
|
|
| :where(.space-y-6 > :not(:last-child)) { |
| --tw-space-y-reverse: 0; |
| margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); |
| margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); |
| } |
|
|
| :where(.space-y-8 > :not(:last-child)) { |
| --tw-space-y-reverse: 0; |
| margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); |
| margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))); |
| } |
|
|
| .gap-x-6 { |
| column-gap: calc(var(--spacing) * 6); |
| } |
|
|
| .gap-y-2 { |
| row-gap: calc(var(--spacing) * 2); |
| } |
|
|
| :where(.divide-y > :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))); |
| } |
|
|
| :where(.divide-gray-200 > :not(:last-child)) { |
| border-color: var(--color-gray-200); |
| } |
|
|
| .overflow-hidden { |
| overflow: hidden; |
| } |
|
|
| .overflow-x-auto { |
| overflow-x: auto; |
| } |
|
|
| .overflow-x-hidden { |
| overflow-x: hidden; |
| } |
|
|
| .overflow-y-auto { |
| overflow-y: auto; |
| } |
|
|
| .rounded { |
| border-radius: .25rem; |
| } |
|
|
| .rounded-full { |
| border-radius: 3.40282e38px; |
| } |
|
|
| .rounded-lg { |
| border-radius: var(--radius); |
| } |
|
|
| .rounded-md { |
| border-radius: calc(var(--radius) - 2px); |
| } |
|
|
| .rounded-sm { |
| border-radius: calc(var(--radius) - 4px); |
| } |
|
|
| .border { |
| border-style: var(--tw-border-style); |
| border-width: 1px; |
| } |
|
|
| .border-2 { |
| border-style: var(--tw-border-style); |
| border-width: 2px; |
| } |
|
|
| .border-y { |
| border-block-style: var(--tw-border-style); |
| border-block-width: 1px; |
| } |
|
|
| .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-l-2 { |
| border-left-style: var(--tw-border-style); |
| border-left-width: 2px; |
| } |
|
|
| .border-dashed { |
| --tw-border-style: dashed; |
| border-style: dashed; |
| } |
|
|
| .border-blue-200 { |
| border-color: var(--color-blue-200); |
| } |
|
|
| .border-blue-300 { |
| border-color: var(--color-blue-300); |
| } |
|
|
| .border-gray-100 { |
| border-color: var(--color-gray-100); |
| } |
|
|
| .border-gray-200 { |
| border-color: var(--color-gray-200); |
| } |
|
|
| .border-gray-300 { |
| border-color: var(--color-gray-300); |
| } |
|
|
| .border-green-200 { |
| border-color: var(--color-green-200); |
| } |
|
|
| .border-input { |
| border-color: var(--input); |
| } |
|
|
| .border-orange-200 { |
| border-color: var(--color-orange-200); |
| } |
|
|
| .border-purple-200 { |
| border-color: var(--color-purple-200); |
| } |
|
|
| .border-slate-200 { |
| border-color: var(--color-slate-200); |
| } |
|
|
| .border-slate-300 { |
| border-color: var(--color-slate-300); |
| } |
|
|
| .border-slate-700 { |
| border-color: var(--color-slate-700); |
| } |
|
|
| .border-slate-800 { |
| border-color: var(--color-slate-800); |
| } |
|
|
| .border-slate-900 { |
| border-color: var(--color-slate-900); |
| } |
|
|
| .border-transparent { |
| border-color: #0000; |
| } |
|
|
| .border-white { |
| border-color: var(--color-white); |
| } |
|
|
| .border-white\/20 { |
| border-color: #fff3; |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| .border-white\/20 { |
| border-color: color-mix(in oklab, var(--color-white) 20%, transparent); |
| } |
| } |
|
|
| .bg-amber-100 { |
| background-color: var(--color-amber-100); |
| } |
|
|
| .bg-amber-400 { |
| background-color: var(--color-amber-400); |
| } |
|
|
| .bg-blue-50 { |
| background-color: var(--color-blue-50); |
| } |
|
|
| .bg-blue-100 { |
| background-color: var(--color-blue-100); |
| } |
|
|
| .bg-blue-600 { |
| background-color: var(--color-blue-600); |
| } |
|
|
| .bg-border { |
| background-color: var(--border); |
| } |
|
|
| .bg-destructive { |
| background-color: var(--destructive); |
| } |
|
|
| .bg-emerald-100 { |
| background-color: var(--color-emerald-100); |
| } |
|
|
| .bg-gray-200 { |
| background-color: var(--color-gray-200); |
| } |
|
|
| .bg-green-50 { |
| background-color: var(--color-green-50); |
| } |
|
|
| .bg-green-100 { |
| background-color: var(--color-green-100); |
| } |
|
|
| .bg-green-500 { |
| background-color: var(--color-green-500); |
| } |
|
|
| .bg-green-600 { |
| background-color: var(--color-green-600); |
| } |
|
|
| .bg-input-background { |
| background-color: var(--input-background); |
| } |
|
|
| .bg-orange-50 { |
| background-color: var(--color-orange-50); |
| } |
|
|
| .bg-orange-100 { |
| background-color: var(--color-orange-100); |
| } |
|
|
| .bg-popover { |
| background-color: var(--popover); |
| } |
|
|
| .bg-primary { |
| background-color: var(--primary); |
| } |
|
|
| .bg-purple-50 { |
| background-color: var(--color-purple-50); |
| } |
|
|
| .bg-purple-100 { |
| background-color: var(--color-purple-100); |
| } |
|
|
| .bg-purple-600 { |
| background-color: var(--color-purple-600); |
| } |
|
|
| .bg-red-100 { |
| background-color: var(--color-red-100); |
| } |
|
|
| .bg-secondary { |
| background-color: var(--secondary); |
| } |
|
|
| .bg-slate-50 { |
| background-color: var(--color-slate-50); |
| } |
|
|
| .bg-slate-100 { |
| background-color: var(--color-slate-100); |
| } |
|
|
| .bg-slate-200 { |
| background-color: var(--color-slate-200); |
| } |
|
|
| .bg-slate-300 { |
| background-color: var(--color-slate-300); |
| } |
|
|
| .bg-slate-400 { |
| background-color: var(--color-slate-400); |
| } |
|
|
| .bg-slate-700 { |
| background-color: var(--color-slate-700); |
| } |
|
|
| .bg-slate-800 { |
| background-color: var(--color-slate-800); |
| } |
|
|
| .bg-slate-900 { |
| background-color: var(--color-slate-900); |
| } |
|
|
| .bg-transparent { |
| background-color: #0000; |
| } |
|
|
| .bg-white { |
| background-color: var(--color-white); |
| } |
|
|
| .bg-white\/10 { |
| background-color: #ffffff1a; |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| .bg-white\/10 { |
| background-color: color-mix(in oklab, var(--color-white) 10%, transparent); |
| } |
| } |
|
|
| .bg-yellow-100 { |
| background-color: var(--color-yellow-100); |
| } |
|
|
| .bg-gradient-to-b { |
| --tw-gradient-position: to bottom in oklab; |
| background-image: linear-gradient(var(--tw-gradient-stops)); |
| } |
|
|
| .bg-gradient-to-r { |
| --tw-gradient-position: to right in oklab; |
| background-image: linear-gradient(var(--tw-gradient-stops)); |
| } |
|
|
| .from-slate-50 { |
| --tw-gradient-from: var(--color-slate-50); |
| --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); |
| } |
|
|
| .from-slate-200 { |
| --tw-gradient-from: var(--color-slate-200); |
| --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); |
| } |
|
|
| .from-slate-900 { |
| --tw-gradient-from: var(--color-slate-900); |
| --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); |
| } |
|
|
| .via-slate-300 { |
| --tw-gradient-via: var(--color-slate-300); |
| --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); |
| --tw-gradient-stops: var(--tw-gradient-via-stops); |
| } |
|
|
| .to-slate-200 { |
| --tw-gradient-to: var(--color-slate-200); |
| --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); |
| } |
|
|
| .to-slate-800 { |
| --tw-gradient-to: var(--color-slate-800); |
| --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); |
| } |
|
|
| .to-white { |
| --tw-gradient-to: var(--color-white); |
| --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); |
| } |
|
|
| .p-1 { |
| padding: calc(var(--spacing) * 1); |
| } |
|
|
| .p-3 { |
| padding: calc(var(--spacing) * 3); |
| } |
|
|
| .p-4 { |
| padding: calc(var(--spacing) * 4); |
| } |
|
|
| .p-5 { |
| padding: calc(var(--spacing) * 5); |
| } |
|
|
| .p-6 { |
| padding: calc(var(--spacing) * 6); |
| } |
|
|
| .p-8 { |
| padding: calc(var(--spacing) * 8); |
| } |
|
|
| .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-5 { |
| padding-inline: calc(var(--spacing) * 5); |
| } |
|
|
| .px-6 { |
| padding-inline: calc(var(--spacing) * 6); |
| } |
|
|
| .px-8 { |
| padding-inline: calc(var(--spacing) * 8); |
| } |
|
|
| .py-0\.5 { |
| padding-block: calc(var(--spacing) * .5); |
| } |
|
|
| .py-1 { |
| padding-block: calc(var(--spacing) * 1); |
| } |
|
|
| .py-1\.5 { |
| padding-block: calc(var(--spacing) * 1.5); |
| } |
|
|
| .py-2 { |
| padding-block: calc(var(--spacing) * 2); |
| } |
|
|
| .py-2\.5 { |
| padding-block: calc(var(--spacing) * 2.5); |
| } |
|
|
| .py-3 { |
| padding-block: calc(var(--spacing) * 3); |
| } |
|
|
| .py-4 { |
| padding-block: calc(var(--spacing) * 4); |
| } |
|
|
| .py-6 { |
| padding-block: calc(var(--spacing) * 6); |
| } |
|
|
| .py-8 { |
| padding-block: calc(var(--spacing) * 8); |
| } |
|
|
| .py-10 { |
| padding-block: calc(var(--spacing) * 10); |
| } |
|
|
| .py-12 { |
| padding-block: calc(var(--spacing) * 12); |
| } |
|
|
| .py-16 { |
| padding-block: calc(var(--spacing) * 16); |
| } |
|
|
| .py-20 { |
| padding-block: calc(var(--spacing) * 20); |
| } |
|
|
| .pt-1 { |
| padding-top: calc(var(--spacing) * 1); |
| } |
|
|
| .pt-3 { |
| padding-top: calc(var(--spacing) * 3); |
| } |
|
|
| .pt-4 { |
| padding-top: calc(var(--spacing) * 4); |
| } |
|
|
| .pt-6 { |
| padding-top: calc(var(--spacing) * 6); |
| } |
|
|
| .pt-8 { |
| padding-top: calc(var(--spacing) * 8); |
| } |
|
|
| .pt-12 { |
| padding-top: calc(var(--spacing) * 12); |
| } |
|
|
| .pr-4 { |
| padding-right: calc(var(--spacing) * 4); |
| } |
|
|
| .pr-8 { |
| padding-right: calc(var(--spacing) * 8); |
| } |
|
|
| .pb-4 { |
| padding-bottom: calc(var(--spacing) * 4); |
| } |
|
|
| .pl-2 { |
| padding-left: calc(var(--spacing) * 2); |
| } |
|
|
| .pl-4 { |
| padding-left: calc(var(--spacing) * 4); |
| } |
|
|
| .pl-6 { |
| padding-left: calc(var(--spacing) * 6); |
| } |
|
|
| .pl-10 { |
| padding-left: calc(var(--spacing) * 10); |
| } |
|
|
| .text-center { |
| text-align: center; |
| } |
|
|
| .text-left { |
| text-align: left; |
| } |
|
|
| .text-right { |
| text-align: right; |
| } |
|
|
| .font-mono { |
| font-family: var(--font-mono); |
| } |
|
|
| .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-4xl { |
| font-size: var(--text-4xl); |
| line-height: var(--tw-leading, var(--text-4xl--line-height)); |
| } |
|
|
| .text-5xl { |
| font-size: var(--text-5xl); |
| line-height: var(--tw-leading, var(--text-5xl--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-relaxed { |
| --tw-leading: var(--leading-relaxed); |
| line-height: var(--leading-relaxed); |
| } |
|
|
| .leading-tight { |
| --tw-leading: var(--leading-tight); |
| line-height: var(--leading-tight); |
| } |
|
|
| .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-semibold { |
| --tw-font-weight: var(--font-weight-semibold); |
| font-weight: var(--font-weight-semibold); |
| } |
|
|
| .tracking-tight { |
| --tw-tracking: var(--tracking-tight); |
| letter-spacing: var(--tracking-tight); |
| } |
|
|
| .tracking-wide { |
| --tw-tracking: var(--tracking-wide); |
| letter-spacing: var(--tracking-wide); |
| } |
|
|
| .tracking-wider { |
| --tw-tracking: var(--tracking-wider); |
| letter-spacing: var(--tracking-wider); |
| } |
|
|
| .whitespace-nowrap { |
| white-space: nowrap; |
| } |
|
|
| .whitespace-pre-wrap { |
| white-space: pre-wrap; |
| } |
|
|
| .text-amber-600 { |
| color: var(--color-amber-600); |
| } |
|
|
| .text-blue-500 { |
| color: var(--color-blue-500); |
| } |
|
|
| .text-blue-600 { |
| color: var(--color-blue-600); |
| } |
|
|
| .text-blue-700 { |
| color: var(--color-blue-700); |
| } |
|
|
| .text-blue-800 { |
| color: var(--color-blue-800); |
| } |
|
|
| .text-blue-900 { |
| color: var(--color-blue-900); |
| } |
|
|
| .text-emerald-700 { |
| color: var(--color-emerald-700); |
| } |
|
|
| .text-foreground { |
| color: var(--foreground); |
| } |
|
|
| .text-gray-400 { |
| color: var(--color-gray-400); |
| } |
|
|
| .text-green-400 { |
| color: var(--color-green-400); |
| } |
|
|
| .text-green-500 { |
| color: var(--color-green-500); |
| } |
|
|
| .text-green-600 { |
| color: var(--color-green-600); |
| } |
|
|
| .text-green-700 { |
| color: var(--color-green-700); |
| } |
|
|
| .text-green-800 { |
| color: var(--color-green-800); |
| } |
|
|
| .text-green-900 { |
| color: var(--color-green-900); |
| } |
|
|
| .text-muted-foreground { |
| color: var(--muted-foreground); |
| } |
|
|
| .text-orange-600 { |
| color: var(--color-orange-600); |
| } |
|
|
| .text-orange-700 { |
| color: var(--color-orange-700); |
| } |
|
|
| .text-orange-800 { |
| color: var(--color-orange-800); |
| } |
|
|
| .text-orange-900 { |
| color: var(--color-orange-900); |
| } |
|
|
| .text-popover-foreground { |
| color: var(--popover-foreground); |
| } |
|
|
| .text-primary-foreground { |
| color: var(--primary-foreground); |
| } |
|
|
| .text-purple-600 { |
| color: var(--color-purple-600); |
| } |
|
|
| .text-purple-700 { |
| color: var(--color-purple-700); |
| } |
|
|
| .text-red-600 { |
| color: var(--color-red-600); |
| } |
|
|
| .text-red-700 { |
| color: var(--color-red-700); |
| } |
|
|
| .text-secondary-foreground { |
| color: var(--secondary-foreground); |
| } |
|
|
| .text-slate-300 { |
| color: var(--color-slate-300); |
| } |
|
|
| .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-900 { |
| color: var(--color-slate-900); |
| } |
|
|
| .text-white { |
| color: var(--color-white); |
| } |
|
|
| .text-yellow-500 { |
| color: var(--color-yellow-500); |
| } |
|
|
| .text-yellow-700 { |
| color: var(--color-yellow-700); |
| } |
|
|
| .uppercase { |
| text-transform: uppercase; |
| } |
|
|
| .underline { |
| text-decoration-line: underline; |
| } |
|
|
| .opacity-50 { |
| opacity: .5; |
| } |
|
|
| .opacity-60 { |
| opacity: .6; |
| } |
|
|
| .shadow-md { |
| --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a); |
| box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); |
| } |
|
|
| .shadow-sm { |
| --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); |
| box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); |
| } |
|
|
| .outline-hidden { |
| --tw-outline-style: none; |
| outline-style: none; |
| } |
|
|
| @media (forced-colors: active) { |
| .outline-hidden { |
| outline-offset: 2px; |
| outline: 2px solid #0000; |
| } |
| } |
|
|
| .outline { |
| outline-style: var(--tw-outline-style); |
| outline-width: 1px; |
| } |
|
|
| .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 { |
| --tw-backdrop-blur: blur(8px); |
| -webkit-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, ); |
| 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, ); |
| } |
|
|
| .transition-\[color\,box-shadow\] { |
| transition-property: color, box-shadow; |
| 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-colors { |
| transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; |
| 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-shadow { |
| transition-property: box-shadow; |
| 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)); |
| } |
|
|
| .outline-none { |
| --tw-outline-style: none; |
| outline-style: none; |
| } |
|
|
| .select-none { |
| -webkit-user-select: none; |
| user-select: none; |
| } |
|
|
| @media (hover: hover) { |
| .group-hover\:translate-x-1:is(:where(.group):hover *) { |
| --tw-translate-x: calc(var(--spacing) * 1); |
| translate: var(--tw-translate-x) var(--tw-translate-y); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .group-hover\:gap-3:is(:where(.group):hover *) { |
| gap: calc(var(--spacing) * 3); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .group-hover\:text-slate-700:is(:where(.group):hover *) { |
| color: var(--color-slate-700); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .group-hover\:text-slate-900:is(:where(.group):hover *) { |
| color: var(--color-slate-900); |
| } |
| } |
|
|
| .selection\:bg-primary ::selection, .selection\:bg-primary::selection { |
| background-color: var(--primary); |
| } |
|
|
| .selection\:text-primary-foreground ::selection, .selection\:text-primary-foreground::selection { |
| color: var(--primary-foreground); |
| } |
|
|
| .file\:inline-flex::file-selector-button { |
| display: inline-flex; |
| } |
|
|
| .file\:h-7::file-selector-button { |
| height: calc(var(--spacing) * 7); |
| } |
|
|
| .file\:border-0::file-selector-button { |
| border-style: var(--tw-border-style); |
| border-width: 0; |
| } |
|
|
| .file\:bg-transparent::file-selector-button { |
| background-color: #0000; |
| } |
|
|
| .file\:text-sm::file-selector-button { |
| font-size: var(--text-sm); |
| line-height: var(--tw-leading, var(--text-sm--line-height)); |
| } |
|
|
| .file\:font-medium::file-selector-button { |
| --tw-font-weight: var(--font-weight-medium); |
| font-weight: var(--font-weight-medium); |
| } |
|
|
| .file\:text-foreground::file-selector-button { |
| color: var(--foreground); |
| } |
|
|
| .placeholder\:text-muted-foreground::placeholder { |
| color: var(--muted-foreground); |
| } |
|
|
| @media (hover: hover) { |
| .hover\:gap-3:hover { |
| gap: calc(var(--spacing) * 3); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:border-slate-300:hover { |
| border-color: var(--color-slate-300); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:border-slate-900:hover { |
| border-color: var(--color-slate-900); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:bg-amber-500:hover { |
| background-color: var(--color-amber-500); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:bg-slate-50:hover { |
| background-color: var(--color-slate-50); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:bg-slate-100:hover { |
| background-color: var(--color-slate-100); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:bg-slate-800:hover { |
| background-color: var(--color-slate-800); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:bg-white:hover { |
| background-color: var(--color-white); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:bg-white\/10:hover { |
| background-color: #ffffff1a; |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| .hover\:bg-white\/10:hover { |
| background-color: color-mix(in oklab, var(--color-white) 10%, transparent); |
| } |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:text-blue-700:hover { |
| color: var(--color-blue-700); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:text-slate-600:hover { |
| color: var(--color-slate-600); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:text-slate-900:hover { |
| color: var(--color-slate-900); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:text-white:hover { |
| color: var(--color-white); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:underline:hover { |
| text-decoration-line: underline; |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:opacity-80:hover { |
| opacity: .8; |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:shadow-lg:hover { |
| --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); |
| box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:shadow-md:hover { |
| --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a); |
| box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .hover\:shadow-sm:hover { |
| --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); |
| box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); |
| } |
| } |
|
|
| .focus\:border-transparent:focus { |
| border-color: #0000; |
| } |
|
|
| .focus\:bg-accent:focus { |
| background-color: var(--accent); |
| } |
|
|
| .focus\:text-accent-foreground:focus { |
| color: var(--accent-foreground); |
| } |
|
|
| .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-slate-900:focus { |
| --tw-ring-color: var(--color-slate-900); |
| } |
|
|
| .focus\:outline-none:focus { |
| --tw-outline-style: none; |
| outline-style: none; |
| } |
|
|
| .focus-visible\:border-ring:focus-visible { |
| border-color: var(--ring); |
| } |
|
|
| .focus-visible\:ring-\[3px\]:focus-visible { |
| --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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-visible\:ring-destructive\/20:focus-visible { |
| --tw-ring-color: var(--destructive); |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| .focus-visible\:ring-destructive\/20:focus-visible { |
| --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); |
| } |
| } |
|
|
| .focus-visible\:ring-ring\/50:focus-visible { |
| --tw-ring-color: var(--ring); |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| .focus-visible\:ring-ring\/50:focus-visible { |
| --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); |
| } |
| } |
|
|
| .disabled\:pointer-events-none:disabled { |
| pointer-events: none; |
| } |
|
|
| .disabled\:cursor-not-allowed:disabled { |
| cursor: not-allowed; |
| } |
|
|
| .disabled\:bg-slate-300:disabled { |
| background-color: var(--color-slate-300); |
| } |
|
|
| .disabled\:opacity-50:disabled { |
| opacity: .5; |
| } |
|
|
| .aria-invalid\:border-destructive[aria-invalid="true"] { |
| border-color: var(--destructive); |
| } |
|
|
| .aria-invalid\:ring-destructive\/20[aria-invalid="true"] { |
| --tw-ring-color: var(--destructive); |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| .aria-invalid\:ring-destructive\/20[aria-invalid="true"] { |
| --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); |
| } |
| } |
|
|
| .data-\[disabled\]\:pointer-events-none[data-disabled] { |
| pointer-events: none; |
| } |
|
|
| .data-\[disabled\]\:opacity-50[data-disabled] { |
| opacity: .5; |
| } |
|
|
| .data-\[placeholder\]\:text-muted-foreground[data-placeholder] { |
| color: var(--muted-foreground); |
| } |
|
|
| .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] { |
| --tw-translate-y: calc(var(--spacing) * 1); |
| translate: var(--tw-translate-x) var(--tw-translate-y); |
| } |
|
|
| .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] { |
| --tw-enter-translate-y: calc(2 * var(--spacing) * -1); |
| } |
|
|
| .data-\[side\=left\]\:-translate-x-1[data-side="left"] { |
| --tw-translate-x: calc(var(--spacing) * -1); |
| translate: var(--tw-translate-x) var(--tw-translate-y); |
| } |
|
|
| .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] { |
| --tw-enter-translate-x: calc(2 * var(--spacing)); |
| } |
|
|
| .data-\[side\=right\]\:translate-x-1[data-side="right"] { |
| --tw-translate-x: calc(var(--spacing) * 1); |
| translate: var(--tw-translate-x) var(--tw-translate-y); |
| } |
|
|
| .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] { |
| --tw-enter-translate-x: calc(2 * var(--spacing) * -1); |
| } |
|
|
| .data-\[side\=top\]\:-translate-y-1[data-side="top"] { |
| --tw-translate-y: calc(var(--spacing) * -1); |
| translate: var(--tw-translate-x) var(--tw-translate-y); |
| } |
|
|
| .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] { |
| --tw-enter-translate-y: calc(2 * var(--spacing)); |
| } |
|
|
| .data-\[size\=default\]\:h-9[data-size="default"] { |
| height: calc(var(--spacing) * 9); |
| } |
|
|
| .data-\[size\=sm\]\:h-8[data-size="sm"] { |
| height: calc(var(--spacing) * 8); |
| } |
|
|
| :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] { |
| -webkit-line-clamp: 1; |
| -webkit-box-orient: vertical; |
| display: -webkit-box; |
| overflow: hidden; |
| } |
|
|
| :is(.\*\:data-\[slot\=select-value\]\:flex > *)[data-slot="select-value"] { |
| display: flex; |
| } |
|
|
| :is(.\*\:data-\[slot\=select-value\]\:items-center > *)[data-slot="select-value"] { |
| align-items: center; |
| } |
|
|
| :is(.\*\:data-\[slot\=select-value\]\:gap-2 > *)[data-slot="select-value"] { |
| gap: calc(var(--spacing) * 2); |
| } |
|
|
| .data-\[state\=closed\]\:animate-out[data-state="closed"] { |
| animation: exit var(--tw-duration, .15s) var(--tw-ease, ease); |
| } |
|
|
| .data-\[state\=closed\]\:fade-out-0[data-state="closed"] { |
| --tw-exit-opacity: 0; |
| } |
|
|
| .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] { |
| --tw-exit-scale: .95; |
| } |
|
|
| .data-\[state\=open\]\:animate-in[data-state="open"] { |
| animation: enter var(--tw-duration, .15s) var(--tw-ease, ease); |
| } |
|
|
| .data-\[state\=open\]\:fade-in-0[data-state="open"] { |
| --tw-enter-opacity: 0; |
| } |
|
|
| .data-\[state\=open\]\:zoom-in-95[data-state="open"] { |
| --tw-enter-scale: .95; |
| } |
|
|
| @media (width >= 40rem) { |
| .sm\:w-48 { |
| width: calc(var(--spacing) * 48); |
| } |
| } |
|
|
| @media (width >= 40rem) { |
| .sm\:w-auto { |
| width: auto; |
| } |
| } |
|
|
| @media (width >= 40rem) { |
| .sm\:grid-cols-2 { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (width >= 40rem) { |
| .sm\:flex-row { |
| flex-direction: row; |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:block { |
| display: block; |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:w-auto { |
| width: auto; |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:flex-none { |
| flex: none; |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:rotate-0 { |
| rotate: none; |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:grid-cols-2 { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:grid-cols-3 { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:grid-cols-4 { |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:flex-row { |
| flex-direction: row; |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:items-center { |
| align-items: center; |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:py-28 { |
| padding-block: calc(var(--spacing) * 28); |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:py-32 { |
| padding-block: calc(var(--spacing) * 32); |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:text-3xl { |
| font-size: var(--text-3xl); |
| line-height: var(--tw-leading, var(--text-3xl--line-height)); |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:text-4xl { |
| font-size: var(--text-4xl); |
| line-height: var(--tw-leading, var(--text-4xl--line-height)); |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:text-5xl { |
| font-size: var(--text-5xl); |
| line-height: var(--tw-leading, var(--text-5xl--line-height)); |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:text-7xl { |
| font-size: var(--text-7xl); |
| line-height: var(--tw-leading, var(--text-7xl--line-height)); |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:text-sm { |
| font-size: var(--text-sm); |
| line-height: var(--tw-leading, var(--text-sm--line-height)); |
| } |
| } |
|
|
| @media (width >= 48rem) { |
| .md\:text-xl { |
| font-size: var(--text-xl); |
| line-height: var(--tw-leading, var(--text-xl--line-height)); |
| } |
| } |
|
|
| @media (width >= 64rem) { |
| .lg\:block { |
| display: block; |
| } |
| } |
|
|
| @media (width >= 64rem) { |
| .lg\:flex { |
| display: flex; |
| } |
| } |
|
|
| @media (width >= 64rem) { |
| .lg\:hidden { |
| display: none; |
| } |
| } |
|
|
| @media (width >= 64rem) { |
| .lg\:w-48 { |
| width: calc(var(--spacing) * 48); |
| } |
| } |
|
|
| @media (width >= 64rem) { |
| .lg\:grid-cols-2 { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (width >= 64rem) { |
| .lg\:grid-cols-3 { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (width >= 64rem) { |
| .lg\:grid-cols-4 { |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (width >= 64rem) { |
| .lg\:flex-row { |
| flex-direction: row; |
| } |
| } |
|
|
| .dark\:bg-destructive\/60:is(.dark *) { |
| background-color: var(--destructive); |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| .dark\:bg-destructive\/60:is(.dark *) { |
| background-color: color-mix(in oklab, var(--destructive) 60%, transparent); |
| } |
| } |
|
|
| .dark\:bg-input\/30:is(.dark *) { |
| background-color: var(--input); |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| .dark\:bg-input\/30:is(.dark *) { |
| background-color: color-mix(in oklab, var(--input) 30%, transparent); |
| } |
| } |
|
|
| @media (hover: hover) { |
| .dark\:hover\:bg-input\/50:is(.dark *):hover { |
| background-color: var(--input); |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| .dark\:hover\:bg-input\/50:is(.dark *):hover { |
| background-color: color-mix(in oklab, var(--input) 50%, transparent); |
| } |
| } |
| } |
|
|
| .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible { |
| --tw-ring-color: var(--destructive); |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible { |
| --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); |
| } |
| } |
|
|
| .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] { |
| --tw-ring-color: var(--destructive); |
| } |
|
|
| @supports (color: color-mix(in lab, red, red)) { |
| .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] { |
| --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); |
| } |
| } |
|
|
| .\[\&_svg\]\:pointer-events-none svg { |
| pointer-events: none; |
| } |
|
|
| .\[\&_svg\]\:shrink-0 svg { |
| flex-shrink: 0; |
| } |
|
|
| .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) { |
| width: calc(var(--spacing) * 4); |
| height: calc(var(--spacing) * 4); |
| } |
| |
| .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*="text-"]) { |
| color: var(--muted-foreground); |
| } |
| |
| :is(.\*\:\[span\]\:last\:flex > *):is(span):last-child { |
| display: flex; |
| } |
| |
| :is(.\*\:\[span\]\:last\:items-center > *):is(span):last-child { |
| align-items: center; |
| } |
| |
| :is(.\*\:\[span\]\:last\:gap-2 > *):is(span):last-child { |
| gap: calc(var(--spacing) * 2); |
| } |
| |
| .\[\&\>svg\]\:pointer-events-none > svg { |
| pointer-events: none; |
| } |
| |
| .\[\&\>svg\]\:size-3 > svg { |
| width: calc(var(--spacing) * 3); |
| height: calc(var(--spacing) * 3); |
| } |
| |
| @media (hover: hover) { |
| a.\[a\&\]\:hover\:bg-accent:hover { |
| background-color: var(--accent); |
| } |
| } |
| |
| @media (hover: hover) { |
| a.\[a\&\]\:hover\:bg-destructive\/90:hover { |
| background-color: var(--destructive); |
| } |
| |
| @supports (color: color-mix(in lab, red, red)) { |
| a.\[a\&\]\:hover\:bg-destructive\/90:hover { |
| background-color: color-mix(in oklab, var(--destructive) 90%, transparent); |
| } |
| } |
| } |
| |
| @media (hover: hover) { |
| a.\[a\&\]\:hover\:bg-primary\/90:hover { |
| background-color: var(--primary); |
| } |
| |
| @supports (color: color-mix(in lab, red, red)) { |
| a.\[a\&\]\:hover\:bg-primary\/90:hover { |
| background-color: color-mix(in oklab, var(--primary) 90%, transparent); |
| } |
| } |
| } |
| |
| @media (hover: hover) { |
| a.\[a\&\]\:hover\:bg-secondary\/90:hover { |
| background-color: var(--secondary); |
| } |
| |
| @supports (color: color-mix(in lab, red, red)) { |
| a.\[a\&\]\:hover\:bg-secondary\/90:hover { |
| background-color: color-mix(in oklab, var(--secondary) 90%, transparent); |
| } |
| } |
| } |
| |
| @media (hover: hover) { |
| a.\[a\&\]\:hover\:text-accent-foreground:hover { |
| color: var(--accent-foreground); |
| } |
| } |
| } |
| |
| :root { |
| --font-size: 16px; |
| --background: #fff; |
| --foreground: oklch(.145 0 0); |
| --card: #fff; |
| --card-foreground: oklch(.145 0 0); |
| --popover: oklch(1 0 0); |
| --popover-foreground: oklch(.145 0 0); |
| --primary: #030213; |
| --primary-foreground: oklch(1 0 0); |
| --secondary: oklch(.95 .0058 264.53); |
| --secondary-foreground: #030213; |
| --muted: #ececf0; |
| --muted-foreground: #717182; |
| --accent: #e9ebef; |
| --accent-foreground: #030213; |
| --destructive: #d4183d; |
| --destructive-foreground: #fff; |
| --border: #0000001a; |
| --input: transparent; |
| --input-background: #f3f3f5; |
| --switch-background: #cbced4; |
| --font-weight-medium: 500; |
| --font-weight-normal: 400; |
| --ring: oklch(.708 0 0); |
| --chart-1: oklch(.646 .222 41.116); |
| --chart-2: oklch(.6 .118 184.704); |
| --chart-3: oklch(.398 .07 227.392); |
| --chart-4: oklch(.828 .189 84.429); |
| --chart-5: oklch(.769 .188 70.08); |
| --radius: .625rem; |
| --sidebar: oklch(.985 0 0); |
| --sidebar-foreground: oklch(.145 0 0); |
| --sidebar-primary: #030213; |
| --sidebar-primary-foreground: oklch(.985 0 0); |
| --sidebar-accent: oklch(.97 0 0); |
| --sidebar-accent-foreground: oklch(.205 0 0); |
| --sidebar-border: oklch(.922 0 0); |
| --sidebar-ring: oklch(.708 0 0); |
| } |
| |
| .dark { |
| --background: oklch(.145 0 0); |
| --foreground: oklch(.985 0 0); |
| --card: oklch(.145 0 0); |
| --card-foreground: oklch(.985 0 0); |
| --popover: oklch(.145 0 0); |
| --popover-foreground: oklch(.985 0 0); |
| --primary: oklch(.985 0 0); |
| --primary-foreground: oklch(.205 0 0); |
| --secondary: oklch(.269 0 0); |
| --secondary-foreground: oklch(.985 0 0); |
| --muted: oklch(.269 0 0); |
| --muted-foreground: oklch(.708 0 0); |
| --accent: oklch(.269 0 0); |
| --accent-foreground: oklch(.985 0 0); |
| --destructive: oklch(.396 .141 25.723); |
| --destructive-foreground: oklch(.637 .237 25.331); |
| --border: oklch(.269 0 0); |
| --input: oklch(.269 0 0); |
| --ring: oklch(.439 0 0); |
| --font-weight-medium: 500; |
| --font-weight-normal: 400; |
| --chart-1: oklch(.488 .243 264.376); |
| --chart-2: oklch(.696 .17 162.48); |
| --chart-3: oklch(.769 .188 70.08); |
| --chart-4: oklch(.627 .265 303.9); |
| --chart-5: oklch(.645 .246 16.439); |
| --sidebar: oklch(.205 0 0); |
| --sidebar-foreground: oklch(.985 0 0); |
| --sidebar-primary: oklch(.488 .243 264.376); |
| --sidebar-primary-foreground: oklch(.985 0 0); |
| --sidebar-accent: oklch(.269 0 0); |
| --sidebar-accent-foreground: oklch(.985 0 0); |
| --sidebar-border: oklch(.269 0 0); |
| --sidebar-ring: oklch(.439 0 0); |
| } |
| |
| html { |
| font-size: var(--font-size); |
| } |
| |
| @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; |
| } |
| |
| @property --tw-space-y-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-gradient-position { |
| syntax: "*"; |
| inherits: false |
| } |
| |
| @property --tw-gradient-from { |
| syntax: "<color>"; |
| inherits: false; |
| initial-value: #0000; |
| } |
| |
| @property --tw-gradient-via { |
| syntax: "<color>"; |
| inherits: false; |
| initial-value: #0000; |
| } |
| |
| @property --tw-gradient-to { |
| syntax: "<color>"; |
| inherits: false; |
| initial-value: #0000; |
| } |
| |
| @property --tw-gradient-stops { |
| syntax: "*"; |
| inherits: false |
| } |
| |
| @property --tw-gradient-via-stops { |
| syntax: "*"; |
| inherits: false |
| } |
| |
| @property --tw-gradient-from-position { |
| syntax: "<length-percentage>"; |
| inherits: false; |
| initial-value: 0%; |
| } |
| |
| @property --tw-gradient-via-position { |
| syntax: "<length-percentage>"; |
| inherits: false; |
| initial-value: 50%; |
| } |
| |
| @property --tw-gradient-to-position { |
| syntax: "<length-percentage>"; |
| inherits: false; |
| initial-value: 100%; |
| } |
| |
| @property --tw-leading { |
| syntax: "*"; |
| inherits: false |
| } |
| |
| @property --tw-font-weight { |
| syntax: "*"; |
| inherits: false |
| } |
| |
| @property --tw-tracking { |
| 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: "<percentage>"; |
| 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: "<percentage>"; |
| 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: "<length>"; |
| inherits: false; |
| initial-value: 0; |
| } |
| |
| @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: "<percentage>"; |
| 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 |
| } |
| |
| @keyframes enter { |
| from { |
| opacity: var(--tw-enter-opacity, 1); |
| transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); |
| } |
| } |
| |
| @keyframes exit { |
| to { |
| opacity: var(--tw-exit-opacity, 1); |
| transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); |
| } |
| } |
| |
| .atomic-scroll-area { |
| scrollbar-gutter: stable; |
| scrollbar-width: auto; |
| scrollbar-color: #94a3b8 #f1f5f9; |
| } |
| |
| .atomic-scroll-area::-webkit-scrollbar { |
| width: 10px; |
| height: 10px; |
| } |
| |
| .atomic-scroll-area::-webkit-scrollbar-track { |
| background: #f1f5f9; |
| } |
| |
| .atomic-scroll-area::-webkit-scrollbar-thumb { |
| background-color: #94a3b8; |
| border-radius: 9999px; |
| border: 2px solid #f1f5f9; |
| } |
| |
| .atomic-scroll-area::-webkit-scrollbar-thumb:hover { |
| background-color: #64748b; |
| } |
| |
| /* Prevent horizontal page scroll (esp. on mobile): clamp to viewport width. |
| Wide content (e.g. the data table) scrolls inside its own overflow:auto wrapper, |
| so this only stops the whole window from sliding left/right. */ |
| html, |
| body { |
| max-width: 100%; |
| overflow-x: hidden; |
| } |
| |
| #root { |
| overflow-x: clip; |
| } |
| |
| /* Header navigation by window orientation. |
| Tailwind here is pre-compiled with no orientation variants, so toggle via |
| plain media queries. Default (landscape, W >= H): full nav + subtitle, no |
| hamburger. Portrait (W < H): hamburger + dropdown, hide the inline nav. */ |
| .header-nav-full { |
| display: flex; |
| } |
| .header-nav-subtitle { |
| display: block; |
| } |
| .header-nav-toggle { |
| display: none; |
| } |
| .header-nav-dropdown { |
| display: flex; |
| } |
| |
| @media (orientation: portrait) { |
| .header-nav-full { |
| display: none; |
| } |
| .header-nav-subtitle { |
| display: none; |
| } |
| .header-nav-toggle { |
| display: inline-flex; |
| } |
| } |
| |
| @media (orientation: landscape) { |
| .header-nav-dropdown { |
| display: none; |
| } |
| } |
| |
| /* Chain detail top row: Chain Identifier + Chain metadata side by side |
| (3:7) in landscape, stacked vertically in portrait (W < H). */ |
| .chain-detail-grid { |
| grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); |
| } |
| @media (orientation: portrait) { |
| .chain-detail-grid { |
| grid-template-columns: minmax(0, 1fr); |
| } |
| } |
| |
| /* Let long unbroken content (amino-acid sequences, experimental details, |
| SMILES, binder names) wrap instead of overflowing its card. */ |
| .wrap-anywhere { |
| min-width: 0; |
| overflow-wrap: anywhere; |
| word-break: break-word; |
| } |
| |
