@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap"); /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */ @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-rotate-x: rotateX(0); --tw-rotate-y: rotateY(0); --tw-rotate-z: rotateZ(0); --tw-skew-x: skewX(0); --tw-skew-y: skewY(0); --tw-space-y-reverse: 0; --tw-divide-y-reverse: 0; --tw-border-style: solid; --tw-leading: initial; --tw-font-weight: 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-duration: 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-50: oklch(.971 .013 17.38); --color-red-100: oklch(.936 .032 17.717); --color-red-300: oklch(.808 .114 19.571); --color-red-500: oklch(.637 .237 25.331); --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-400: oklch(.75 .183 55.934); --color-orange-500: oklch(.705 .213 47.604); --color-orange-600: oklch(.646 .222 41.116); --color-yellow-100: oklch(.973 .071 103.193); --color-yellow-300: oklch(.905 .182 98.111); --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-300: oklch(.871 .15 154.449); --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-blue-50: oklch(.97 .014 254.604); --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-purple-50: oklch(.977 .014 308.299); --color-purple-500: oklch(.627 .265 303.9); --color-purple-600: oklch(.558 .288 302.321); --color-purple-700: oklch(.496 .265 301.924); --color-gray-50: oklch(.985 .002 247.839); --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-gray-500: oklch(.551 .027 264.364); --color-gray-600: oklch(.446 .03 256.802); --color-gray-700: oklch(.373 .034 259.733); --color-gray-900: oklch(.21 .034 264.665); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-md: 28rem; --container-lg: 32rem; --container-2xl: 42rem; --container-4xl: 56rem; --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); --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --radius-xs: .125rem; --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); --radius-button: var(--radius-button); --radius-card: var(--radius-card); } } @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); font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-h1); font-weight: var(--weight-bold); line-height: var(--line-h1); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-h2); font-weight: var(--weight-semibold); line-height: var(--line-h2); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-h3); font-weight: var(--weight-semibold); line-height: var(--line-h3); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4 { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-h4); font-weight: var(--weight-semibold); line-height: var(--line-h4); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h5 { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-h5); font-weight: var(--weight-semibold); line-height: var(--line-h5); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) p { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-body); font-weight: var(--weight-regular); line-height: var(--line-body); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-body-sm); font-weight: var(--weight-semibold); line-height: var(--line-body-sm); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-body); font-weight: var(--weight-semibold); line-height: var(--line-body); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) textarea, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) select { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-body); font-weight: var(--weight-regular); line-height: var(--line-body); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) .caption { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-caption); font-weight: var(--weight-medium); line-height: var(--line-caption); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) .body-lg { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-body-lg); font-weight: var(--weight-regular); line-height: var(--line-body-lg); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) .body-sm { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-body-sm); font-weight: var(--weight-regular); line-height: var(--line-body-sm); } :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) .overline { font-family: Noto Sans TC, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: var(--font-overline); font-weight: var(--weight-semibold); line-height: var(--line-overline); text-transform: uppercase; letter-spacing: .05em; } } @layer utilities { .\@container\/card-header { container: card-header / inline-size; } .pointer-events-none { pointer-events: none; } .sr-only { clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .inset-0 { inset: calc(var(--spacing) * 0); } .top-0 { top: calc(var(--spacing) * 0); } .top-1\/2 { top: 50%; } .top-4 { top: calc(var(--spacing) * 4); } .top-\[50\%\] { top: 50%; } .right-0 { right: calc(var(--spacing) * 0); } .right-2 { right: calc(var(--spacing) * 2); } .right-3 { right: calc(var(--spacing) * 3); } .right-4 { right: calc(var(--spacing) * 4); } .left-0 { left: calc(var(--spacing) * 0); } .left-3 { left: calc(var(--spacing) * 3); } .left-\[50\%\] { left: 50%; } .z-50 { z-index: 50; } .col-start-2 { grid-column-start: 2; } .row-span-2 { grid-row: span 2 / span 2; } .row-start-1 { grid-row-start: 1; } .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-2 { margin-inline: calc(var(--spacing) * 2); } .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-2 { margin-top: calc(var(--spacing) * 2); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-5 { margin-top: calc(var(--spacing) * 5); } .mr-1 { margin-right: calc(var(--spacing) * 1); } .mr-2 { margin-right: calc(var(--spacing) * 2); } .mr-auto { margin-right: auto; } .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-6 { margin-bottom: calc(var(--spacing) * 6); } .-ml-2 { margin-left: calc(var(--spacing) * -2); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .flex { display: flex; } .grid { display: grid; } .inline-flex { display: inline-flex; } .table { display: table; } .table-caption { display: table-caption; } .table-cell { display: table-cell; } .table-row { display: table-row; } .field-sizing-content { field-sizing: content; } .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); } .size-9 { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } .h-3 { height: calc(var(--spacing) * 3); } .h-4 { height: calc(var(--spacing) * 4); } .h-5 { height: calc(var(--spacing) * 5); } .h-8 { height: calc(var(--spacing) * 8); } .h-9 { height: calc(var(--spacing) * 9); } .h-10 { height: calc(var(--spacing) * 10); } .h-16 { height: calc(var(--spacing) * 16); } .h-\[var\(--radix-select-trigger-height\)\] { height: var(--radix-select-trigger-height); } .h-px { height: 1px; } .h-screen { height: 100vh; } .max-h-\(--radix-select-content-available-height\) { max-height: var(--radix-select-content-available-height); } .max-h-96 { max-height: calc(var(--spacing) * 96); } .max-h-\[90vh\] { max-height: 90vh; } .min-h-16 { min-height: calc(var(--spacing) * 16); } .min-h-screen { min-height: 100vh; } .w-3 { width: calc(var(--spacing) * 3); } .w-4 { width: calc(var(--spacing) * 4); } .w-5 { width: calc(var(--spacing) * 5); } .w-8 { width: calc(var(--spacing) * 8); } .w-16 { width: calc(var(--spacing) * 16); } .w-24 { width: calc(var(--spacing) * 24); } .w-64 { width: calc(var(--spacing) * 64); } .w-\[5\%\] { width: 5%; } .w-\[8\%\] { width: 8%; } .w-\[12\%\] { width: 12%; } .w-\[14\%\] { width: 14%; } .w-\[15\%\] { width: 15%; } .w-\[25\%\] { width: 25%; } .w-\[60px\] { width: 60px; } .w-\[80px\] { width: 80px; } .w-\[120px\] { width: 120px; } .w-\[160px\] { width: 160px; } .w-\[180px\] { width: 180px; } .w-\[200px\] { width: 200px; } .w-fit { width: fit-content; } .w-full { width: 100%; } .max-w-2xl { max-width: var(--container-2xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-7xl { max-width: var(--container-7xl); } .max-w-\[calc\(100\%-2rem\)\] { max-width: calc(100% - 2rem); } .max-w-md { max-width: var(--container-md); } .min-w-0 { min-width: calc(var(--spacing) * 0); } .min-w-\[8rem\] { min-width: 8rem; } .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; } .caption-bottom { caption-side: bottom; } .origin-\(--radix-select-content-transform-origin\) { transform-origin: var(--radix-select-content-transform-origin); } .translate-x-\[-50\%\] { --tw-translate-x: -50%; translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-\[-50\%\] { --tw-translate-y: -50%; translate: var(--tw-translate-x) var(--tw-translate-y); } .transform { transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } .cursor-default { cursor: default; } .cursor-pointer { cursor: pointer; } .resize-none { resize: none; } .scroll-my-1 { scroll-margin-block: calc(var(--spacing) * 1); } .auto-rows-min { grid-auto-rows: min-content; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-rows-\[auto_auto\] { grid-template-rows: auto auto; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .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-6 { gap: calc(var(--spacing) * 6); } :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(.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))); } .self-start { align-self: flex-start; } .justify-self-end { justify-self: flex-end; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-auto { overflow-y: auto; } .rounded-\[4px\] { border-radius: 4px; } .rounded-lg { border-radius: var(--radius); } .rounded-md { border-radius: calc(var(--radius) - 2px); } .rounded-sm { border-radius: calc(var(--radius) - 4px); } .rounded-xl { border-radius: calc(var(--radius) + 4px); } .rounded-xs { border-radius: var(--radius-xs); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-blue-500 { border-color: var(--color-blue-500); } .border-border { border-color: var(--border); } .border-destructive { border-color: var(--destructive); } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); } .border-green-300 { border-color: var(--color-green-300); } .border-green-500 { border-color: var(--color-green-500); } .border-grey-3 { border-color: var(--grey-3); } .border-orange-400 { border-color: var(--color-orange-400); } .border-purple-500 { border-color: var(--color-purple-500); } .border-red-300 { border-color: var(--color-red-300); } .border-red-500 { border-color: var(--color-red-500); } .border-transparent { border-color: #0000; } .border-yellow-300 { border-color: var(--color-yellow-300); } .bg-background { background-color: var(--background); } .bg-black\/50 { background-color: #00000080; } @supports (color: color-mix(in lab, red, red)) { .bg-black\/50 { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .bg-blue-50 { background-color: var(--color-blue-50); } .bg-border { background-color: var(--border); } .bg-card { background-color: var(--card); } .bg-destructive { background-color: var(--destructive); } .bg-gray-50 { background-color: var(--color-gray-50); } .bg-green-100 { background-color: var(--color-green-100); } .bg-input-background { background-color: var(--input-background); } .bg-muted { background-color: var(--muted); } .bg-muted\/50 { background-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .bg-muted\/50 { background-color: color-mix(in oklab, var(--muted) 50%, transparent); } } .bg-orange-50\/50 { background-color: color-mix(in srgb, oklch(.98 .016 73.684) 50%, transparent); } @supports (color: color-mix(in lab, red, red)) { .bg-orange-50\/50 { background-color: color-mix(in oklab, var(--color-orange-50) 50%, transparent); } } .bg-orange-500 { background-color: var(--color-orange-500); } .bg-popover { background-color: var(--popover); } .bg-primary { background-color: var(--primary); } .bg-primary-light\/20 { background-color: var(--primary-light); } @supports (color: color-mix(in lab, red, red)) { .bg-primary-light\/20 { background-color: color-mix(in oklab, var(--primary-light) 20%, transparent); } } .bg-purple-50 { background-color: var(--color-purple-50); } .bg-red-50 { background-color: var(--color-red-50); } .bg-red-100 { background-color: var(--color-red-100); } .bg-secondary { background-color: var(--secondary); } .bg-white { background-color: var(--color-white); } .bg-yellow-100 { background-color: var(--color-yellow-100); } .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); } .p-12 { padding: calc(var(--spacing) * 12); } .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); } .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-3 { padding-block: calc(var(--spacing) * 3); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-12 { padding-block: calc(var(--spacing) * 12); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-12 { padding-top: calc(var(--spacing) * 12); } .pr-8 { padding-right: calc(var(--spacing) * 8); } .pr-10 { padding-right: calc(var(--spacing) * 10); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pl-2 { padding-left: calc(var(--spacing) * 2); } .pl-10 { padding-left: calc(var(--spacing) * 10); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .align-middle { vertical-align: middle; } .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-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .text-\[28px\] { font-size: 28px; } .leading-none { --tw-leading: 1; line-height: 1; } .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); } .whitespace-nowrap { white-space: nowrap; } .text-blue-600 { color: var(--color-blue-600); } .text-blue-700 { color: var(--color-blue-700); } .text-card-foreground { color: var(--card-foreground); } .text-current { color: currentColor; } .text-destructive { color: var(--destructive); } .text-destructive-foreground { color: var(--destructive-foreground); } .text-foreground { color: var(--foreground); } .text-gray-400 { color: var(--color-gray-400); } .text-gray-500 { color: var(--color-gray-500); } .text-gray-600 { color: var(--color-gray-600); } .text-gray-700 { color: var(--color-gray-700); } .text-gray-900 { color: var(--color-gray-900); } .text-green-600 { color: var(--color-green-600); } .text-green-700 { color: var(--color-green-700); } .text-grey-0 { color: var(--grey-0); } .text-grey-1 { color: var(--grey-1); } .text-grey-2 { color: var(--grey-2); } .text-muted-foreground { color: var(--muted-foreground); } .text-popover-foreground { color: var(--popover-foreground); } .text-primary { color: var(--primary); } .text-primary-foreground { color: var(--primary-foreground); } .text-primary-main { color: var(--primary-main); } .text-purple-600 { color: var(--color-purple-600); } .text-purple-700 { color: var(--color-purple-700); } .text-red-500 { color: var(--color-red-500); } .text-red-600 { color: var(--color-red-600); } .text-red-700 { color: var(--color-red-700); } .text-secondary-foreground { color: var(--secondary-foreground); } .text-white { color: var(--color-white); } .text-yellow-700 { color: var(--color-yellow-700); } .underline-offset-4 { text-underline-offset: 4px; } .opacity-50 { opacity: .5; } .opacity-70 { opacity: .7; } .shadow-lg { --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); } .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); } .shadow-xs { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-offset-background { --tw-ring-offset-color: var(--background); } .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, ); } .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-none { transition-property: none; } .duration-200 { --tw-duration: .2s; transition-duration: .2s; } .outline-none { --tw-outline-style: none; outline-style: none; } .select-none { -webkit-user-select: none; user-select: none; } @media (hover: hover) { .group-hover\:text-white:is(:where(.group):hover *) { color: var(--color-white); } } .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) { pointer-events: none; } .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *) { opacity: .5; } .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) { cursor: not-allowed; } .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) { opacity: .5; } .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\:bg-accent:hover { background-color: var(--accent); } } @media (hover: hover) { .hover\:bg-destructive:hover { background-color: var(--destructive); } } @media (hover: hover) { .hover\:bg-destructive\/90:hover { background-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-destructive\/90:hover { background-color: color-mix(in oklab, var(--destructive) 90%, transparent); } } } @media (hover: hover) { .hover\:bg-gray-50:hover { background-color: var(--color-gray-50); } } @media (hover: hover) { .hover\:bg-gray-100:hover { background-color: var(--color-gray-100); } } @media (hover: hover) { .hover\:bg-green-50:hover { background-color: var(--color-green-50); } } @media (hover: hover) { .hover\:bg-muted\/50:hover { background-color: var(--muted); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-muted\/50:hover { background-color: color-mix(in oklab, var(--muted) 50%, transparent); } } } @media (hover: hover) { .hover\:bg-orange-600:hover { background-color: var(--color-orange-600); } } @media (hover: hover) { .hover\:bg-primary\/10:hover { background-color: var(--primary); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-primary\/10:hover { background-color: color-mix(in oklab, var(--primary) 10%, transparent); } } } @media (hover: hover) { .hover\:bg-primary\/90:hover { background-color: var(--primary); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-primary\/90:hover { background-color: color-mix(in oklab, var(--primary) 90%, transparent); } } } @media (hover: hover) { .hover\:bg-red-50:hover { background-color: var(--color-red-50); } } @media (hover: hover) { .hover\:bg-secondary\/80:hover { background-color: var(--secondary); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-secondary\/80:hover { background-color: color-mix(in oklab, var(--secondary) 80%, transparent); } } } @media (hover: hover) { .hover\:text-accent-foreground:hover { color: var(--accent-foreground); } } @media (hover: hover) { .hover\:text-gray-600:hover { color: var(--color-gray-600); } } @media (hover: hover) { .hover\:text-primary:hover { color: var(--primary); } } @media (hover: hover) { .hover\:text-red-600:hover { color: var(--color-red-600); } } @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-100:hover { opacity: 1; } } @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); } } .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-ring:focus { --tw-ring-color: var(--ring); } .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .focus\:outline-hidden:focus { --tw-outline-style: none; outline-style: none; } @media (forced-colors: active) { .focus\:outline-hidden:focus { outline-offset: 2px; outline: 2px solid #0000; } } .focus-visible\:border-primary:focus-visible { border-color: var(--primary); } .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\:opacity-50:disabled { opacity: .5; } .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot="card-action"]) { grid-template-columns: 1fr auto; } .has-\[\>svg\]\:px-2\.5:has( > svg) { padding-inline: calc(var(--spacing) * 2.5); } .has-\[\>svg\]\:px-3:has( > svg) { padding-inline: calc(var(--spacing) * 3); } .has-\[\>svg\]\:px-4:has( > svg) { padding-inline: calc(var(--spacing) * 4); } .aria-invalid\:border-2[aria-invalid="true"] { border-style: var(--tw-border-style); border-width: 2px; } .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\=checked\]\:border-primary[data-state="checked"] { border-color: var(--primary); } .data-\[state\=checked\]\:bg-primary[data-state="checked"] { background-color: var(--primary); } .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] { color: var(--primary-foreground); } .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\]\:bg-accent[data-state="open"] { background-color: var(--accent); } .data-\[state\=open\]\:text-muted-foreground[data-state="open"] { color: var(--muted-foreground); } .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; } .data-\[state\=selected\]\:bg-muted[data-state="selected"] { background-color: var(--muted); } @media (width >= 40rem) { .sm\:w-48 { width: calc(var(--spacing) * 48); } } @media (width >= 40rem) { .sm\:w-56 { width: calc(var(--spacing) * 56); } } @media (width >= 40rem) { .sm\:max-w-\[425px\] { max-width: 425px; } } @media (width >= 40rem) { .sm\:max-w-lg { max-width: var(--container-lg); } } @media (width >= 40rem) { .sm\:flex-row { flex-direction: row; } } @media (width >= 40rem) { .sm\:justify-end { justify-content: flex-end; } } @media (width >= 40rem) { .sm\:text-left { text-align: left; } } @media (width >= 48rem) { .md\:w-auto { width: auto; } } @media (width >= 48rem) { .md\:max-w-md { max-width: var(--container-md); } } @media (width >= 48rem) { .md\:flex-initial { flex: 0 auto; } } @media (width >= 48rem) { .md\:grid-cols-2 { grid-template-columns: repeat(2, 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\:text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } @media (width >= 64rem) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (prefers-color-scheme: dark) { .dark\:border-input { border-color: var(--input); } } @media (prefers-color-scheme: dark) { .dark\:bg-destructive\/60 { background-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .dark\:bg-destructive\/60 { background-color: color-mix(in oklab, var(--destructive) 60%, transparent); } } } @media (prefers-color-scheme: dark) { .dark\:bg-input\/30 { background-color: var(--input); } @supports (color: color-mix(in lab, red, red)) { .dark\:bg-input\/30 { background-color: color-mix(in oklab, var(--input) 30%, transparent); } } } @media (prefers-color-scheme: dark) { @media (hover: hover) { .dark\:hover\:bg-accent\/50:hover { background-color: var(--accent); } @supports (color: color-mix(in lab, red, red)) { .dark\:hover\:bg-accent\/50:hover { background-color: color-mix(in oklab, var(--accent) 50%, transparent); } } } } @media (prefers-color-scheme: dark) { @media (hover: hover) { .dark\:hover\:bg-input\/50:hover { background-color: var(--input); } @supports (color: color-mix(in lab, red, red)) { .dark\:hover\:bg-input\/50:hover { background-color: color-mix(in oklab, var(--input) 50%, transparent); } } } } @media (prefers-color-scheme: dark) { .dark\:focus-visible\:ring-destructive\/40:focus-visible { --tw-ring-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .dark\:focus-visible\:ring-destructive\/40:focus-visible { --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); } } } @media (prefers-color-scheme: dark) { .dark\:aria-invalid\:ring-destructive\/40[aria-invalid="true"] { --tw-ring-color: var(--destructive); } @supports (color: color-mix(in lab, red, red)) { .dark\:aria-invalid\:ring-destructive\/40[aria-invalid="true"] { --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); } } } @media (prefers-color-scheme: dark) { .dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"] { background-color: var(--primary); } } .\[\&_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); } .\[\&_tr\]\:border-b tr { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .\[\&_tr\:last-child\]\:border-0 tr:last-child { border-style: var(--tw-border-style); border-width: 0; } .\[\&\:\:-webkit-calendar-picker-indicator\]\:absolute::-webkit-calendar-picker-indicator { position: absolute; } .\[\&\:\:-webkit-calendar-picker-indicator\]\:right-0::-webkit-calendar-picker-indicator { right: calc(var(--spacing) * 0); } .\[\&\:\:-webkit-calendar-picker-indicator\]\:h-full::-webkit-calendar-picker-indicator { height: 100%; } .\[\&\:\:-webkit-calendar-picker-indicator\]\:w-10::-webkit-calendar-picker-indicator { width: calc(var(--spacing) * 10); } .\[\&\:\:-webkit-calendar-picker-indicator\]\:cursor-pointer::-webkit-calendar-picker-indicator { cursor: pointer; } .\[\&\:\:-webkit-calendar-picker-indicator\]\:opacity-0::-webkit-calendar-picker-indicator { opacity: 0; } .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) { padding-right: calc(var(--spacing) * 0); } .\[\.border-b\]\:pb-6.border-b { padding-bottom: calc(var(--spacing) * 6); } .\[\.border-t\]\:pt-6.border-t { padding-top: calc(var(--spacing) * 6); } :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); } .\[\&\:last-child\]\:pb-6:last-child { padding-bottom: calc(var(--spacing) * 6); } .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] { --tw-translate-y: 2px; translate: var(--tw-translate-x) var(--tw-translate-y); } .\[\&\>svg\]\:pointer-events-none > svg { pointer-events: none; } .\[\&\>svg\]\:size-3 > svg { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .\[\&\>tr\]\:last\:border-b-0 > tr:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } @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; --font-display-lg: 64px; --line-display-lg: 72px; --font-display: 48px; --line-display: 56px; --font-h1: 40px; --line-h1: 48px; --font-h2: 32px; --line-h2: 40px; --font-h3: 28px; --line-h3: 36px; --font-h4: 24px; --line-h4: 32px; --font-h5: 20px; --line-h5: 28px; --font-body-lg: 18px; --line-body-lg: 28px; --font-body: 16px; --line-body: 24px; --font-body-sm: 14px; --line-body-sm: 20px; --font-caption: 12px; --line-caption: 16px; --font-overline: 11px; --line-overline: 16px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --grey-0: #1a1a1a; --grey-1: #4a4a4a; --grey-2: #6b6b6b; --grey-3: #9e9e9e; --grey-4: #e0e0e0; --grey-5: #fff; --primary-dark: #018a6a; --primary-main: #01ab83; --primary-light: #33bc9a; --primary-lighter: #66cdb1; --primary-lightest: #e6f7f3; --other-success: #01ab83; --other-error: #dc2626; --other-warning: #f59e0b; --other-info: #3b82f6; --background-light: #f8fdfb; --background-light-grey: #f5f5f5; --background-white: #fff; --button-disabled: #ccc; --button-success-normal: #01ab83; --button-success-hover: #33bc9a; --button-success-active: #018a6a; --button-info-normal: #3b82f6; --button-info-hover: #60a5fa; --button-info-active: #2563eb; --button-warning-normal: #f59e0b; --button-warning-hover: #fbbf24; --button-warning-active: #d97706; --button-err-normal: #dc2626; --button-err-hover: #ef4444; --button-err-active: #b91c1c; --button-main-normal: #018a6a; --button-main-disable: #b3e5d9; --button-main-hover: #01ab83; --button-main-active: #016b54; --background: var(--background-light); --foreground: var(--grey-0); --card: var(--background-white); --card-foreground: var(--grey-0); --popover: var(--background-white); --popover-foreground: var(--grey-0); --primary: var(--primary-main); --primary-hover: var(--primary-dark); --primary-active: var(--button-main-active); --primary-foreground: var(--grey-5); --secondary: var(--background-light-grey); --secondary-foreground: var(--grey-0); --muted: var(--grey-4); --muted-foreground: var(--grey-2); --accent: var(--primary-light); --accent-foreground: var(--grey-5); --destructive: var(--other-error); --destructive-hover: var(--button-err-hover); --destructive-foreground: var(--grey-5); --success: var(--other-success); --warning: var(--other-warning); --info: var(--other-info); --border: var(--grey-4); --input: transparent; --input-background: var(--grey-5); --ring: var(--primary-main); --elevation-sm: 0px 4px 12px 0px #01ab8314; --elevation-md: 0px 8px 24px 0px #01ab831f; --chart-1: var(--primary-main); --chart-2: var(--primary-light); --chart-3: var(--other-warning); --chart-4: var(--other-info); --chart-5: var(--primary-lighter); --radius: 8px; --radius-button: 8px; --radius-card: 12px; } html { font-size: var(--font-size); } @keyframes fade-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: .6s ease-out fade-in; } .button-filled-primary { background-color: var(--primary-main); color: var(--grey-5); } .button-filled-primary:hover { background-color: var(--primary-dark); color: var(--grey-5); } .button-filled-primary:active { background-color: var(--button-main-active); color: var(--grey-5); } .button-filled-primary:disabled { background-color: var(--button-main-disable); color: var(--grey-5); cursor: not-allowed; pointer-events: none; } .button-outlined-primary { border: 2px solid var(--primary-main); color: var(--grey-0); background-color: #0000; } .button-outlined-primary:hover { border-color: var(--primary-main); background-color: var(--background-light); color: var(--grey-0); } .button-filled-success { background-color: var(--button-success-normal); color: var(--grey-5); } .button-filled-success:hover { background-color: var(--button-success-hover); color: var(--grey-5); } .button-filled-success:active { background-color: var(--button-success-active); color: var(--grey-5); } .button-outlined-success { border: 2px solid var(--other-success); color: var(--grey-0); background-color: #0000; } .button-filled-info { background-color: var(--button-info-normal); color: var(--grey-5); } .button-filled-info:hover { background-color: var(--button-info-hover); color: var(--grey-5); } .button-filled-info:active { background-color: var(--button-info-active); color: var(--grey-5); } .button-outlined-info { border: 2px solid var(--other-info); color: var(--grey-0); background-color: #0000; } .button-filled-warning { background-color: var(--button-warning-normal); color: var(--grey-5); } .button-filled-warning:hover { background-color: var(--button-warning-hover); color: var(--grey-5); } .button-filled-warning:active { background-color: var(--button-warning-active); color: var(--grey-5); } .button-outlined-warning { border: 2px solid var(--other-warning); color: var(--grey-0); background-color: #0000; } .button-filled-error { background-color: var(--button-err-normal); color: var(--grey-5); } .button-filled-error:hover { background-color: var(--button-err-hover); color: var(--grey-5); } .button-filled-error:active { background-color: var(--button-err-active); color: var(--grey-5); } .button-outlined-error { border: 2px solid var(--other-error); color: var(--grey-0); background-color: #0000; } .button-text-primary { color: var(--primary-main); background-color: #0000; border: none; } .button-text-primary:hover { background-color: var(--background-light); color: var(--primary-main); } .input-default { border: 2px solid var(--grey-3); background-color: var(--grey-5); color: var(--grey-0); } .input-focus { border: 2px solid var(--primary-main); background-color: var(--grey-5); color: var(--grey-0); } .input-error { border: 2px solid var(--other-error); background-color: var(--grey-5); color: var(--grey-0); } .input-disabled { border: 2px solid var(--grey-4); background-color: var(--background-light-grey); color: var(--grey-2); cursor: not-allowed; } .input-placeholder::placeholder { color: var(--grey-3); } .text-primary { color: var(--grey-0); } .text-secondary { color: var(--grey-1); } .text-tertiary { color: var(--grey-2); } .text-disabled { color: var(--grey-3); } .text-link { color: var(--primary-main); cursor: pointer; } .text-link:hover { color: var(--primary-dark); } .text-error { color: var(--other-error); } .text-success { color: var(--other-success); } .text-warning { color: var(--other-warning); } .text-info { color: var(--other-info); } .card-default { background-color: var(--background-white); border: 1px solid var(--grey-4); } .card-hover:hover { background-color: var(--background-white); border-color: var(--grey-3); } .card-light { background-color: var(--background-light); border-color: #0000; } .card-grey { background-color: var(--background-light-grey); border-color: #0000; } .badge-success { background-color: var(--other-success); color: var(--grey-5); } .badge-error { background-color: var(--other-error); color: var(--grey-5); } .badge-warning { background-color: var(--other-warning); color: var(--grey-5); } .badge-info { background-color: var(--other-info); color: var(--grey-5); } .badge-neutral { background-color: var(--grey-3); color: var(--grey-5); } .divider-light { border-color: var(--grey-4); } .divider-medium { border-color: var(--grey-3); } .divider-dark { border-color: var(--grey-2); } .button-icon { color: var(--grey-0); border: 2px solid var(--grey-0); background-color: var(--background-light); aspect-ratio: 1; justify-content: center; align-items: center; display: inline-flex; } .button-icon:hover { color: var(--primary-main); border-color: var(--primary-main); background-color: var(--background-white); } .button-icon:active { color: var(--primary-dark); border-color: var(--primary-dark); background-color: var(--background-light); } .button-icon:focus { color: var(--grey-0); border-color: var(--primary-main); background-color: var(--background-light); box-shadow: 0 0 0 3px #01ab834d; } .button-icon:disabled { color: var(--grey-3); border-color: var(--grey-4); background-color: var(--background-light-grey); cursor: not-allowed; pointer-events: none; } .button-icon-selected { color: var(--grey-5); border-color: var(--primary-main); background-color: var(--primary-main); } .button-icon-selected:hover { color: var(--grey-5); border-color: var(--primary-dark); background-color: var(--primary-dark); } .textarea-default { border: 2px solid var(--grey-3); background-color: var(--grey-5); color: var(--grey-0); } .textarea-focus { border: 2px solid var(--primary-main); background-color: var(--grey-5); color: var(--grey-0); } .textarea-error { border: 2px solid var(--other-error); background-color: var(--grey-5); color: var(--grey-0); } .textarea-disabled { border: 2px solid var(--grey-4); background-color: var(--background-light-grey); color: var(--grey-2); cursor: not-allowed; } .textarea-placeholder::placeholder { color: var(--grey-3); } @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-rotate-x { syntax: "*"; inherits: false; initial-value: rotateX(0); } @property --tw-rotate-y { syntax: "*"; inherits: false; initial-value: rotateY(0); } @property --tw-rotate-z { syntax: "*"; inherits: false; initial-value: rotateZ(0); } @property --tw-skew-x { syntax: "*"; inherits: false; initial-value: skewX(0); } @property --tw-skew-y { syntax: "*"; inherits: false; initial-value: skewY(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-leading { syntax: "*"; inherits: false } @property --tw-font-weight { 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: 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: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false } @property --tw-duration { 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)); } }