/* HX SETUP */ .hx[client="aci"] { scroll-padding-top: 85px; scroll-behavior: smooth; } /* The only way to actually target the in the current setup */ .hx > body { margin: 0px; padding: 0px; } .hx[client="aci"] .mainGrid { display: grid; min-height: 100vh; grid-auto-flow: row; grid-auto-rows: auto; grid-template-areas: 'header' 'aside' 'content' ; grid-template-rows: min-content 1fr; } .hx[client="aci"] .mainGrid-header { grid-area: header; border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(193 224 246 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(242 245 248 / var(--tw-bg-opacity, 1)); position: sticky; top: 0px; z-index: 20; } .hx[client="aci"] .mainGrid-content { grid-area: content; padding-left: 48px; padding-right: 48px; padding-top: 32px; padding-bottom: 32px; } .hx[client="aci"] .mainGrid-aside { grid-area: aside; border-right-width: 1px; --tw-border-opacity: 1; border-color: rgb(193 224 246 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(242 245 248 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .mainGrid-aside > * { position: sticky; top: var(--header-height); } @media (min-width: 768px) { .hx[client="aci"] .mainGrid { grid-template-areas: 'header header' 'aside content' ; grid-template-columns: var(--aside-width) 1fr } } @media (min-width: 1280px) { .hx[client="aci"] .mainGrid-content { padding-left: 72px; padding-right: 72px; padding-top: 48px; padding-bottom: 48px; } } /* TEST STYLES */ .hx[client="aci"] .test-section { margin-block: 2rem; } .hx[client="aci"] .test-section:not(:last-child) { border-bottom: 2px solid blue; padding-bottom: 1rem; } /* */ .hx[client="aci"] .test-section > header > h3 { font-size: 2rem; font-weight: 700; margin-bottom: 0.5em; } /* SINGLE TEST */ .hx[client="aci"] .test-section test { display: block; margin-block: 1.5rem; } .hx[client="aci"] .test-section test > header { margin-bottom: 0.25rem; } .hx[client="aci"] .test-section test > header > h4 { font-size: 1.25rem; font-weight: 500; } .hx[client="aci"] .test-section test > main { box-sizing: content-box; border: 2px solid lightgray; } .hx[client="aci"] .test-section test > footer { margin-top: 0.5rem; font-size: 0.8em; line-height: 1.1; } .hx[client="aci"] .test-section test > footer p { margin-bottom: 0.5em; } .hx[client="aci"] .test-section test > footer ul { margin-bottom: 0.5em; padding-left: 1em; list-style: disc; } .hx[client="aci"] .test-section test > footer ul > li { margin-bottom: 0.25em; } .hx[client="aci"] .test-section test > footer code { display: inline-block; padding: 0.2em 0.35em; border-radius: 3px; color: black; background: lightgray; } .hx[client="aci"] .test-section test > footer > *:last-child { margin-bottom: 0; } /* DESIGN SYSTEM */ :root { /* -------------------------------------------------------------------------- DARK THEME -------------------------------------------------------------------------- */ /* @media (prefers-color-scheme: dark) { .hx-ds { --hx-color-bg: transparent; --hx-color-fg: var(--neutral-100, #ebebeb); } } */ /* [data-theme="dark"] .hx-ds, .hx-ds[data-theme="dark"] { --hx-color-bg: transparent; --hx-color-fg: var(--neutral-100, #ebebeb); } */ } :root .hx-ds { --hx-base-fg: ; --hx-base-bg: ; --hx-color-fg: ; --hx-color-bg: ; --hx-color-b: color-mix(in hsl, var(--hx-color-fg), transparent 50%); --hx-color-b-focus: color-mix(in hsl, var(--hx-color-fg-focus), transparent 50%); --hx-color-b-active: color-mix(in hsl, var(--hx-color-fg-active), transparent 50%); } /* HX COMPONENTS */ /* -------------------------------------------------------------------------- Based on DaisyUI breadcrumbs Note to self: we had to switch to the css file because Tailwind v3 does not support container query ranges (from + to). -------------------------------------------------------------------------- */ /* COMPONENTS */ /* @import 'components/card.css'; */ /* DAISYUI OVERRIDES */ /* VENDOR */ .hx[client="aci"] [x-cloak] { display: none !important; } /* */ .hx[client="aci"] turbo-frame { position: relative; display: block; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .hx[client="aci"] turbo-frame[busy] { opacity: 0.25; transition-duration: 700ms; /*&::before {*/ /* @apply absolute inset-t-*/ /*}*/ } .hx[client="aci"] pre, .hx[client="aci"] code { color: #adbac7; background-color: #22272e; } .hx[client="aci"] .hl-keyword { color: #f47067; } .hx[client="aci"] .hl-property { color: #dcbdfb; } .hx[client="aci"] .hl-attribute { font-style: italic; } .hx[client="aci"] .hl-type { color: #EA4334; } .hx[client="aci"] .hl-generic { color: #9d3af6; } .hx[client="aci"] .hl-value { color: #96d0ff; } .hx[client="aci"] .hl-literal { color: #96d0ff; } .hx[client="aci"] .hl-number { color: #96d0ff; } .hx[client="aci"] .hl-variable { color: #f69d50; } .hx[client="aci"] .hl-comment { color: #768390; } .hx[client="aci"] .hl-blur { filter: blur(2px); } .hx[client="aci"] .hl-strong { font-weight: bold; } .hx[client="aci"] .hl-em { font-style: italic; } .hx[client="aci"] .hl-addition { display: inline-block; min-width: 100%; background-color: #00FF0022; } .hx[client="aci"] .hl-deletion { display: inline-block; min-width: 100%; background-color: #FF000011; } .hx[client="aci"] .hl-gutter { display: inline-block; font-size: 0.9em; color: #555; padding: 0 1ch; margin-right: 1ch; -webkit-user-select: none; user-select: none; } .hx[client="aci"] .hl-gutter-addition { background-color: #34A853; color: #fff; } .hx[client="aci"] .hl-gutter-deletion { background-color: #EA4334; color: #fff; } /* TAILWIND DIRECTIVES */ .hx[client="aci"] *, .hx[client="aci"] ::before, .hx[client="aci"] ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } .hx[client="aci"] ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ .hx[client="aci"] *, .hx[client="aci"] ::before, .hx[client="aci"] ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } .hx[client="aci"] ::before, .hx[client="aci"] ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ .hx[client="aci"], .hx[client="aci"] :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */ tab-size: 4; /* 3 */ font-family: SF Pro, system-ui, -apple-system, Segoe UI, Helvetica Neue, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ .hx[client="aci"] { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ .hx[client="aci"] hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ .hx[client="aci"] abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ .hx[client="aci"] h1, .hx[client="aci"] h2, .hx[client="aci"] h3, .hx[client="aci"] h4, .hx[client="aci"] h5, .hx[client="aci"] h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ .hx[client="aci"] a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ .hx[client="aci"] b, .hx[client="aci"] strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ .hx[client="aci"] code, .hx[client="aci"] kbd, .hx[client="aci"] samp, .hx[client="aci"] pre { font-family: SF Mono, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ .hx[client="aci"] small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ .hx[client="aci"] sub, .hx[client="aci"] sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .hx[client="aci"] sub { bottom: -0.25em; } .hx[client="aci"] sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ .hx[client="aci"] table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ .hx[client="aci"] button, .hx[client="aci"] input, .hx[client="aci"] optgroup, .hx[client="aci"] select, .hx[client="aci"] textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ .hx[client="aci"] button, .hx[client="aci"] select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ .hx[client="aci"] button, .hx[client="aci"] input:where([type='button']), .hx[client="aci"] input:where([type='reset']), .hx[client="aci"] input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ .hx[client="aci"] :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ .hx[client="aci"] :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ .hx[client="aci"] progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ .hx[client="aci"] ::-webkit-inner-spin-button, .hx[client="aci"] ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ .hx[client="aci"] [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ .hx[client="aci"] ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ .hx[client="aci"] ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ .hx[client="aci"] summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ .hx[client="aci"] blockquote, .hx[client="aci"] dl, .hx[client="aci"] dd, .hx[client="aci"] h1, .hx[client="aci"] h2, .hx[client="aci"] h3, .hx[client="aci"] h4, .hx[client="aci"] h5, .hx[client="aci"] h6, .hx[client="aci"] hr, .hx[client="aci"] figure, .hx[client="aci"] p, .hx[client="aci"] pre { margin: 0; } .hx[client="aci"] fieldset { margin: 0; padding: 0; } .hx[client="aci"] legend { padding: 0; } .hx[client="aci"] ol, .hx[client="aci"] ul, .hx[client="aci"] menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ .hx[client="aci"] dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ .hx[client="aci"] textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ .hx[client="aci"] input::placeholder, .hx[client="aci"] textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ .hx[client="aci"] button, .hx[client="aci"] [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ .hx[client="aci"] :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ .hx[client="aci"] img, .hx[client="aci"] svg, .hx[client="aci"] video, .hx[client="aci"] canvas, .hx[client="aci"] audio, .hx[client="aci"] iframe, .hx[client="aci"] embed, .hx[client="aci"] object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ .hx[client="aci"] img, .hx[client="aci"] video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ .hx[client="aci"] [hidden]:where(:not([hidden="until-found"])) { display: none; } :root, .hx[client="aci"] [data-theme] { background-color: var(--fallback-b1,oklch(var(--b1)/1)); color: var(--fallback-bc,oklch(var(--bc)/1)); } @supports not (color: oklch(0% 0 0)) { :root { color-scheme: light; --fallback-p: #491eff; --fallback-pc: #d4dbff; --fallback-s: #ff41c7; --fallback-sc: #fff9fc; --fallback-a: #00cfbd; --fallback-ac: #00100d; --fallback-n: #2b3440; --fallback-nc: #d7dde4; --fallback-b1: #ffffff; --fallback-b2: #e5e6e6; --fallback-b3: #e5e6e6; --fallback-bc: #1f2937; --fallback-in: #00b3f0; --fallback-inc: #000000; --fallback-su: #00ca92; --fallback-suc: #000000; --fallback-wa: #ffc22d; --fallback-wac: #000000; --fallback-er: #ff6f70; --fallback-erc: #000000; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --fallback-p: #7582ff; --fallback-pc: #050617; --fallback-s: #ff71cf; --fallback-sc: #190211; --fallback-a: #00c7b5; --fallback-ac: #000e0c; --fallback-n: #2a323c; --fallback-nc: #a6adbb; --fallback-b1: #1d232a; --fallback-b2: #191e24; --fallback-b3: #15191e; --fallback-bc: #a6adbb; --fallback-in: #00b3f0; --fallback-inc: #000000; --fallback-su: #00ca92; --fallback-suc: #000000; --fallback-wa: #ffc22d; --fallback-wac: #000000; --fallback-er: #ff6f70; --fallback-erc: #000000; } } } .hx[client="aci"] { -webkit-tap-highlight-color: transparent; } .hx[client="aci"] * { scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent; } .hx[client="aci"] *:hover { scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent; } .hx[client="aci"] { color-scheme: light; --in: 72.06% 0.191 231.6; --pc: 14.1652% 0.025262 241.013206; --ac: 14.1652% 0.025262 241.013206; --inc: 0% 0 0; --suc: 11.36% 0.035883 144.616754; --wac: 15.6528% 0.032361 75.475084; --erc: 90.2594% 0.037756 28.467383; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 70.8259% 0.126308 241.013206; --s: 28.6751% 0.057697 261.533082; --sc: 98.71% 0.0106 342.55; --a: 70.8259% 0.126308 241.013206; --n: 30.9186% 0 0; --nc: 89.4994% 0.011585 252.096176; --b1: 100% 0 0; --b2: 96.1151% 0 0; --b3: 92.4169% 0.00108 197.137559; --bc: 27.8078% 0.029596 256.847952; --su: 56.7998% 0.179413 144.616754; --wa: 78.2641% 0.161807 75.475084; --er: 51.2971% 0.188781 28.467383; } @media (prefers-color-scheme: dark) { .hx[client="aci"] { color-scheme: dark; --in: 72.06% 0.191 231.6; --su: 64.8% 0.150 160; --wa: 84.71% 0.199 83.87; --er: 71.76% 0.221 22.18; --pc: 13.138% 0.0392 275.75; --sc: 14.96% 0.052 342.55; --ac: 14.902% 0.0334 183.61; --inc: 0% 0 0; --suc: 0% 0 0; --wac: 0% 0 0; --erc: 0% 0 0; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 65.69% 0.196 275.75; --s: 74.8% 0.26 342.55; --a: 74.51% 0.167 183.61; --n: 31.3815% 0.021108 254.139175; --nc: 74.6477% 0.0216 264.435964; --b1: 25.3267% 0.015896 252.417568; --b2: 23.2607% 0.013807 253.100675; --b3: 21.1484% 0.01165 254.087939; --bc: 74.6477% 0.0216 264.435964; } } .hx[client="aci"] [data-theme=light] { color-scheme: light; --in: 72.06% 0.191 231.6; --pc: 14.1652% 0.025262 241.013206; --ac: 14.1652% 0.025262 241.013206; --inc: 0% 0 0; --suc: 11.36% 0.035883 144.616754; --wac: 15.6528% 0.032361 75.475084; --erc: 90.2594% 0.037756 28.467383; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 70.8259% 0.126308 241.013206; --s: 28.6751% 0.057697 261.533082; --sc: 98.71% 0.0106 342.55; --a: 70.8259% 0.126308 241.013206; --n: 30.9186% 0 0; --nc: 89.4994% 0.011585 252.096176; --b1: 100% 0 0; --b2: 96.1151% 0 0; --b3: 92.4169% 0.00108 197.137559; --bc: 27.8078% 0.029596 256.847952; --su: 56.7998% 0.179413 144.616754; --wa: 78.2641% 0.161807 75.475084; --er: 51.2971% 0.188781 28.467383; } .hx[client="aci"]:has(input.theme-controller[value=light]:checked) { color-scheme: light; --in: 72.06% 0.191 231.6; --pc: 14.1652% 0.025262 241.013206; --ac: 14.1652% 0.025262 241.013206; --inc: 0% 0 0; --suc: 11.36% 0.035883 144.616754; --wac: 15.6528% 0.032361 75.475084; --erc: 90.2594% 0.037756 28.467383; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 70.8259% 0.126308 241.013206; --s: 28.6751% 0.057697 261.533082; --sc: 98.71% 0.0106 342.55; --a: 70.8259% 0.126308 241.013206; --n: 30.9186% 0 0; --nc: 89.4994% 0.011585 252.096176; --b1: 100% 0 0; --b2: 96.1151% 0 0; --b3: 92.4169% 0.00108 197.137559; --bc: 27.8078% 0.029596 256.847952; --su: 56.7998% 0.179413 144.616754; --wa: 78.2641% 0.161807 75.475084; --er: 51.2971% 0.188781 28.467383; } .hx[client="aci"] [data-theme=dark] { color-scheme: dark; --in: 72.06% 0.191 231.6; --su: 64.8% 0.150 160; --wa: 84.71% 0.199 83.87; --er: 71.76% 0.221 22.18; --pc: 13.138% 0.0392 275.75; --sc: 14.96% 0.052 342.55; --ac: 14.902% 0.0334 183.61; --inc: 0% 0 0; --suc: 0% 0 0; --wac: 0% 0 0; --erc: 0% 0 0; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 65.69% 0.196 275.75; --s: 74.8% 0.26 342.55; --a: 74.51% 0.167 183.61; --n: 31.3815% 0.021108 254.139175; --nc: 74.6477% 0.0216 264.435964; --b1: 25.3267% 0.015896 252.417568; --b2: 23.2607% 0.013807 253.100675; --b3: 21.1484% 0.01165 254.087939; --bc: 74.6477% 0.0216 264.435964; } .hx[client="aci"]:has(input.theme-controller[value=dark]:checked) { color-scheme: dark; --in: 72.06% 0.191 231.6; --su: 64.8% 0.150 160; --wa: 84.71% 0.199 83.87; --er: 71.76% 0.221 22.18; --pc: 13.138% 0.0392 275.75; --sc: 14.96% 0.052 342.55; --ac: 14.902% 0.0334 183.61; --inc: 0% 0 0; --suc: 0% 0 0; --wac: 0% 0 0; --erc: 0% 0 0; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 65.69% 0.196 275.75; --s: 74.8% 0.26 342.55; --a: 74.51% 0.167 183.61; --n: 31.3815% 0.021108 254.139175; --nc: 74.6477% 0.0216 264.435964; --b1: 25.3267% 0.015896 252.417568; --b2: 23.2607% 0.013807 253.100675; --b3: 21.1484% 0.01165 254.087939; --bc: 74.6477% 0.0216 264.435964; } .hx-tabs {} /* -------------------------------------------------------------------------- TINY CONTAINER -------------------------------------------------------------------------- */ @container (max-width: 359px) { .hx-tabs {} } /* -------------------------------------------------------------------------- PHONE-LIKE CONTAINER -------------------------------------------------------------------------- */ @container (min-width: 360px) and (max-width: 479px) { .hx-tabs {} } @container (max-width: 479px) { .hx-tabs {} } /* -------------------------------------------------------------------------- TABLET-LIKE CONTAINER -------------------------------------------------------------------------- */ @container (min-width: 480px) { .hx-tabs {} } @container (min-width: 480px) and (max-width: 1023px) { .hx-tabs {} } /* -------------------------------------------------------------------------- DESKTOP-LIKE CONTAINER -------------------------------------------------------------------------- */ @container (min-width: 1024px) { .hx-tabs {} } /* -------------------------------------------------------------------------- THEME: FILL -------------------------------------------------------------------------- */ /* .hx-tabs.hx-theme-fill { --hx-color-bg-active: hsla(0, 0%, 0%, 0.05); } [data-theme="dark"] .hx-tabs.hx-theme-fill, .hx-tabs.hx-theme-fill[data-theme="dark"] { --hx-color-bg-active: hsla(0, 0%, 100%, 0.05); } */ /* -------------------------------------------------------------------------- THEME: LINE -------------------------------------------------------------------------- */ .hx-tabs.hx-theme-line { --hx-color-b: hsla(0, 0%, 0%, 0.05); --hx-color-b-active: hsla(0, 0%, 0%, 0.5); } [data-theme="dark"] .hx-tabs.hx-theme-line, .hx-tabs.hx-theme-line[data-theme="dark"] { --hx-color-b: hsla(0, 0%, 100%, 0.05); --hx-color-b-active: hsla(0, 0%, 100%, 0.5); } /* -------------------------------------------------------------------------- THEME: SEGMENTED -------------------------------------------------------------------------- */ .hx-tabs.hx-theme-segmented { --hx-color-bg: hsla(0, 0%, 0%, 0.05); --hx-color-bg-active: hsla(0, 0%, 100%, 05); } [data-theme="dark"] .hx-tabs.hx-theme-segmented, .hx-tabs.hx-theme-segmented[data-theme="dark"] { --hx-color-bg: hsla(0, 0%, 0%, 1); --hx-color-bg-active: hsla(0, 0%, 100%, 0.15); } .hx[client="aci"] .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 1rem; padding-left: 1rem; } @media (min-width: 1280px) { .hx[client="aci"] .container { max-width: 1280px; } } .hx[client="aci"] .prose { color: var(--tw-prose-body); max-width: 65ch; } .hx[client="aci"] .prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } .hx[client="aci"] .prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; margin-bottom: 1.2em; } .hx[client="aci"] .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; } .hx[client="aci"] .prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-bold); font-weight: 600; } .hx[client="aci"] .prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .hx[client="aci"] .prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .hx[client="aci"] .prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .hx[client="aci"] .prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: decimal; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } .hx[client="aci"] .prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-alpha; } .hx[client="aci"] .prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-alpha; } .hx[client="aci"] .prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-alpha; } .hx[client="aci"] .prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-alpha; } .hx[client="aci"] .prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-roman; } .hx[client="aci"] .prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-roman; } .hx[client="aci"] .prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-roman; } .hx[client="aci"] .prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-roman; } .hx[client="aci"] .prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: decimal; } .hx[client="aci"] .prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } .hx[client="aci"] .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { font-weight: 400; color: var(--tw-prose-counters); } .hx[client="aci"] .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { color: var(--tw-prose-bullets); } .hx[client="aci"] .prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.25em; } .hx[client="aci"] .prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } .hx[client="aci"] .prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 500; font-style: italic; color: var(--tw-prose-quotes); border-inline-start-width: 0.25rem; border-inline-start-color: var(--tw-prose-quote-borders); quotes: "\201C""\201D""\2018""\2019"; margin-top: 1.6em; margin-bottom: 1.6em; padding-inline-start: 1em; } .hx[client="aci"] .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: open-quote; } .hx[client="aci"] .prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: close-quote; } .hx[client="aci"] .prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 800; font-size: 2.25em; margin-top: 0; margin-bottom: 0.8888889em; line-height: 1.1111111; } .hx[client="aci"] .prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 900; color: inherit; } .hx[client="aci"] .prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 700; font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; line-height: 1.3333333; } .hx[client="aci"] .prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 800; color: inherit; } .hx[client="aci"] .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; } .hx[client="aci"] .prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 700; color: inherit; } .hx[client="aci"] .prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; } .hx[client="aci"] .prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 700; color: inherit; } .hx[client="aci"] .prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .hx[client="aci"] .prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { display: block; margin-top: 2em; margin-bottom: 2em; } .hx[client="aci"] .prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .hx[client="aci"] .prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 500; font-family: inherit; color: var(--tw-prose-kbd); box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); font-size: 0.875em; border-radius: 0.3125rem; padding-top: 0.1875em; padding-inline-end: 0.375em; padding-bottom: 0.1875em; padding-inline-start: 0.375em; } .hx[client="aci"] .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } .hx[client="aci"] .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: "`"; } .hx[client="aci"] .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: "`"; } .hx[client="aci"] .prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .hx[client="aci"] .prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .hx[client="aci"] .prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-size: 0.875em; } .hx[client="aci"] .prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-size: 0.9em; } .hx[client="aci"] .prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .hx[client="aci"] .prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .hx[client="aci"] .prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .hx[client="aci"] .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); overflow-x: auto; font-weight: 400; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; margin-bottom: 1.7142857em; border-radius: 0.375rem; padding-top: 0.8571429em; padding-inline-end: 1.1428571em; padding-bottom: 0.8571429em; padding-inline-start: 1.1428571em; } .hx[client="aci"] .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { background-color: transparent; border-width: 0; border-radius: 0; padding: 0; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } .hx[client="aci"] .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: none; } .hx[client="aci"] .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: none; } .hx[client="aci"] .prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { width: 100%; table-layout: auto; margin-top: 2em; margin-bottom: 2em; font-size: 0.875em; line-height: 1.7142857; } .hx[client="aci"] .prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } .hx[client="aci"] .prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; vertical-align: bottom; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } .hx[client="aci"] .prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } .hx[client="aci"] .prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 0; } .hx[client="aci"] .prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { vertical-align: baseline; } .hx[client="aci"] .prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } .hx[client="aci"] .prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { vertical-align: top; } .hx[client="aci"] .prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { text-align: start; } .hx[client="aci"] .prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } .hx[client="aci"] .prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; } .hx[client="aci"] .prose { --tw-prose-body: #374151; --tw-prose-headings: #111827; --tw-prose-lead: #4b5563; --tw-prose-links: #111827; --tw-prose-bold: #111827; --tw-prose-counters: #6b7280; --tw-prose-bullets: #d1d5db; --tw-prose-hr: #e5e7eb; --tw-prose-quotes: #111827; --tw-prose-quote-borders: #e5e7eb; --tw-prose-captions: #6b7280; --tw-prose-kbd: #111827; --tw-prose-kbd-shadows: 17 24 39; --tw-prose-code: #111827; --tw-prose-pre-code: #e5e7eb; --tw-prose-pre-bg: #1f2937; --tw-prose-th-borders: #d1d5db; --tw-prose-td-borders: #e5e7eb; --tw-prose-invert-body: #d1d5db; --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: #9ca3af; --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: #9ca3af; --tw-prose-invert-bullets: #4b5563; --tw-prose-invert-hr: #374151; --tw-prose-invert-quotes: #f3f4f6; --tw-prose-invert-quote-borders: #374151; --tw-prose-invert-captions: #9ca3af; --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: 255 255 255; --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: #d1d5db; --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: #4b5563; --tw-prose-invert-td-borders: #374151; } .hx[client="aci"] .prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } .hx[client="aci"] .prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; } .hx[client="aci"] .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0.375em; } .hx[client="aci"] .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0.375em; } .hx[client="aci"] .prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } .hx[client="aci"] .prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; } .hx[client="aci"] .prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 1.25em; } .hx[client="aci"] .prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; } .hx[client="aci"] .prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 1.25em; } .hx[client="aci"] .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } .hx[client="aci"] .prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } .hx[client="aci"] .prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.5em; padding-inline-start: 1.625em; } .hx[client="aci"] .prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .hx[client="aci"] .prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .hx[client="aci"] .prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .hx[client="aci"] .prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .hx[client="aci"] .prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0; } .hx[client="aci"] .prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-end: 0; } .hx[client="aci"] .prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-top: 0.5714286em; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } .hx[client="aci"] .prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0; } .hx[client="aci"] .prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-end: 0; } .hx[client="aci"] .prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .hx[client="aci"] .prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .hx[client="aci"] .prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 0; } .hx[client="aci"] .alert { display: grid; width: 100%; grid-auto-flow: row; align-content: flex-start; align-items: center; justify-items: center; gap: 1rem; text-align: center; border-radius: var(--rounded-box, 1rem); border-width: 1px; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); padding: 1rem; --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --alert-bg: var(--fallback-b2,oklch(var(--b2)/1)); --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1)); background-color: var(--alert-bg); } @media (min-width: 640px) { .hx[client="aci"] .alert { grid-auto-flow: column; grid-template-columns: auto minmax(auto,1fr); justify-items: start; text-align: start; } } .hx[client="aci"] .avatar.placeholder > div { display: flex; align-items: center; justify-content: center; } .hx[client="aci"] .badge { display: inline-flex; align-items: center; justify-content: center; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; height: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; width: fit-content; padding-left: 0.563rem; padding-right: 0.563rem; border-radius: var(--rounded-badge, 1.9rem); border-width: 1px; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } .hx[client="aci"] .breadcrumbs { max-width: 100%; overflow-x: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; } .hx[client="aci"] .breadcrumbs > ul, .hx[client="aci"] .breadcrumbs > ol { display: flex; align-items: center; white-space: nowrap; min-height: min-content; } .hx[client="aci"] .breadcrumbs > ul > li, .hx[client="aci"] .breadcrumbs > ol > li { display: flex; align-items: center; } .hx[client="aci"] .breadcrumbs > ul > li > a, .hx[client="aci"] .breadcrumbs > ol > li > a { display: flex; cursor: pointer; align-items: center; } @media (hover:hover) { .hx[client="aci"] .breadcrumbs > ul > li > a:hover, .hx[client="aci"] .breadcrumbs > ol > li > a:hover { text-decoration-line: underline; } .hx[client="aci"] .link-hover:hover { text-decoration-line: underline; } .hx[client="aci"] .label a:hover { --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } .hx[client="aci"] .menu li > *:not(ul, .menu-title, details, .btn):active, .hx[client="aci"] .menu li > *:not(ul, .menu-title, details, .btn).active, .hx[client="aci"] .menu li > details > summary:active { --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); } .hx[client="aci"] .tab:hover { --tw-text-opacity: 1; } .hx[client="aci"] .table tr.hover:hover, .hx[client="aci"] .table tr.hover:nth-child(even):hover { --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); } .hx[client="aci"] .table-zebra tr.hover:hover, .hx[client="aci"] .table-zebra tr.hover:nth-child(even):hover { --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); } } .hx[client="aci"] .btn { display: inline-flex; height: 3rem; min-height: 3rem; flex-shrink: 0; cursor: pointer; -webkit-user-select: none; user-select: none; flex-wrap: wrap; align-items: center; justify-content: center; border-radius: var(--rounded-btn, 0.5rem); border-color: transparent; border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity)); padding-left: 1rem; padding-right: 1rem; text-align: center; font-size: 0.875rem; line-height: 1em; gap: 0.5rem; font-weight: 600; text-decoration-line: none; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); border-width: var(--border-btn, 1px); transition-property: color, background-color, border-color, opacity, box-shadow, transform; --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); outline-color: var(--fallback-bc,oklch(var(--bc)/1)); background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity)); --tw-bg-opacity: 1; --tw-border-opacity: 1; } .hx[client="aci"] .btn-disabled, .hx[client="aci"] .btn[disabled], .hx[client="aci"] .btn:disabled { pointer-events: none; } .hx[client="aci"] :where(.btn:is(input[type="checkbox"])), .hx[client="aci"] :where(.btn:is(input[type="radio"])) { width: auto; appearance: none; } .hx[client="aci"] .btn:is(input[type="checkbox"]):after, .hx[client="aci"] .btn:is(input[type="radio"]):after { --tw-content: attr(aria-label); content: var(--tw-content); } .hx[client="aci"] .card { position: relative; display: flex; flex-direction: column; border-radius: var(--rounded-box, 1rem); } .hx[client="aci"] .card:focus { outline: 2px solid transparent; outline-offset: 2px; } .hx[client="aci"] .card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--padding-card, 2rem); gap: 0.5rem; } .hx[client="aci"] .card-body :where(p) { flex-grow: 1; } .hx[client="aci"] .card-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; } .hx[client="aci"] .card figure { display: flex; align-items: center; justify-content: center; } .hx[client="aci"] .card.image-full { display: grid; } .hx[client="aci"] .card.image-full:before { position: relative; content: ""; z-index: 10; border-radius: var(--rounded-box, 1rem); --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); opacity: 0.75; } .hx[client="aci"] .card.image-full:before, .hx[client="aci"] .card.image-full > * { grid-column-start: 1; grid-row-start: 1; } .hx[client="aci"] .card.image-full > figure img { height: 100%; object-fit: cover; } .hx[client="aci"] .card.image-full > .card-body { position: relative; z-index: 20; --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); } .hx[client="aci"] .carousel { display: inline-flex; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .hx[client="aci"] .checkbox { flex-shrink: 0; --chkbg: var(--fallback-bc,oklch(var(--bc)/1)); --chkfg: var(--fallback-b1,oklch(var(--b1)/1)); height: 1.5rem; width: 1.5rem; cursor: pointer; appearance: none; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-border-opacity: 0.2; } .hx[client="aci"] .collapse:not(td):not(tr):not(colgroup) { visibility: visible; } .hx[client="aci"] .collapse { position: relative; display: grid; overflow: hidden; grid-template-rows: max-content 0fr; transition: grid-template-rows 0.2s; width: 100%; border-radius: var(--rounded-box, 1rem); } .hx[client="aci"] .collapse-title, .hx[client="aci"] .collapse > input[type="checkbox"], .hx[client="aci"] .collapse > input[type="radio"], .hx[client="aci"] .collapse-content { grid-column-start: 1; grid-row-start: 1; } .hx[client="aci"] .collapse > input[type="checkbox"], .hx[client="aci"] .collapse > input[type="radio"] { appearance: none; opacity: 0; } .hx[client="aci"] :where(.collapse > input[type="checkbox"]), .hx[client="aci"] :where(.collapse > input[type="radio"]) { height: 100%; width: 100%; z-index: 1; } .hx[client="aci"] .collapse[open], .hx[client="aci"] .collapse-open, .hx[client="aci"] .collapse:focus:not(.collapse-close) { grid-template-rows: max-content 1fr; } .hx[client="aci"] .collapse:not(.collapse-close):has(> input[type="checkbox"]:checked), .hx[client="aci"] .collapse:not(.collapse-close):has(> input[type="radio"]:checked) { grid-template-rows: max-content 1fr; } .hx[client="aci"] .collapse[open] > .collapse-content, .hx[client="aci"] .collapse-open > .collapse-content, .hx[client="aci"] .collapse:focus:not(.collapse-close) > .collapse-content, .hx[client="aci"] .collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content, .hx[client="aci"] .collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content { visibility: visible; min-height: fit-content; } .hx[client="aci"] .divider { display: flex; flex-direction: row; align-items: center; align-self: stretch; margin-top: 1rem; margin-bottom: 1rem; height: 1rem; white-space: nowrap; } .hx[client="aci"] .divider:before, .hx[client="aci"] .divider:after { height: 0.125rem; width: 100%; flex-grow: 1; --tw-content: ''; content: var(--tw-content); background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } .hx[client="aci"] .drawer { position: relative; display: grid; grid-auto-columns: max-content auto; width: 100%; } .hx[client="aci"] .drawer-content { grid-column-start: 2; grid-row-start: 1; min-width: 0px; } .hx[client="aci"] .drawer-side { pointer-events: none; position: fixed; inset-inline-start: 0px; top: 0px; grid-column-start: 1; grid-row-start: 1; display: grid; width: 100%; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr)); align-items: flex-start; justify-items: start; overflow-x: hidden; overflow-y: hidden; overscroll-behavior: contain; height: 100vh; height: 100dvh; } .hx[client="aci"] .drawer-side > .drawer-overlay { position: sticky; top: 0px; place-self: stretch; cursor: pointer; background-color: transparent; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; } .hx[client="aci"] .drawer-side > * { grid-column-start: 1; grid-row-start: 1; } .hx[client="aci"] .drawer-side > *:not(.drawer-overlay) { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 300ms; will-change: transform; transform: translateX(-100%); } .hx[client="aci"] [dir="rtl"] .drawer-side > *:not(.drawer-overlay) { transform: translateX(100%); } .hx[client="aci"] .drawer-toggle { position: fixed; height: 0px; width: 0px; appearance: none; opacity: 0; } .hx[client="aci"] .drawer-toggle:checked ~ .drawer-side { pointer-events: auto; visibility: visible; overflow-y: auto; } .hx[client="aci"] .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) { transform: translateX(0%); } .hx[client="aci"] .drawer-end { grid-auto-columns: auto max-content; } .hx[client="aci"] .drawer-end > .drawer-toggle ~ .drawer-content { grid-column-start: 1; } .hx[client="aci"] .drawer-end > .drawer-toggle ~ .drawer-side { grid-column-start: 2; justify-items: end; } .hx[client="aci"] .drawer-end > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) { transform: translateX(100%); } .hx[client="aci"] [dir="rtl"] .drawer-end > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) { transform: translateX(-100%); } .hx[client="aci"] .drawer-end > .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) { transform: translateX(0%); } .hx[client="aci"] .dropdown { position: relative; display: inline-block; } .hx[client="aci"] .dropdown > *:not(summary):focus { outline: 2px solid transparent; outline-offset: 2px; } .hx[client="aci"] .dropdown .dropdown-content { position: absolute; } .hx[client="aci"] .dropdown:is(:not(details)) .dropdown-content { visibility: hidden; opacity: 0; transform-origin: top; --tw-scale-x: .95; --tw-scale-y: .95; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; } .hx[client="aci"] .dropdown-end .dropdown-content { inset-inline-end: 0px; } .hx[client="aci"] .dropdown-left .dropdown-content { bottom: auto; inset-inline-end: 100%; top: 0px; transform-origin: right; } .hx[client="aci"] .dropdown-right .dropdown-content { bottom: auto; inset-inline-start: 100%; top: 0px; transform-origin: left; } .hx[client="aci"] .dropdown-bottom .dropdown-content { bottom: auto; top: 100%; transform-origin: top; } .hx[client="aci"] .dropdown-top .dropdown-content { bottom: 100%; top: auto; transform-origin: bottom; } .hx[client="aci"] .dropdown-end.dropdown-right .dropdown-content { bottom: 0px; top: auto; } .hx[client="aci"] .dropdown-end.dropdown-left .dropdown-content { bottom: 0px; top: auto; } .hx[client="aci"] .dropdown.dropdown-open .dropdown-content, .hx[client="aci"] .dropdown:not(.dropdown-hover):focus .dropdown-content, .hx[client="aci"] .dropdown:focus-within .dropdown-content { visibility: visible; opacity: 1; } @media (hover: hover) { .hx[client="aci"] .dropdown.dropdown-hover:hover .dropdown-content { visibility: visible; opacity: 1; } .hx[client="aci"] .btm-nav > *.disabled:hover, .hx[client="aci"] .btm-nav > *[disabled]:hover { pointer-events: none; --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .hx[client="aci"] .btn:hover { --tw-border-opacity: 1; border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .hx[client="aci"] .btn:hover { background-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, black ); border-color: color-mix( in oklab, oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, black ); } } @supports not (color: oklch(0% 0 0)) { .hx[client="aci"] .btn:hover { background-color: var(--btn-color, var(--fallback-b2)); border-color: var(--btn-color, var(--fallback-b2)); } } .hx[client="aci"] .btn.glass:hover { --glass-opacity: 25%; --glass-border-opacity: 15%; } .hx[client="aci"] .btn-ghost:hover { border-color: transparent; } @supports (color: oklch(0% 0 0)) { .hx[client="aci"] .btn-ghost:hover { background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } } .hx[client="aci"] .btn-link:hover { border-color: transparent; background-color: transparent; text-decoration-line: underline; } .hx[client="aci"] .btn-outline:hover { --tw-border-opacity: 1; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-primary:hover { --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .hx[client="aci"] .btn-outline.btn-primary:hover { background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); } } .hx[client="aci"] .btn-outline.btn-secondary:hover { --tw-text-opacity: 1; color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .hx[client="aci"] .btn-outline.btn-secondary:hover { background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); } } .hx[client="aci"] .btn-outline.btn-accent:hover { --tw-text-opacity: 1; color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .hx[client="aci"] .btn-outline.btn-accent:hover { background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); } } .hx[client="aci"] .btn-outline.btn-success:hover { --tw-text-opacity: 1; color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .hx[client="aci"] .btn-outline.btn-success:hover { background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); } } .hx[client="aci"] .btn-outline.btn-info:hover { --tw-text-opacity: 1; color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .hx[client="aci"] .btn-outline.btn-info:hover { background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); } } .hx[client="aci"] .btn-outline.btn-warning:hover { --tw-text-opacity: 1; color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .hx[client="aci"] .btn-outline.btn-warning:hover { background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); } } .hx[client="aci"] .btn-outline.btn-error:hover { --tw-text-opacity: 1; color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); } @supports (color: color-mix(in oklab, black, black)) { .hx[client="aci"] .btn-outline.btn-error:hover { background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); } } .hx[client="aci"] .btn-disabled:hover, .hx[client="aci"] .btn[disabled]:hover, .hx[client="aci"] .btn:disabled:hover { --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.2; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } @supports (color: color-mix(in oklab, black, black)) { .hx[client="aci"] .btn:is(input[type="checkbox"]:checked):hover, .hx[client="aci"] .btn:is(input[type="radio"]:checked):hover { background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); } } .hx[client="aci"] .dropdown.dropdown-hover:hover .dropdown-content { --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hx[client="aci"] :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, .hx[client="aci"] :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; } @supports (color: oklch(0% 0 0)) { .hx[client="aci"] :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, .hx[client="aci"] :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover { background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } } .hx[client="aci"] .tab[disabled], .hx[client="aci"] .tab[disabled]:hover { cursor: not-allowed; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } } .hx[client="aci"] .dropdown:is(details) summary::-webkit-details-marker { display: none; } .hx[client="aci"] .file-input { height: 3rem; flex-shrink: 1; padding-inline-end: 1rem; font-size: 1rem; line-height: 2; line-height: 1.5rem; overflow: hidden; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-border-opacity: 0; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .hx[client="aci"] .file-input::file-selector-button { margin-inline-end: 1rem; display: inline-flex; height: 100%; flex-shrink: 0; cursor: pointer; -webkit-user-select: none; user-select: none; flex-wrap: wrap; align-items: center; justify-content: center; padding-left: 1rem; padding-right: 1rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; line-height: 1em; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; border-style: solid; --tw-border-opacity: 1; border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); font-weight: 600; text-transform: uppercase; --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); text-decoration-line: none; border-width: var(--border-btn, 1px); animation: button-pop var(--animation-btn, 0.25s) ease-out; } .hx[client="aci"] .footer { display: grid; width: 100%; grid-auto-flow: row; place-items: start; column-gap: 1rem; row-gap: 2.5rem; font-size: 0.875rem; line-height: 1.25rem; } .hx[client="aci"] .footer > * { display: grid; place-items: start; gap: 0.5rem; } @media (min-width: 48rem) { .hx[client="aci"] .footer { grid-auto-flow: column; } .hx[client="aci"] .footer-center { grid-auto-flow: row dense; } } .hx[client="aci"] .form-control { display: flex; flex-direction: column; } .hx[client="aci"] .label { display: flex; -webkit-user-select: none; user-select: none; align-items: center; justify-content: space-between; padding-left: 0.25rem; padding-right: 0.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .hx[client="aci"] .input { flex-shrink: 1; appearance: none; height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: 1rem; line-height: 2; line-height: 1.5rem; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: transparent; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .hx[client="aci"] .input[type="number"]::-webkit-inner-spin-button, .hx[client="aci"] .input-md[type="number"]::-webkit-inner-spin-button { margin-top: -1rem; margin-bottom: -1rem; margin-inline-end: -1rem; } .hx[client="aci"] .join { display: inline-flex; align-items: stretch; border-radius: var(--rounded-btn, 0.5rem); } .hx[client="aci"] .join :where(.join-item) { border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 0; border-start-start-radius: 0; } .hx[client="aci"] .join .join-item:not(:first-child):not(:last-child), .hx[client="aci"] .join *:not(:first-child):not(:last-child) .join-item { border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 0; border-start-start-radius: 0; } .hx[client="aci"] .join .join-item:first-child:not(:last-child), .hx[client="aci"] .join *:first-child:not(:last-child) .join-item { border-start-end-radius: 0; border-end-end-radius: 0; } .hx[client="aci"] .join .dropdown .join-item:first-child:not(:last-child), .hx[client="aci"] .join *:first-child:not(:last-child) .dropdown .join-item { border-start-end-radius: inherit; border-end-end-radius: inherit; } .hx[client="aci"] .join :where(.join-item:first-child:not(:last-child)), .hx[client="aci"] .join :where(*:first-child:not(:last-child) .join-item) { border-end-start-radius: inherit; border-start-start-radius: inherit; } .hx[client="aci"] .join .join-item:last-child:not(:first-child), .hx[client="aci"] .join *:last-child:not(:first-child) .join-item { border-end-start-radius: 0; border-start-start-radius: 0; } .hx[client="aci"] .join :where(.join-item:last-child:not(:first-child)), .hx[client="aci"] .join :where(*:last-child:not(:first-child) .join-item) { border-start-end-radius: inherit; border-end-end-radius: inherit; } @supports not selector(:has(*)) { .hx[client="aci"] :where(.join *) { border-radius: inherit; } } @supports selector(:has(*)) { .hx[client="aci"] :where(.join *:has(.join-item)) { border-radius: inherit; } } .hx[client="aci"] .kbd { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-border-opacity: 0.2; --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); padding-left: 0.5rem; padding-right: 0.5rem; --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); border-bottom-width: 2px; min-height: 2.2em; min-width: 2.2em; } .hx[client="aci"] .link { cursor: pointer; text-decoration-line: underline; } .hx[client="aci"] .link-hover { text-decoration-line: none; } .hx[client="aci"] .menu { display: flex; flex-direction: column; flex-wrap: wrap; font-size: 0.875rem; line-height: 1.25rem; padding: 0.5rem; } .hx[client="aci"] .menu :where(li ul) { position: relative; white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: 0.5rem; } .hx[client="aci"] .menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .hx[client="aci"] .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) { display: grid; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: 0.5rem; grid-auto-columns: minmax(auto, max-content) auto max-content; -webkit-user-select: none; user-select: none; } .hx[client="aci"] .menu li.disabled { cursor: not-allowed; -webkit-user-select: none; user-select: none; color: var(--fallback-bc,oklch(var(--bc)/0.3)); } .hx[client="aci"] .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) { display: none; } .hx[client="aci"] :where(.menu li) { position: relative; display: flex; flex-shrink: 0; flex-direction: column; flex-wrap: wrap; align-items: stretch; } .hx[client="aci"] :where(.menu li) .badge { justify-self: end; } .hx[client="aci"] .modal { pointer-events: none; position: fixed; inset: 0px; margin: 0px; display: grid; height: 100%; max-height: none; width: 100%; max-width: none; justify-items: center; padding: 0px; opacity: 0; overscroll-behavior: contain; z-index: 999; background-color: transparent; color: inherit; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-property: transform, opacity, visibility; overflow-y: hidden; } .hx[client="aci"] :where(.modal) { align-items: center; } .hx[client="aci"] .modal-box { max-height: calc(100vh - 5em); grid-column-start: 1; grid-row-start: 1; width: 91.666667%; max-width: 32rem; --tw-scale-x: .9; --tw-scale-y: .9; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-bottom-right-radius: var(--rounded-box, 1rem); border-bottom-left-radius: var(--rounded-box, 1rem); border-top-left-radius: var(--rounded-box, 1rem); border-top-right-radius: var(--rounded-box, 1rem); --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); padding: 1.5rem; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; overflow-y: auto; overscroll-behavior: contain; } .hx[client="aci"] .modal-open, .hx[client="aci"] .modal:target, .hx[client="aci"] .modal-toggle:checked + .modal, .hx[client="aci"] .modal[open] { pointer-events: auto; visibility: visible; opacity: 1; } .hx[client="aci"] .modal-action { display: flex; margin-top: 1.5rem; justify-content: flex-end; } :root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) { overflow: hidden; scrollbar-gutter: stable; } .hx[client="aci"] .navbar { display: flex; align-items: center; padding: var(--navbar-padding, 0.5rem); min-height: 4rem; width: 100%; } .hx[client="aci"] :where(.navbar > *:not(script, style)) { display: inline-flex; align-items: center; } .hx[client="aci"] .radio { flex-shrink: 0; --chkbg: var(--bc); height: 1.5rem; width: 1.5rem; cursor: pointer; appearance: none; border-radius: 9999px; border-width: 1px; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-border-opacity: 0.2; } .hx[client="aci"] .range { height: 1.5rem; width: 100%; cursor: pointer; appearance: none; -webkit-appearance: none; --range-shdw: var(--fallback-bc,oklch(var(--bc)/1)); overflow: hidden; border-radius: var(--rounded-box, 1rem); background-color: transparent; } .hx[client="aci"] .range:focus { outline: none; } .hx[client="aci"] .select { display: inline-flex; cursor: pointer; -webkit-user-select: none; user-select: none; appearance: none; height: 3rem; min-height: 3rem; padding-inline-start: 1rem; padding-inline-end: 2.5rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: transparent; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } .hx[client="aci"] .select[multiple] { height: auto; } .hx[client="aci"] .tabs { display: grid; align-items: flex-end; } .hx[client="aci"] .tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .hx[client="aci"] .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) { border-bottom-color: transparent; } .hx[client="aci"] .tab { position: relative; grid-row-start: 1; display: inline-flex; height: 2rem; cursor: pointer; -webkit-user-select: none; user-select: none; appearance: none; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; --tab-padding: 1rem; --tw-text-opacity: 0.5; --tab-color: var(--fallback-bc,oklch(var(--bc)/1)); --tab-bg: var(--fallback-b1,oklch(var(--b1)/1)); --tab-border-color: var(--fallback-b3,oklch(var(--b3)/1)); color: var(--tab-color); padding-inline-start: var(--tab-padding, 1rem); padding-inline-end: var(--tab-padding, 1rem); } .hx[client="aci"] .tab:is(input[type="radio"]) { width: auto; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .hx[client="aci"] .tab:is(input[type="radio"]):after { --tw-content: attr(aria-label); content: var(--tw-content); } .hx[client="aci"] .tab:not(input):empty { cursor: default; grid-column-start: span 9999; } .hx[client="aci"] .tab-content { grid-column-start: 1; grid-column-end: span 9999; grid-row-start: 2; margin-top: calc(var(--tab-border) * -1); display: none; border-color: transparent; border-width: var(--tab-border, 0); } .hx[client="aci"] :checked + .tab-content:nth-child(2), .hx[client="aci"] :is(.tab-active, [aria-selected="true"]) + .tab-content:nth-child(2) { border-start-start-radius: 0px; } .hx[client="aci"] input.tab:checked + .tab-content, .hx[client="aci"] :is(.tab-active, [aria-selected="true"]) + .tab-content { display: block; } .hx[client="aci"] .table { position: relative; width: 100%; border-radius: var(--rounded-box, 1rem); text-align: left; font-size: 0.875rem; line-height: 1.25rem; } .hx[client="aci"] .table :where(.table-pin-rows thead tr) { position: sticky; top: 0px; z-index: 1; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .hx[client="aci"] .table :where(.table-pin-rows tfoot tr) { position: sticky; bottom: 0px; z-index: 1; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .hx[client="aci"] .table :where(.table-pin-cols tr th) { position: sticky; left: 0px; right: 0px; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .hx[client="aci"] .textarea { min-height: 3rem; flex-shrink: 1; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; border-radius: var(--rounded-btn, 0.5rem); border-width: 1px; border-color: transparent; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .hx[client="aci"] .badge-neutral { --tw-border-opacity: 1; border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); } .hx[client="aci"] .badge-outline.badge-neutral { --tw-text-opacity: 1; color: var(--fallback-n,oklch(var(--n)/var(--tw-text-opacity))); } .hx[client="aci"] .btm-nav > *:where(.active) { border-top-width: 2px; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } .hx[client="aci"] .btm-nav > *.disabled, .hx[client="aci"] .btm-nav > *[disabled] { pointer-events: none; --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .hx[client="aci"] .btm-nav > * .label { font-size: 1rem; line-height: 1.5rem; } .hx[client="aci"] .breadcrumbs > ul > li > a:focus, .hx[client="aci"] .breadcrumbs > ol > li > a:focus { outline: 2px solid transparent; outline-offset: 2px; } .hx[client="aci"] .breadcrumbs > ul > li > a:focus-visible, .hx[client="aci"] .breadcrumbs > ol > li > a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .hx[client="aci"] .breadcrumbs > ul > li + *:before, .hx[client="aci"] .breadcrumbs > ol > li + *:before { content: ""; margin-left: 0.5rem; margin-right: 0.75rem; display: block; height: 0.375rem; width: 0.375rem; --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); opacity: 0.4; border-top: 1px solid; border-right: 1px solid; background-color: transparent; } .hx[client="aci"] [dir="rtl"] .breadcrumbs > ul > li + *:before, .hx[client="aci"] [dir="rtl"] .breadcrumbs > ol > li + *:before { --tw-rotate: -135deg; } @media (prefers-reduced-motion: no-preference) { .hx[client="aci"] .btn { animation: button-pop var(--animation-btn, 0.25s) ease-out; } } .hx[client="aci"] .btn:active:hover, .hx[client="aci"] .btn:active:focus { animation: button-pop 0s ease-out; transform: scale(var(--btn-focus-scale, 0.97)); } @supports not (color: oklch(0% 0 0)) { .hx[client="aci"] .btn { background-color: var(--btn-color, var(--fallback-b2)); border-color: var(--btn-color, var(--fallback-b2)); } .hx[client="aci"] .btn-primary { --btn-color: var(--fallback-p); } .hx[client="aci"] .btn-secondary { --btn-color: var(--fallback-s); } .hx[client="aci"] .btn-neutral { --btn-color: var(--fallback-n); } .hx[client="aci"] .btn-success { --btn-color: var(--fallback-su); } .hx[client="aci"] .btn-warning { --btn-color: var(--fallback-wa); } .hx[client="aci"] .btn-error { --btn-color: var(--fallback-er); } .hx[client="aci"] .prose :where(code):not(:where([class~="not-prose"] *, pre *)) { background-color: var(--fallback-b3,oklch(var(--b3)/1)); } } @supports (color: color-mix(in oklab, black, black)) { .hx[client="aci"] .btn-outline.btn-primary.btn-active { background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); } .hx[client="aci"] .btn-outline.btn-secondary.btn-active { background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black); } .hx[client="aci"] .btn-outline.btn-accent.btn-active { background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black); } .hx[client="aci"] .btn-outline.btn-success.btn-active { background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); } .hx[client="aci"] .btn-outline.btn-info.btn-active { background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); } .hx[client="aci"] .btn-outline.btn-warning.btn-active { background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black); } .hx[client="aci"] .btn-outline.btn-error.btn-active { background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black); } } .hx[client="aci"] .btn:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; } .hx[client="aci"] .btn-primary { --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); outline-color: var(--fallback-p,oklch(var(--p)/1)); } @supports (color: oklch(0% 0 0)) { .hx[client="aci"] .btn-primary { --btn-color: var(--p); } .hx[client="aci"] .btn-secondary { --btn-color: var(--s); } .hx[client="aci"] .btn-neutral { --btn-color: var(--n); } .hx[client="aci"] .btn-success { --btn-color: var(--su); } .hx[client="aci"] .btn-warning { --btn-color: var(--wa); } .hx[client="aci"] .btn-error { --btn-color: var(--er); } } .hx[client="aci"] .btn-secondary { --tw-text-opacity: 1; color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); outline-color: var(--fallback-s,oklch(var(--s)/1)); } .hx[client="aci"] .btn-neutral { --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); outline-color: var(--fallback-n,oklch(var(--n)/1)); } .hx[client="aci"] .btn-success { --tw-text-opacity: 1; color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); outline-color: var(--fallback-su,oklch(var(--su)/1)); } .hx[client="aci"] .btn-warning { --tw-text-opacity: 1; color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); outline-color: var(--fallback-wa,oklch(var(--wa)/1)); } .hx[client="aci"] .btn-error { --tw-text-opacity: 1; color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); outline-color: var(--fallback-er,oklch(var(--er)/1)); } .hx[client="aci"] .btn.glass { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); outline-color: currentColor; } .hx[client="aci"] .btn.glass.btn-active { --glass-opacity: 25%; --glass-border-opacity: 15%; } .hx[client="aci"] .btn-ghost { border-width: 1px; border-color: transparent; background-color: transparent; color: currentColor; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); outline-color: currentColor; } .hx[client="aci"] .btn-ghost.btn-active { border-color: transparent; background-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .hx[client="aci"] .btn-link { border-color: transparent; background-color: transparent; --tw-text-opacity: 1; color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity))); text-decoration-line: underline; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); outline-color: currentColor; } .hx[client="aci"] .btn-link.btn-active { border-color: transparent; background-color: transparent; text-decoration-line: underline; } .hx[client="aci"] .btn-outline { border-color: currentColor; background-color: transparent; --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hx[client="aci"] .btn-outline.btn-active { --tw-border-opacity: 1; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-primary { --tw-text-opacity: 1; color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-primary.btn-active { --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-secondary { --tw-text-opacity: 1; color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-secondary.btn-active { --tw-text-opacity: 1; color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-accent { --tw-text-opacity: 1; color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-accent.btn-active { --tw-text-opacity: 1; color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-success { --tw-text-opacity: 1; color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-success.btn-active { --tw-text-opacity: 1; color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-info { --tw-text-opacity: 1; color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-info.btn-active { --tw-text-opacity: 1; color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-warning { --tw-text-opacity: 1; color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-warning.btn-active { --tw-text-opacity: 1; color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-error { --tw-text-opacity: 1; color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity))); } .hx[client="aci"] .btn-outline.btn-error.btn-active { --tw-text-opacity: 1; color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity))); } .hx[client="aci"] .btn.btn-disabled, .hx[client="aci"] .btn[disabled], .hx[client="aci"] .btn:disabled { --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.2; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .hx[client="aci"] .btn:is(input[type="checkbox"]:checked), .hx[client="aci"] .btn:is(input[type="radio"]:checked) { --tw-border-opacity: 1; border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } .hx[client="aci"] .btn:is(input[type="checkbox"]:checked):focus-visible, .hx[client="aci"] .btn:is(input[type="radio"]:checked):focus-visible { outline-color: var(--fallback-p,oklch(var(--p)/1)); } @keyframes button-pop { 0% { transform: scale(var(--btn-focus-scale, 0.98)); } 40% { transform: scale(1.02); } 100% { transform: scale(1); } } .hx[client="aci"] .card :where(figure:first-child) { overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-start-radius: unset; border-end-end-radius: unset; } .hx[client="aci"] .card :where(figure:last-child) { overflow: hidden; border-start-start-radius: unset; border-start-end-radius: unset; border-end-start-radius: inherit; border-end-end-radius: inherit; } .hx[client="aci"] .card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .hx[client="aci"] .card.bordered { border-width: 1px; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); } .hx[client="aci"] .card.compact .card-body { padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .hx[client="aci"] .card-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; } .hx[client="aci"] .card.image-full :where(figure) { overflow: hidden; border-radius: inherit; } .hx[client="aci"] .carousel::-webkit-scrollbar { display: none; } .hx[client="aci"] .checkbox:focus { box-shadow: none; } .hx[client="aci"] .checkbox:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/1)); } .hx[client="aci"] .checkbox:disabled { border-width: 0px; cursor: not-allowed; border-color: transparent; --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); opacity: 0.2; } .hx[client="aci"] .checkbox:checked, .hx[client="aci"] .checkbox[aria-checked="true"] { background-repeat: no-repeat; animation: checkmark var(--animation-input, 0.2s) ease-out; background-color: var(--chkbg); background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%), linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%), linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%), linear-gradient( 45deg, var(--chkbg) 30%, var(--chkfg) 30.99%, var(--chkfg) 40%, transparent 40.99% ), linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%); } .hx[client="aci"] .checkbox:indeterminate { --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); background-repeat: no-repeat; animation: checkmark var(--animation-input, 0.2s) ease-out; background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%), linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%), linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%); } @keyframes checkmark { 0% { background-position-y: 5px; } 50% { background-position-y: -2px; } 100% { background-position-y: 0; } } .hx[client="aci"] details.collapse { width: 100%; } .hx[client="aci"] details.collapse summary { position: relative; display: block; outline: 2px solid transparent; outline-offset: 2px; } .hx[client="aci"] details.collapse summary::-webkit-details-marker { display: none; } .hx[client="aci"] .collapse:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/1)); } .hx[client="aci"] .collapse:has(.collapse-title:focus-visible), .hx[client="aci"] .collapse:has(> input[type="checkbox"]:focus-visible), .hx[client="aci"] .collapse:has(> input[type="radio"]:focus-visible) { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/1)); } .hx[client="aci"] .collapse:not(.collapse-open):not(.collapse-close) > input[type="checkbox"], .hx[client="aci"] .collapse:not(.collapse-open):not(.collapse-close) > input[type="radio"]:not(:checked), .hx[client="aci"] .collapse:not(.collapse-open):not(.collapse-close) > .collapse-title { cursor: pointer; } .hx[client="aci"] .collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) > .collapse-title { cursor: unset; } .hx[client="aci"] .collapse-title, .hx[client="aci"] :where(.collapse > input[type="checkbox"]), .hx[client="aci"] :where(.collapse > input[type="radio"]) { padding: 1rem; padding-inline-end: 3rem; min-height: 3.75rem; transition: background-color 0.2s ease-out; } .hx[client="aci"] .collapse[open] > :where(.collapse-content), .hx[client="aci"] .collapse-open > :where(.collapse-content), .hx[client="aci"] .collapse:focus:not(.collapse-close) > :where(.collapse-content), .hx[client="aci"] .collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content), .hx[client="aci"] .collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content) { padding-bottom: 1rem; transition: padding 0.2s ease-out, background-color 0.2s ease-out; } .hx[client="aci"] .collapse[open].collapse-arrow > .collapse-title:after, .hx[client="aci"] .collapse-open.collapse-arrow > .collapse-title:after, .hx[client="aci"] .collapse-arrow:focus:not(.collapse-close) > .collapse-title:after, .hx[client="aci"] .collapse-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after, .hx[client="aci"] .collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after { --tw-translate-y: -50%; --tw-rotate: 225deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hx[client="aci"] .collapse[open].collapse-plus > .collapse-title:after, .hx[client="aci"] .collapse-open.collapse-plus > .collapse-title:after, .hx[client="aci"] .collapse-plus:focus:not(.collapse-close) > .collapse-title:after, .hx[client="aci"] .collapse-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after, .hx[client="aci"] .collapse-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after { content: "−"; } .hx[client="aci"] .divider:not(:empty) { gap: 1rem; } .hx[client="aci"] .drawer-toggle:checked ~ .drawer-side > .drawer-overlay { background-color: #0006; } .hx[client="aci"] .drawer-toggle:focus-visible ~ .drawer-content label.drawer-button { outline-style: solid; outline-width: 2px; outline-offset: 2px; } .hx[client="aci"] .dropdown.dropdown-open .dropdown-content, .hx[client="aci"] .dropdown:focus .dropdown-content, .hx[client="aci"] .dropdown:focus-within .dropdown-content { --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hx[client="aci"] .file-input-bordered { --tw-border-opacity: 0.2; } .hx[client="aci"] .file-input:focus { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .hx[client="aci"] .file-input-disabled, .hx[client="aci"] .file-input[disabled] { cursor: not-allowed; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); --tw-text-opacity: 0.2; } .hx[client="aci"] .file-input-disabled::placeholder, .hx[client="aci"] .file-input[disabled]::placeholder { color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .hx[client="aci"] .file-input-disabled::file-selector-button, .hx[client="aci"] .file-input[disabled]::file-selector-button { --tw-border-opacity: 0; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-bg-opacity: 0.2; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .hx[client="aci"] .label-text { font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } .hx[client="aci"] .input input { --tw-bg-opacity: 1; background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))); background-color: transparent; } .hx[client="aci"] .input input:focus { outline: 2px solid transparent; outline-offset: 2px; } .hx[client="aci"] .input[list]::-webkit-calendar-picker-indicator { line-height: 1em; } .hx[client="aci"] .input-bordered { border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .hx[client="aci"] .input:focus, .hx[client="aci"] .input:focus-within { box-shadow: none; border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .hx[client="aci"] .input:has(> input[disabled]), .hx[client="aci"] .input-disabled, .hx[client="aci"] .input:disabled, .hx[client="aci"] .input[disabled] { cursor: not-allowed; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); color: var(--fallback-bc,oklch(var(--bc)/0.4)); } .hx[client="aci"] .input:has(> input[disabled])::placeholder, .hx[client="aci"] .input-disabled::placeholder, .hx[client="aci"] .input:disabled::placeholder, .hx[client="aci"] .input[disabled]::placeholder { color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .hx[client="aci"] .input:has(> input[disabled]) > input[disabled] { cursor: not-allowed; } .hx[client="aci"] .input::-webkit-date-and-time-value { text-align: inherit; } .hx[client="aci"] .join > :where(*:not(:first-child)) { margin-top: 0px; margin-bottom: 0px; margin-inline-start: -1px; } .hx[client="aci"] .join > :where(*:not(:first-child)):is(.btn) { margin-inline-start: calc(var(--border-btn) * -1); } .hx[client="aci"] .link:focus { outline: 2px solid transparent; outline-offset: 2px; } .hx[client="aci"] .link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .hx[client="aci"] .loading { pointer-events: none; display: inline-block; aspect-ratio: 1 / 1; width: 1.5rem; background-color: currentColor; -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } .hx[client="aci"] .loading-spinner { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } .hx[client="aci"] .loading-dots { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E"); } .hx[client="aci"] .loading-ring { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } .hx[client="aci"] .loading-ball { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E"); } .hx[client="aci"] .loading-bars { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E"); } .hx[client="aci"] .loading-infinity { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E"); } .hx[client="aci"] .loading-xs { width: 1rem; } .hx[client="aci"] .loading-sm { width: 1.25rem; } .hx[client="aci"] .loading-md { width: 1.5rem; } .hx[client="aci"] .loading-lg { width: 2.5rem; } .hx[client="aci"] :where(.menu li:empty) { --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); opacity: 0.1; margin: 0.5rem 1rem; height: 1px; } .hx[client="aci"] .menu :where(li ul):before { position: absolute; bottom: 0.75rem; inset-inline-start: 0px; top: 0.75rem; width: 1px; --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); opacity: 0.1; content: ""; } .hx[client="aci"] .menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .hx[client="aci"] .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) { border-radius: var(--rounded-btn, 0.5rem); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: start; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; text-wrap: balance; } .hx[client="aci"] :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, .hx[client="aci"] :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, .hx[client="aci"] :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, .hx[client="aci"] :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, .hx[client="aci"] :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, .hx[client="aci"] :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible { cursor: pointer; background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); --tw-text-opacity: 1; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); outline: 2px solid transparent; outline-offset: 2px; } .hx[client="aci"] .menu li > *:not(ul, .menu-title, details, .btn):active, .hx[client="aci"] .menu li > *:not(ul, .menu-title, details, .btn).active, .hx[client="aci"] .menu li > details > summary:active { --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); --tw-text-opacity: 1; color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); } .hx[client="aci"] .menu :where(li > details > summary)::-webkit-details-marker { display: none; } .hx[client="aci"] .menu :where(li > details > summary):after, .hx[client="aci"] .menu :where(li > .menu-dropdown-toggle):after { justify-self: end; display: block; margin-top: -0.5rem; height: 0.5rem; width: 0.5rem; transform: rotate(45deg); transition-property: transform, margin-top; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); content: ""; transform-origin: 75% 75%; box-shadow: 2px 2px; pointer-events: none; } .hx[client="aci"] .menu :where(li > details[open] > summary):after, .hx[client="aci"] .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { transform: rotate(225deg); margin-top: 0; } .hx[client="aci"] .menu-title { padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: var(--fallback-bc,oklch(var(--bc)/0.4)); } .hx[client="aci"] .mockup-phone .display { overflow: hidden; border-radius: 40px; margin-top: -25px; } .hx[client="aci"] .mockup-browser .mockup-browser-toolbar .input { position: relative; margin-left: auto; margin-right: auto; display: block; height: 1.75rem; width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); padding-left: 2rem; direction: ltr; } .hx[client="aci"] .mockup-browser .mockup-browser-toolbar .input:before { content: ""; position: absolute; left: 0.5rem; top: 50%; aspect-ratio: 1 / 1; height: 0.75rem; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-radius: 9999px; border-width: 2px; border-color: currentColor; opacity: 0.6; } .hx[client="aci"] .mockup-browser .mockup-browser-toolbar .input:after { content: ""; position: absolute; left: 1.25rem; top: 50%; height: 0.5rem; --tw-translate-y: 25%; --tw-rotate: -45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-radius: 9999px; border-width: 1px; border-color: currentColor; opacity: 0.6; } .hx[client="aci"] .modal:not(dialog:not(.modal-open)), .hx[client="aci"] .modal::backdrop { background-color: #0006; animation: modal-pop 0.2s ease-out; } .hx[client="aci"] .modal-backdrop { z-index: -1; grid-column-start: 1; grid-row-start: 1; display: grid; align-self: stretch; justify-self: stretch; color: transparent; } .hx[client="aci"] .modal-open .modal-box, .hx[client="aci"] .modal-toggle:checked + .modal .modal-box, .hx[client="aci"] .modal:target .modal-box, .hx[client="aci"] .modal[open] .modal-box { --tw-translate-y: 0px; --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hx[client="aci"] .modal-action > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } .hx[client="aci"] .modal-action:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; } @keyframes modal-pop { 0% { opacity: 0; } } @keyframes progress-loading { 50% { background-position-x: -115%; } } .hx[client="aci"] .radio:focus { box-shadow: none; } .hx[client="aci"] .radio:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/1)); } .hx[client="aci"] .radio:checked, .hx[client="aci"] .radio[aria-checked="true"] { --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); background-image: none; animation: radiomark var(--animation-input, 0.2s) ease-out; box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset; } .hx[client="aci"] .radio:disabled { cursor: not-allowed; opacity: 0.2; } @keyframes radiomark { 0% { box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset; } 50% { box-shadow: 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset; } 100% { box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset; } } .hx[client="aci"] .range:focus-visible::-webkit-slider-thumb { --focus-shadow: 0 0 0 6px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 2rem var(--range-shdw) inset; } .hx[client="aci"] .range:focus-visible::-moz-range-thumb { --focus-shadow: 0 0 0 6px var(--fallback-b1,oklch(var(--b1)/1)) inset, 0 0 0 2rem var(--range-shdw) inset; } .hx[client="aci"] .range::-webkit-slider-runnable-track { height: 0.5rem; width: 100%; border-radius: var(--rounded-box, 1rem); background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } .hx[client="aci"] .range::-moz-range-track { height: 0.5rem; width: 100%; border-radius: var(--rounded-box, 1rem); background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } .hx[client="aci"] .range::-webkit-slider-thumb { position: relative; height: 1.5rem; width: 1.5rem; border-radius: var(--rounded-box, 1rem); border-style: none; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); appearance: none; -webkit-appearance: none; top: 50%; color: var(--range-shdw); transform: translateY(-50%); --filler-size: 100rem; --filler-offset: 0.6rem; box-shadow: 0 0 0 3px var(--range-shdw) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size); } .hx[client="aci"] .range::-moz-range-thumb { position: relative; height: 1.5rem; width: 1.5rem; border-radius: var(--rounded-box, 1rem); border-style: none; --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); top: 50%; color: var(--range-shdw); --filler-size: 100rem; --filler-offset: 0.5rem; box-shadow: 0 0 0 3px var(--range-shdw) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size); } @keyframes rating-pop { 0% { transform: translateY(-0.125em); } 40% { transform: translateY(-0.125em); } 100% { transform: translateY(0); } } .hx[client="aci"] .select-bordered { border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .hx[client="aci"] .select:focus { box-shadow: none; border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .hx[client="aci"] .select-disabled, .hx[client="aci"] .select:disabled, .hx[client="aci"] .select[disabled] { cursor: not-allowed; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); color: var(--fallback-bc,oklch(var(--bc)/0.4)); } .hx[client="aci"] .select-disabled::placeholder, .hx[client="aci"] .select:disabled::placeholder, .hx[client="aci"] .select[disabled]::placeholder { color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } .hx[client="aci"] .select-multiple, .hx[client="aci"] .select[multiple], .hx[client="aci"] .select[size].select:not([size="1"]) { background-image: none; padding-right: 1rem; } .hx[client="aci"] [dir="rtl"] .select { background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%); } @keyframes skeleton { from { background-position: 150%; } to { background-position: -50%; } } .hx[client="aci"] .tabs-lifted > .tab:focus-visible { border-end-end-radius: 0; border-end-start-radius: 0; } .hx[client="aci"] .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .hx[client="aci"] .tab:is(input:checked) { border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-border-opacity: 1; --tw-text-opacity: 1; } .hx[client="aci"] .tab:focus { outline: 2px solid transparent; outline-offset: 2px; } .hx[client="aci"] .tab:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; } .hx[client="aci"] .tab-disabled, .hx[client="aci"] .tab[disabled] { cursor: not-allowed; color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); --tw-text-opacity: 0.2; } .hx[client="aci"] .tabs-bordered > .tab { border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); --tw-border-opacity: 0.2; border-style: solid; border-bottom-width: calc(var(--tab-border, 1px) + 1px); } .hx[client="aci"] .tabs-lifted > .tab { border: var(--tab-border, 1px) solid transparent; border-width: 0 0 var(--tab-border, 1px) 0; border-start-start-radius: var(--tab-radius, 0.5rem); border-start-end-radius: var(--tab-radius, 0.5rem); border-bottom-color: var(--tab-border-color); padding-inline-start: var(--tab-padding, 1rem); padding-inline-end: var(--tab-padding, 1rem); padding-top: var(--tab-border, 1px); } .hx[client="aci"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .hx[client="aci"] .tabs-lifted > .tab:is(input:checked) { background-color: var(--tab-bg); border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px); border-inline-start-color: var(--tab-border-color); border-inline-end-color: var(--tab-border-color); border-top-color: var(--tab-border-color); padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px)); padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px)); padding-bottom: var(--tab-border, 1px); padding-top: 0; } .hx[client="aci"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .hx[client="aci"] .tabs-lifted > .tab:is(input:checked):before { z-index: 1; content: ""; display: block; position: absolute; width: calc(100% + var(--tab-radius, 0.5rem) * 2); height: var(--tab-radius, 0.5rem); bottom: 0; background-size: var(--tab-radius, 0.5rem); background-position: top left, top right; background-repeat: no-repeat; --tab-grad: calc(69% - var(--tab-border, 1px)); --radius-start: radial-gradient( circle at top left, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); --radius-end: radial-gradient( circle at top right, transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.25px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) ); background-image: var(--radius-start), var(--radius-end); } .hx[client="aci"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .hx[client="aci"] .tabs-lifted > .tab:is(input:checked):first-child:before { background-image: var(--radius-end); background-position: top right; } .hx[client="aci"] [dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .hx[client="aci"] [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before { background-image: var(--radius-start); background-position: top left; } .hx[client="aci"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .hx[client="aci"] .tabs-lifted > .tab:is(input:checked):last-child:before { background-image: var(--radius-start); background-position: top left; } .hx[client="aci"] [dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .hx[client="aci"] [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before { background-image: var(--radius-end); background-position: top right; } .hx[client="aci"] .tabs-lifted > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]) + .tabs-lifted :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .hx[client="aci"] .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before { background-image: var(--radius-end); background-position: top right; } .hx[client="aci"] .tabs-boxed .tab { border-radius: var(--rounded-btn, 0.5rem); } .hx[client="aci"] .table:where([dir="rtl"], [dir="rtl"] *) { text-align: right; } .hx[client="aci"] .table :where(th, td) { padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; vertical-align: middle; } .hx[client="aci"] .table tr.active, .hx[client="aci"] .table tr.active:nth-child(even), .hx[client="aci"] .table-zebra tbody tr:nth-child(even) { --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); } .hx[client="aci"] .table-zebra tr.active, .hx[client="aci"] .table-zebra tr.active:nth-child(even), .hx[client="aci"] .table-zebra-zebra tbody tr:nth-child(even) { --tw-bg-opacity: 1; background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); } .hx[client="aci"] .table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) { border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); } .hx[client="aci"] .table :where(thead, tfoot) { white-space: nowrap; font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: var(--fallback-bc,oklch(var(--bc)/0.6)); } .hx[client="aci"] .table :where(tfoot) { border-top-width: 1px; --tw-border-opacity: 1; border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); } .hx[client="aci"] .textarea-bordered { border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .hx[client="aci"] .textarea:focus { box-shadow: none; border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .hx[client="aci"] .textarea-disabled, .hx[client="aci"] .textarea:disabled, .hx[client="aci"] .textarea[disabled] { cursor: not-allowed; --tw-border-opacity: 1; border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); --tw-bg-opacity: 1; background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); color: var(--fallback-bc,oklch(var(--bc)/0.4)); } .hx[client="aci"] .textarea-disabled::placeholder, .hx[client="aci"] .textarea:disabled::placeholder, .hx[client="aci"] .textarea[disabled]::placeholder { color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); --tw-placeholder-opacity: 0.2; } @keyframes toast-pop { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } :root .prose { --tw-prose-body: var(--fallback-bc,oklch(var(--bc)/0.8)); --tw-prose-headings: var(--fallback-bc,oklch(var(--bc)/1)); --tw-prose-lead: var(--fallback-bc,oklch(var(--bc)/1)); --tw-prose-links: var(--fallback-bc,oklch(var(--bc)/1)); --tw-prose-bold: var(--fallback-bc,oklch(var(--bc)/1)); --tw-prose-counters: var(--fallback-bc,oklch(var(--bc)/1)); --tw-prose-bullets: var(--fallback-bc,oklch(var(--bc)/0.5)); --tw-prose-hr: var(--fallback-bc,oklch(var(--bc)/0.2)); --tw-prose-quotes: var(--fallback-bc,oklch(var(--bc)/1)); --tw-prose-quote-borders: var(--fallback-bc,oklch(var(--bc)/0.2)); --tw-prose-captions: var(--fallback-bc,oklch(var(--bc)/0.5)); --tw-prose-code: var(--fallback-bc,oklch(var(--bc)/1)); --tw-prose-pre-code: var(--fallback-nc,oklch(var(--nc)/1)); --tw-prose-pre-bg: var(--fallback-n,oklch(var(--n)/1)); --tw-prose-th-borders: var(--fallback-bc,oklch(var(--bc)/0.5)); --tw-prose-td-borders: var(--fallback-bc,oklch(var(--bc)/0.2)); --tw-prose-kbd: var(--fallback-bc,oklch(var(--bc)/0.8)); } .hx[client="aci"] .prose :where(code):not(:where([class~="not-prose"] *, pre *)) { padding: 1px 8px; border-radius: var(--rounded-badge); font-weight: initial; background-color: var(--fallback-bc,oklch(var(--bc)/0.1)); } .hx[client="aci"] .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before, .hx[client="aci"] .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after { display: none; } .hx[client="aci"] .prose pre code { border-radius: 0; padding: 0; } .hx[client="aci"] .prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)) { border-bottom-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } .hx[client="aci"] .glass, .hx[client="aci"] .glass.btn-active { border: none; -webkit-backdrop-filter: blur(var(--glass-blur, 40px)); backdrop-filter: blur(var(--glass-blur, 40px)); background-color: transparent; background-image: linear-gradient( 135deg, rgb(255 255 255 / var(--glass-opacity, 30%)) 0%, rgb(0 0 0 / 0%) 100% ), linear-gradient( var(--glass-reflex-degree, 100deg), rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%, rgb(0 0 0 / 0%) 25% ); box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgb(0 0 0 / 5%); text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%)); } @media (hover: hover) { .hx[client="aci"] .glass.btn-active { border: none; -webkit-backdrop-filter: blur(var(--glass-blur, 40px)); backdrop-filter: blur(var(--glass-blur, 40px)); background-color: transparent; background-image: linear-gradient( 135deg, rgb(255 255 255 / var(--glass-opacity, 30%)) 0%, rgb(0 0 0 / 0%) 100% ), linear-gradient( var(--glass-reflex-degree, 100deg), rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%, rgb(0 0 0 / 0%) 25% ); box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgb(0 0 0 / 5%); text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%)); } } .hx[client="aci"] .artboard.phone-1.horizontal, .hx[client="aci"] .artboard.phone-1.artboard-horizontal { width: 568px; height: 320px; } .hx[client="aci"] .artboard.phone-2.horizontal, .hx[client="aci"] .artboard.phone-2.artboard-horizontal { width: 667px; height: 375px; } .hx[client="aci"] .artboard.phone-3.horizontal, .hx[client="aci"] .artboard.phone-3.artboard-horizontal { width: 736px; height: 414px; } .hx[client="aci"] .artboard.phone-4.horizontal, .hx[client="aci"] .artboard.phone-4.artboard-horizontal { width: 812px; height: 375px; } .hx[client="aci"] .artboard.phone-5.horizontal, .hx[client="aci"] .artboard.phone-5.artboard-horizontal { width: 896px; height: 414px; } .hx[client="aci"] .artboard.phone-6.horizontal, .hx[client="aci"] .artboard.phone-6.artboard-horizontal { width: 1024px; height: 320px; } .hx[client="aci"] .btm-nav-xs > *:where(.active) { border-top-width: 1px; } .hx[client="aci"] .btm-nav-sm > *:where(.active) { border-top-width: 2px; } .hx[client="aci"] .btm-nav-md > *:where(.active) { border-top-width: 2px; } .hx[client="aci"] .btm-nav-lg > *:where(.active) { border-top-width: 4px; } .hx[client="aci"] .btn-xs { height: 1.5rem; min-height: 1.5rem; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.75rem; } .hx[client="aci"] .btn-sm { height: 2rem; min-height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.875rem; } .hx[client="aci"] .btn-lg { height: 4rem; min-height: 4rem; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 1.125rem; } .hx[client="aci"] .btn-square:where(.btn-xs) { height: 1.5rem; width: 1.5rem; padding: 0px; } .hx[client="aci"] .btn-square:where(.btn-sm) { height: 2rem; width: 2rem; padding: 0px; } .hx[client="aci"] .btn-square:where(.btn-lg) { height: 4rem; width: 4rem; padding: 0px; } .hx[client="aci"] .btn-circle:where(.btn-xs) { height: 1.5rem; width: 1.5rem; border-radius: 9999px; padding: 0px; } .hx[client="aci"] .btn-circle:where(.btn-sm) { height: 2rem; width: 2rem; border-radius: 9999px; padding: 0px; } .hx[client="aci"] .btn-circle:where(.btn-lg) { height: 4rem; width: 4rem; border-radius: 9999px; padding: 0px; } .hx[client="aci"] .card-side { align-items: stretch; flex-direction: row; } .hx[client="aci"] .card-side :where(figure:first-child) { overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: unset; border-end-start-radius: inherit; border-end-end-radius: unset; } .hx[client="aci"] .card-side :where(figure:last-child) { overflow: hidden; border-start-start-radius: unset; border-start-end-radius: inherit; border-end-start-radius: unset; border-end-end-radius: inherit; } .hx[client="aci"] .card-side figure > * { max-width: unset; } .hx[client="aci"] :where(.card-side figure > *) { width: 100%; height: 100%; object-fit: cover; } .hx[client="aci"] .drawer-open > .drawer-toggle { display: none; } .hx[client="aci"] .drawer-open > .drawer-toggle ~ .drawer-side { pointer-events: auto; visibility: visible; position: sticky; display: block; width: auto; overscroll-behavior: auto; } .hx[client="aci"] .drawer-open > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) { transform: translateX(0%); } .hx[client="aci"] [dir="rtl"] .drawer-open > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) { transform: translateX(0%); } .hx[client="aci"] .drawer-open > .drawer-toggle:checked ~ .drawer-side { pointer-events: auto; visibility: visible; } .hx[client="aci"] .drawer-open > .drawer-side { overflow-y: auto; } .hx[client="aci"]:has(.drawer-toggle:checked) { overflow-y: hidden; scrollbar-gutter: stable; } .hx[client="aci"] .join.join-vertical { flex-direction: column; } .hx[client="aci"] .join.join-vertical .join-item:first-child:not(:last-child), .hx[client="aci"] .join.join-vertical *:first-child:not(:last-child) .join-item { border-end-start-radius: 0; border-end-end-radius: 0; border-start-start-radius: inherit; border-start-end-radius: inherit; } .hx[client="aci"] .join.join-vertical .join-item:last-child:not(:first-child), .hx[client="aci"] .join.join-vertical *:last-child:not(:first-child) .join-item { border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: inherit; border-end-end-radius: inherit; } .hx[client="aci"] .join.join-horizontal { flex-direction: row; } .hx[client="aci"] .join.join-horizontal .join-item:first-child:not(:last-child), .hx[client="aci"] .join.join-horizontal *:first-child:not(:last-child) .join-item { border-end-end-radius: 0; border-start-end-radius: 0; border-end-start-radius: inherit; border-start-start-radius: inherit; } .hx[client="aci"] .join.join-horizontal .join-item:last-child:not(:first-child), .hx[client="aci"] .join.join-horizontal *:last-child:not(:first-child) .join-item { border-end-start-radius: 0; border-start-start-radius: 0; border-end-end-radius: inherit; border-start-end-radius: inherit; } .hx[client="aci"] .menu-horizontal { display: inline-flex; flex-direction: row; } .hx[client="aci"] .menu-horizontal > li:not(.menu-title) > details > ul { position: absolute; } .hx[client="aci"] .modal-middle { place-items: center; } .hx[client="aci"] .modal-bottom { place-items: end; } .hx[client="aci"] .tabs-md :where(.tab) { height: 2rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; --tab-padding: 1rem; } .hx[client="aci"] .tabs-lg :where(.tab) { height: 3rem; font-size: 1.125rem; line-height: 1.75rem; line-height: 2; --tab-padding: 1.25rem; } .hx[client="aci"] .tabs-sm :where(.tab) { height: 1.5rem; font-size: 0.875rem; line-height: .75rem; --tab-padding: 0.75rem; } .hx[client="aci"] .tabs-xs :where(.tab) { height: 1.25rem; font-size: 0.75rem; line-height: .75rem; --tab-padding: 0.5rem; } .hx[client="aci"] .card-compact .card-body { padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .hx[client="aci"] .card-compact .card-title { margin-bottom: 0.25rem; } .hx[client="aci"] .card-normal .card-body { padding: var(--padding-card, 2rem); font-size: 1rem; line-height: 1.5rem; } .hx[client="aci"] .card-normal .card-title { margin-bottom: 0.75rem; } .hx[client="aci"] .drawer-open > .drawer-toggle ~ .drawer-side > .drawer-overlay { cursor: default; background-color: transparent; } .hx[client="aci"] .join.join-vertical > :where(*:not(:first-child)) { margin-left: 0px; margin-right: 0px; margin-top: -1px; } .hx[client="aci"] .join.join-vertical > :where(*:not(:first-child)):is(.btn) { margin-top: calc(var(--border-btn) * -1); } .hx[client="aci"] .join.join-horizontal > :where(*:not(:first-child)) { margin-top: 0px; margin-bottom: 0px; margin-inline-start: -1px; } .hx[client="aci"] .join.join-horizontal > :where(*:not(:first-child)):is(.btn) { margin-inline-start: calc(var(--border-btn) * -1); margin-top: 0px; } .hx[client="aci"] .menu-horizontal > li:not(.menu-title) > details > ul { margin-inline-start: 0px; margin-top: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-inline-end: 0.5rem; } .hx[client="aci"] .menu-horizontal > li > details > ul:before { content: none; } .hx[client="aci"] :where(.menu-horizontal > li:not(.menu-title) > details > ul) { border-radius: var(--rounded-box, 1rem); --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hx[client="aci"] .menu-xs .menu-title { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; } .hx[client="aci"] .menu-sm :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), .hx[client="aci"] .menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) { border-radius: var(--rounded-btn, 0.5rem); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; } .hx[client="aci"] .menu-sm .menu-title { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .hx[client="aci"] .menu-md .menu-title { padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .hx[client="aci"] .menu-lg .menu-title { padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .hx[client="aci"] .modal-top :where(.modal-box) { width: 100%; max-width: none; --tw-translate-y: -2.5rem; --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-bottom-right-radius: var(--rounded-box, 1rem); border-bottom-left-radius: var(--rounded-box, 1rem); border-top-left-radius: 0px; border-top-right-radius: 0px; } .hx[client="aci"] .modal-middle :where(.modal-box) { width: 91.666667%; max-width: 32rem; --tw-translate-y: 0px; --tw-scale-x: .9; --tw-scale-y: .9; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-top-left-radius: var(--rounded-box, 1rem); border-top-right-radius: var(--rounded-box, 1rem); border-bottom-right-radius: var(--rounded-box, 1rem); border-bottom-left-radius: var(--rounded-box, 1rem); } .hx[client="aci"] .modal-bottom :where(.modal-box) { width: 100%; max-width: none; --tw-translate-y: 2.5rem; --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-top-left-radius: var(--rounded-box, 1rem); border-top-right-radius: var(--rounded-box, 1rem); border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .hx[client="aci"] .table-xs :not(thead):not(tfoot) tr { font-size: 0.75rem; line-height: 1rem; } .hx[client="aci"] .table-xs :where(th, td) { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; } /* Smaller indentation for submenus */ .hx[client="aci"] .menu :where(li ul) { margin-left: 16px; padding-left: 0px; } /* Some weird height fix for the indentation line */ .hx[client="aci"] .menu :where(li ul):before { top: 0.5em; bottom: 0.5em; } /* Menu item customization to support (WIP) and (MVP) tags */ .hx[client="aci"] .menu a { display: flex; justify-content: space-between; } .hx[client="aci"] .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .hx[client="aci"] .\!pointer-events-none { pointer-events: none !important; } .hx[client="aci"] .pointer-events-none { pointer-events: none; } .hx[client="aci"] .visible { visibility: visible; } .hx[client="aci"] .collapse { visibility: collapse; } .hx[client="aci"] .static { position: static; } .hx[client="aci"] .\!fixed { position: fixed !important; } .hx[client="aci"] .fixed { position: fixed; } .hx[client="aci"] .\!absolute { position: absolute !important; } .hx[client="aci"] .absolute { position: absolute; } .hx[client="aci"] .relative { position: relative; } .hx[client="aci"] .sticky { position: sticky; } .hx[client="aci"] .bottom-0 { bottom: 0px; } .hx[client="aci"] .bottom-\[0\.5em\] { bottom: 0.5em; } .hx[client="aci"] .left-0 { left: 0px; } .hx[client="aci"] .left-1\/2 { left: 50%; } .hx[client="aci"] .right-0 { right: 0px; } .hx[client="aci"] .right-4 { right: 8px; } .hx[client="aci"] .top-0 { top: 0px; } .hx[client="aci"] .top-1\/2 { top: 50%; } .hx[client="aci"] .top-4 { top: 8px; } .hx[client="aci"] .top-\[0\.5em\] { top: 0.5em; } .hx[client="aci"] .top-\[var\(--header-height\)\] { top: var(--header-height); } .hx[client="aci"] .z-1 { z-index: 1; } .hx[client="aci"] .z-10 { z-index: 10; } .hx[client="aci"] .col-span-1 { grid-column: span 1 / span 1; } .hx[client="aci"] .col-span-10 { grid-column: span 10 / span 10; } .hx[client="aci"] .col-span-11 { grid-column: span 11 / span 11; } .hx[client="aci"] .col-span-12 { grid-column: span 12 / span 12; } .hx[client="aci"] .col-span-2 { grid-column: span 2 / span 2; } .hx[client="aci"] .col-span-3 { grid-column: span 3 / span 3; } .hx[client="aci"] .col-span-4 { grid-column: span 4 / span 4; } .hx[client="aci"] .col-span-5 { grid-column: span 5 / span 5; } .hx[client="aci"] .col-span-6 { grid-column: span 6 / span 6; } .hx[client="aci"] .col-span-7 { grid-column: span 7 / span 7; } .hx[client="aci"] .col-span-8 { grid-column: span 8 / span 8; } .hx[client="aci"] .col-span-9 { grid-column: span 9 / span 9; } .hx[client="aci"] .col-span-full { grid-column: 1 / -1; } .hx[client="aci"] .col-start-1 { grid-column-start: 1; } .hx[client="aci"] .col-start-2 { grid-column-start: 2; } .hx[client="aci"] .col-end-2 { grid-column-end: 2; } .hx[client="aci"] .col-end-3 { grid-column-end: 3; } .hx[client="aci"] .row-start-1 { grid-row-start: 1; } .hx[client="aci"] .row-start-2 { grid-row-start: 2; } .hx[client="aci"] .row-end-2 { grid-row-end: 2; } .hx[client="aci"] .row-end-3 { grid-row-end: 3; } .hx[client="aci"] .m-0 { margin: 0px; } .hx[client="aci"] .-my-3 { margin-top: -4px; margin-bottom: -4px; } .hx[client="aci"] .mx-auto { margin-left: auto; margin-right: auto; } .hx[client="aci"] .my-4 { margin-top: 8px; margin-bottom: 8px; } .hx[client="aci"] .my-8 { margin-top: 24px; margin-bottom: 24px; } .hx[client="aci"] .-mb-4 { margin-bottom: -8px; } .hx[client="aci"] .-mb-\[1px\] { margin-bottom: -1px; } .hx[client="aci"] .-ml-\[\.75em\] { margin-left: -.75em; } .hx[client="aci"] .-ml-\[1px\] { margin-left: -1px; } .hx[client="aci"] .-mr-\[1px\] { margin-right: -1px; } .hx[client="aci"] .mb-1 { margin-bottom: 1px; } .hx[client="aci"] .mb-2 { margin-bottom: 2px; } .hx[client="aci"] .mb-4 { margin-bottom: 8px; } .hx[client="aci"] .mb-8 { margin-bottom: 24px; } .hx[client="aci"] .mb-\[\.25em\] { margin-bottom: .25em; } .hx[client="aci"] .mb-content { margin-bottom: clamp(16px,calc(.75vw + 1vh),20px); } .hx[client="aci"] .ml-6 { margin-left: 16px; } .hx[client="aci"] .ml-\[0\.2em\] { margin-left: 0.2em; } .hx[client="aci"] .mr-3 { margin-right: 4px; } .hx[client="aci"] .mr-content { margin-right: clamp(16px,calc(.75vw + 1vh),20px); } .hx[client="aci"] .mt-1 { margin-top: 1px; } .hx[client="aci"] .mt-10 { margin-top: 48px; } .hx[client="aci"] .mt-11 { margin-top: 72px; } .hx[client="aci"] .mt-\[0\.25em\] { margin-top: 0.25em; } .hx[client="aci"] .mt-outer { margin-top: clamp(32px,calc(1.5vw + 3.8vh),65px); } .hx[client="aci"] .block { display: block; } .hx[client="aci"] .inline-block { display: inline-block; } .hx[client="aci"] .inline { display: inline; } .hx[client="aci"] .flex { display: flex; } .hx[client="aci"] .table { display: table; } .hx[client="aci"] .grid { display: grid; } .hx[client="aci"] .\!hidden { display: none !important; } .hx[client="aci"] .hidden { display: none; } .hx[client="aci"] .aspect-1-1 { aspect-ratio: 1 / 1; } .hx[client="aci"] .aspect-16\/9 { aspect-ratio: 16 / 9; } .hx[client="aci"] .aspect-2\/3 { aspect-ratio: 2 / 3; } .hx[client="aci"] .aspect-21\/9 { aspect-ratio: 21 / 9; } .hx[client="aci"] .aspect-3\/2 { aspect-ratio: 3 / 2; } .hx[client="aci"] .aspect-3\/4 { aspect-ratio: 3 / 4; } .hx[client="aci"] .aspect-4\/3 { aspect-ratio: 4 / 3; } .hx[client="aci"] .aspect-9\/16 { aspect-ratio: 9 / 16; } .hx[client="aci"] .aspect-9\/21 { aspect-ratio: 9 / 21; } .hx[client="aci"] .aspect-\[1\/1\] { aspect-ratio: 1/1; } .hx[client="aci"] .aspect-\[1\/2\] { aspect-ratio: 1/2; } .hx[client="aci"] .aspect-\[10\/16\] { aspect-ratio: 10/16; } .hx[client="aci"] .aspect-\[16\/10\] { aspect-ratio: 16/10; } .hx[client="aci"] .aspect-\[16\/9\] { aspect-ratio: 16/9; } .hx[client="aci"] .aspect-\[2\/1\] { aspect-ratio: 2/1; } .hx[client="aci"] .aspect-\[3\/4\] { aspect-ratio: 3/4; } .hx[client="aci"] .aspect-\[4\/3\] { aspect-ratio: 4/3; } .hx[client="aci"] .aspect-\[9\/16\] { aspect-ratio: 9/16; } .hx[client="aci"] .aspect-auto { aspect-ratio: auto; } .hx[client="aci"] .aspect-square { aspect-ratio: 1 / 1; } .hx[client="aci"] .aspect-video { aspect-ratio: 16 / 9; } .hx[client="aci"] .aspect-x1 { aspect-ratio: 3 / 2; } .hx[client="aci"] .aspect-x2 { aspect-ratio: 2 / 1; } .hx[client="aci"] .aspect-x3 { aspect-ratio: 3 / 1; } .hx[client="aci"] .aspect-x4 { aspect-ratio: 4 / 1; } .hx[client="aci"] .aspect-x5 { aspect-ratio: 5 / 1; } .hx[client="aci"] .aspect-y1 { aspect-ratio: 2 / 3; } .hx[client="aci"] .aspect-y2 { aspect-ratio: 1 / 2; } .hx[client="aci"] .aspect-y3 { aspect-ratio: 1 / 3; } .hx[client="aci"] .aspect-y4 { aspect-ratio: 1 / 4; } .hx[client="aci"] .aspect-y5 { aspect-ratio: 1 / 5; } .hx[client="aci"] .h-10 { height: 48px; } .hx[client="aci"] .h-12 { height: 100px; } .hx[client="aci"] .h-\[1\.5em\] { height: 1.5em; } .hx[client="aci"] .h-\[3px\] { height: 3px; } .hx[client="aci"] .h-\[44px\] { height: 44px; } .hx[client="aci"] .h-\[var\(--thumb-size\)\] { height: var(--thumb-size); } .hx[client="aci"] .h-auto { height: auto; } .hx[client="aci"] .h-full { height: 100%; } .hx[client="aci"] .h-screen { height: 100vh; } .hx[client="aci"] .max-h-\[400px\] { max-height: 400px; } .hx[client="aci"] .max-h-full { max-height: 100%; } .hx[client="aci"] .min-h-\[40px\] { min-height: 40px; } .hx[client="aci"] .min-h-\[var\(--header-height\)\] { min-height: var(--header-height); } .hx[client="aci"] .w-10 { width: 48px; } .hx[client="aci"] .w-11\/12 { width: 91.666667%; } .hx[client="aci"] .w-\[1\.5em\] { width: 1.5em; } .hx[client="aci"] .w-\[1\.75em\] { width: 1.75em; } .hx[client="aci"] .w-\[20\%\] { width: 20%; } .hx[client="aci"] .w-\[var\(--thumb-size\)\] { width: var(--thumb-size); } .hx[client="aci"] .w-auto { width: auto; } .hx[client="aci"] .w-full { width: 100%; } .hx[client="aci"] .min-w-0 { min-width: 0px; } .hx[client="aci"] .min-w-\[100px\] { min-width: 100px; } .hx[client="aci"] .min-w-\[200px\] { min-width: 200px; } .hx[client="aci"] .min-w-\[280px\] { min-width: 280px; } .hx[client="aci"] .min-w-\[50px\] { min-width: 50px; } .hx[client="aci"] .\!max-w-\[250px\] { max-width: 250px !important; } .hx[client="aci"] .max-w-\[1023px\] { max-width: 1023px; } .hx[client="aci"] .max-w-\[1280px\] { max-width: 1280px; } .hx[client="aci"] .max-w-\[24rem\] { max-width: 24rem; } .hx[client="aci"] .max-w-\[32rem\] { max-width: 32rem; } .hx[client="aci"] .max-w-\[42rem\] { max-width: 42rem; } .hx[client="aci"] .max-w-\[479px\] { max-width: 479px; } .hx[client="aci"] .max-w-\[500px\] { max-width: 500px; } .hx[client="aci"] .max-w-\[600px\] { max-width: 600px; } .hx[client="aci"] .max-w-\[64rem\] { max-width: 64rem; } .hx[client="aci"] .max-w-\[92ch\] { max-width: 92ch; } .hx[client="aci"] .max-w-\[min\(220px\2c 80vw\)\] { max-width: min(220px,80vw); } .hx[client="aci"] .max-w-full { max-width: 100%; } .hx[client="aci"] .max-w-none { max-width: none; } .hx[client="aci"] .max-w-sm { max-width: 24rem; } .hx[client="aci"] .max-w-xs { max-width: 20rem; } .hx[client="aci"] .flex-1 { flex: 1 1 0%; } .hx[client="aci"] .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hx[client="aci"] .-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hx[client="aci"] .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hx[client="aci"] .cursor-pointer { cursor: pointer; } .hx[client="aci"] .touch-none { touch-action: none; } .hx[client="aci"] .select-none { -webkit-user-select: none; user-select: none; } .hx[client="aci"] .resize { resize: both; } .hx[client="aci"] .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } .hx[client="aci"] .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } .hx[client="aci"] .scroll-px-\[var\(--edge-spacing\)\] { scroll-padding-left: var(--edge-spacing); scroll-padding-right: var(--edge-spacing); } .hx[client="aci"] .grid-flow-row { grid-auto-flow: row; } .hx[client="aci"] .auto-rows-auto { grid-auto-rows: auto; } .hx[client="aci"] .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .hx[client="aci"] .grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; } .hx[client="aci"] .grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; } .hx[client="aci"] .grid-cols-none { grid-template-columns: none; } .hx[client="aci"] .grid-cols-subgrid { grid-template-columns: subgrid; } .hx[client="aci"] .grid-rows-\[auto_1fr\] { grid-template-rows: auto 1fr; } .hx[client="aci"] .flex-row { flex-direction: row; } .hx[client="aci"] .flex-row-reverse { flex-direction: row-reverse; } .hx[client="aci"] .flex-col { flex-direction: column; } .hx[client="aci"] .flex-wrap { flex-wrap: wrap; } .hx[client="aci"] .flex-nowrap { flex-wrap: nowrap; } .hx[client="aci"] .items-start { align-items: flex-start; } .hx[client="aci"] .items-center { align-items: center; } .hx[client="aci"] .items-baseline { align-items: baseline; } .hx[client="aci"] .items-stretch { align-items: stretch; } .hx[client="aci"] .justify-start { justify-content: flex-start; } .hx[client="aci"] .justify-end { justify-content: flex-end; } .hx[client="aci"] .justify-center { justify-content: center; } .hx[client="aci"] .justify-between { justify-content: space-between; } .hx[client="aci"] .gap-1 { gap: 1px; } .hx[client="aci"] .gap-2 { gap: 2px; } .hx[client="aci"] .gap-3 { gap: 4px; } .hx[client="aci"] .gap-4 { gap: 8px; } .hx[client="aci"] .gap-6 { gap: 16px; } .hx[client="aci"] .gap-\[\.5em\] { gap: .5em; } .hx[client="aci"] .gap-\[0\.2em\] { gap: 0.2em; } .hx[client="aci"] .gap-\[0\.5em\] { gap: 0.5em; } .hx[client="aci"] .gap-\[2px\] { gap: 2px; } .hx[client="aci"] .gap-\[var\(--gap\)\] { gap: var(--gap); } .hx[client="aci"] .gap-content { gap: clamp(16px,calc(.75vw + 1vh),20px); } .hx[client="aci"] .gap-inner { gap: clamp(26px,calc(1vw + 1.5vh),46px); } .hx[client="aci"] .gap-x-5 { column-gap: 12px; } .hx[client="aci"] .gap-y-5 { row-gap: 12px; } .hx[client="aci"] .place-self-center { place-self: center; } .hx[client="aci"] .overflow-hidden { overflow: hidden; } .hx[client="aci"] .overflow-clip { overflow: clip; } .hx[client="aci"] .overflow-x-auto { overflow-x: auto; } .hx[client="aci"] .overflow-y-auto { overflow-y: auto; } .hx[client="aci"] .overscroll-x-contain { overscroll-behavior-x: contain; } .hx[client="aci"] .text-ellipsis { text-overflow: ellipsis; } .hx[client="aci"] .whitespace-nowrap { white-space: nowrap; } .hx[client="aci"] .rounded-box { border-radius: var(--rounded-box, 1rem); } .hx[client="aci"] .rounded-full { border-radius: 9999px; } .hx[client="aci"] .rounded-lg { border-radius: 0.5rem; } .hx[client="aci"] .rounded-md { border-radius: 0.375rem; } .hx[client="aci"] .rounded-none { border-radius: 0px; } .hx[client="aci"] .rounded-b-md { border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } .hx[client="aci"] .rounded-l-md { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } .hx[client="aci"] .rounded-l-none { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .hx[client="aci"] .rounded-r-\[inherit\] { border-top-right-radius: inherit; border-bottom-right-radius: inherit; } .hx[client="aci"] .rounded-r-md { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } .hx[client="aci"] .rounded-t-md { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; } .hx[client="aci"] .border { border-width: 1px; } .hx[client="aci"] .border-b { border-bottom-width: 1px; } .hx[client="aci"] .border-b-2 { border-bottom-width: 2px; } .hx[client="aci"] .border-l { border-left-width: 1px; } .hx[client="aci"] .border-l-2 { border-left-width: 2px; } .hx[client="aci"] .border-r { border-right-width: 1px; } .hx[client="aci"] .border-r-2 { border-right-width: 2px; } .border-\[var\(--hx-color-b\)\] { border-color: var(--hx-color-b); } .hx[client="aci"] .border-neutral-200 { --tw-border-opacity: 1; border-color: rgb(229 229 229 / var(--tw-border-opacity, 1)); } .hx[client="aci"] .border-secondary-300 { --tw-border-opacity: 1; border-color: rgb(120 190 237 / var(--tw-border-opacity, 1)); } .hx[client="aci"] .border-slate-300 { --tw-border-opacity: 1; border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); } .hx[client="aci"] .\!bg-transparent { background-color: transparent !important; } .hx[client="aci"] .bg-\[\#22272e\] { --tw-bg-opacity: 1; background-color: rgb(34 39 46 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-\[\#F2F3F7\] { --tw-bg-opacity: 1; background-color: rgb(242 243 247 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-\[\#F2F3F7\]\/60 { background-color: rgb(242 243 247 / 0.6); } .hx[client="aci"] .bg-\[gray\] { --tw-bg-opacity: 1; background-color: rgb(128 128 128 / var(--tw-bg-opacity, 1)); } .bg-\[var\(--hx-color-bg\)\] { background-color: var(--hx-color-bg); } .bg-\[var\(--hx-color-bg-active\)\] { background-color: var(--hx-color-bg-active); } .hx[client="aci"] .bg-base-200\/80 { background-color: var(--fallback-b2,oklch(var(--b2)/0.8)); } .hx[client="aci"] .bg-black\/10 { background-color: rgb(0 0 0 / 0.1); } .hx[client="aci"] .bg-black\/35 { background-color: rgb(0 0 0 / 0.35); } .hx[client="aci"] .bg-black\/50 { background-color: rgb(0 0 0 / 0.5); } .hx[client="aci"] .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-green-100 { --tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-neutral-600 { --tw-bg-opacity: 1; background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-pink-50 { --tw-bg-opacity: 1; background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-red-200 { --tw-bg-opacity: 1; background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-red-300 { --tw-bg-opacity: 1; background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-secondary-100 { --tw-bg-opacity: 1; background-color: rgb(227 239 251 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-secondary-50 { --tw-bg-opacity: 1; background-color: rgb(242 245 248 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-transparent { background-color: transparent; } .hx[client="aci"] .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .bg-white\/60 { background-color: rgb(255 255 255 / 0.6); } .hx[client="aci"] .object-cover { object-fit: cover; } .hx[client="aci"] .p-0 { padding: 0px; } .hx[client="aci"] .p-3 { padding: 4px; } .hx[client="aci"] .p-4 { padding: 8px; } .hx[client="aci"] .p-8 { padding: 24px; } .hx[client="aci"] .p-\[1\.5rem\] { padding: 1.5rem; } .hx[client="aci"] .p-\[1em\] { padding: 1em; } .hx[client="aci"] .p-\[2px\] { padding: 2px; } .hx[client="aci"] .px-0 { padding-left: 0px; padding-right: 0px; } .hx[client="aci"] .px-10 { padding-left: 48px; padding-right: 48px; } .hx[client="aci"] .px-11 { padding-left: 72px; padding-right: 72px; } .hx[client="aci"] .px-4 { padding-left: 8px; padding-right: 8px; } .hx[client="aci"] .px-5 { padding-left: 12px; padding-right: 12px; } .hx[client="aci"] .px-6 { padding-left: 16px; padding-right: 16px; } .hx[client="aci"] .px-\[0\.5em\] { padding-left: 0.5em; padding-right: 0.5em; } .hx[client="aci"] .px-\[0\.75em\] { padding-left: 0.75em; padding-right: 0.75em; } .hx[client="aci"] .py-3 { padding-top: 4px; padding-bottom: 4px; } .hx[client="aci"] .py-\[0\.5em\] { padding-top: 0.5em; padding-bottom: 0.5em; } .hx[client="aci"] .py-\[2px\] { padding-top: 2px; padding-bottom: 2px; } .hx[client="aci"] .pb-\[10vh\] { padding-bottom: 10vh; } .hx[client="aci"] .pb-\[calc\(var\(--thumb-size\)_\+_1px\)\] { padding-bottom: calc(var(--thumb-size) + 1px); } .hx[client="aci"] .pl-\[calc\(var\(--thumb-size\)_\+_1px\)\] { padding-left: calc(var(--thumb-size) + 1px); } .hx[client="aci"] .pr-\[calc\(var\(--thumb-size\)_\+_1px\)\] { padding-right: calc(var(--thumb-size) + 1px); } .hx[client="aci"] .ps-0 { padding-inline-start: 0px; } .hx[client="aci"] .pt-\[calc\(var\(--thumb-size\)_\+_1px\)\] { padding-top: calc(var(--thumb-size) + 1px); } .hx[client="aci"] .text-left { text-align: left; } .hx[client="aci"] .align-\[\.08em\] { vertical-align: .08em; } .hx[client="aci"] .font-mono { font-family: SF Mono, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; } .hx[client="aci"] .text-\[0\.8em\] { font-size: 0.8em; } .hx[client="aci"] .text-\[0\.95em\] { font-size: 0.95em; } .hx[client="aci"] .text-\[1\.2rem\] { font-size: 1.2rem; } .hx[client="aci"] .text-\[2rem\] { font-size: 2rem; } .hx[client="aci"] .text-\[length\:inherit\] { font-size: inherit; } .hx[client="aci"] .text-h4 { font-size: clamp(1.375rem, 1.266rem + 0.484vw, 1.75rem); line-height: 1.2; font-weight: 600; } .hx[client="aci"] .text-h6 { font-size: clamp(1.0625rem, 1.026rem + 0.161vw, 1.1875rem); line-height: 1.35; font-weight: 600; } .hx[client="aci"] .text-small { font-size: clamp(0.875rem, 0.857rem + 0.081vw, 0.9375rem); line-height: 1.2; } .hx[client="aci"] .font-bold { font-weight: 700; } .hx[client="aci"] .font-medium { font-weight: 500; } .hx[client="aci"] .font-normal { font-weight: 400; } .hx[client="aci"] .font-semibold { font-weight: 600; } .text-\[var\(--hx-color-fg\)\] { color: var(--hx-color-fg); } .hx[client="aci"] .text-blue-500 { --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity, 1)); } .hx[client="aci"] .text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); } .hx[client="aci"] .text-neutral-300 { --tw-text-opacity: 1; color: rgb(212 212 212 / var(--tw-text-opacity, 1)); } .hx[client="aci"] .text-neutral-700 { --tw-text-opacity: 1; color: rgb(64 64 64 / var(--tw-text-opacity, 1)); } .hx[client="aci"] .text-pink-700 { --tw-text-opacity: 1; color: rgb(190 24 93 / var(--tw-text-opacity, 1)); } .hx[client="aci"] .text-red-500 { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .hx[client="aci"] .text-secondary-950 { --tw-text-opacity: 1; color: rgb(26 42 71 / var(--tw-text-opacity, 1)); } .hx[client="aci"] .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .hx[client="aci"] .no-underline { text-decoration-line: none; } .hx[client="aci"] .\!opacity-0 { opacity: 0 !important; } .hx[client="aci"] .opacity-0 { opacity: 0; } .hx[client="aci"] .opacity-25 { opacity: 0.25; } .hx[client="aci"] .opacity-50 { opacity: 0.5; } .hx[client="aci"] .shadow-1 { --tw-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px -1px rgba(0, 0, 0, 0.08); --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color), 0px 1px 1px 0px var(--tw-shadow-color), 0px 2px 1px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hx[client="aci"] .shadow-2 { --tw-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 2px 1px -1px rgba(0, 0, 0, 0.1); --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color), 0px 1px 1px 0px var(--tw-shadow-color), 0px 2px 1px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hx[client="aci"] .shadow-4 { --tw-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.06), 0px 3px 4px 0px rgba(0, 0, 0, 0.08), 0px 3px 3px -2px rgba(0, 0, 0, 0.1); --tw-shadow-colored: 0px 1px 8px 0px var(--tw-shadow-color), 0px 3px 4px 0px var(--tw-shadow-color), 0px 3px 3px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hx[client="aci"] .shadow-6 { --tw-shadow: 0px 2px 16px 1px rgba(0, 0, 0, 0.06), 0px 7px 10px 1px rgba(0, 0, 0, 0.08), 0px 4px 5px -2px rgba(0, 0, 0, 0.1); --tw-shadow-colored: 0px 2px 16px 1px var(--tw-shadow-color), 0px 7px 10px 1px var(--tw-shadow-color), 0px 4px 5px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hx[client="aci"] .shadow-\[0_1px_1px_0_rgba\(0\2c 0\2c 0\2c 0\.2\)\] { --tw-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); --tw-shadow-colored: 0 1px 1px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hx[client="aci"] .shadow-none { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hx[client="aci"] .outline { outline-style: solid; } .hx[client="aci"] .ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .hx[client="aci"] .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .hx[client="aci"] .backdrop-blur-lg { --tw-backdrop-blur: blur(16px); -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); } .hx[client="aci"] .backdrop-blur-xl { --tw-backdrop-blur: blur(24px); -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); } .hx[client="aci"] .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .hx[client="aci"] .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .hx[client="aci"] .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .hx[client="aci"] .\!duration-300 { transition-duration: 300ms !important; } .hx[client="aci"] .duration-500 { transition-duration: 500ms; } .hx[client="aci"] .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .hx[client="aci"] .text-small.vtrim:before { display: block; margin-top: -0.2em; content: ""; } .hx[client="aci"] .text-small.vtrim:after { display: block; margin-bottom: -0.2em; content: ""; } .hx[client="aci"] .text-h6.vtrim:before { display: block; margin-top: -0.27em; content: ""; } .hx[client="aci"] .text-h6.vtrim:after { display: block; margin-bottom: -0.27em; content: ""; } .hx[client="aci"] .text-h4.vtrim:before { display: block; margin-top: -0.2em; content: ""; } .hx[client="aci"] .text-h4.vtrim:after { display: block; margin-bottom: -0.2em; content: ""; } .hx[client="aci"] .lh-7 { line-height: 1.45; } .hx[client="aci"] .lh-7.vtrim {} .hx[client="aci"] .lh-7.vtrim:before { display: block; margin-top: -0.32em; content: ""; } .hx[client="aci"] .lh-7.vtrim:after { display: block; margin-bottom: -0.32em; content: ""; } .hx[client="aci"] .\@container { container-type: inline-size; } .hx[client="aci"] .\@container\/field { container-type: inline-size; container-name: field; } /* -------------------------------------------------------------------------- BUTTONS -------------------------------------------------------------------------- */ .hx[client="aci"] { --rounded-btn: 0.25rem; } .hx[client="aci"] .btn { font-size: 1rem; } /* -------------------------------------------------------------------------- ACCORDION -------------------------------------------------------------------------- */ /* */ .hx[client="aci"] .collapse > input { appearance: none; opacity: 0; } /* -------------------------------------------------------------------------- DROPDOWNS -------------------------------------------------------------------------- */ /**/ .hx[client="aci"] .dropdown .dropdown-content { /**/ } /**/ .hx[client="aci"] .dropdown.dropdown-open .dropdown-content, .hx[client="aci"] .dropdown:not(.dropdown-hover):focus .dropdown-content, .hx[client="aci"] .dropdown:focus-within .dropdown-content { /**/ } /* DISPLAY: NONE VARIANT */ .hx[client="aci"] .dropdown.-lazy .dropdown-content { display: none; } .hx[client="aci"] .dropdown.-lazy.dropdown-open .dropdown-content, .hx[client="aci"] .dropdown.-lazy:not(.dropdown-hover):focus .dropdown-content, .hx[client="aci"] .dropdown.-lazy:focus-within .dropdown-content { display: block; } /* -------------------------------------------------------------------------- FORMS -------------------------------------------------------------------------- */ .hx[client="aci"] .input, .hx[client="aci"] .select { --input-height: auto; height: var(--input-height); min-height: var(--input-height); } .hx[client="aci"] .label-text { font-weight: 600; } .hx[client="aci"] choice-expanded .label-text { font-weight: 400; } /* tom-select style adjustments */ .hx[client="aci"] .ts-wrapper.select { display: flex; padding: 0; height: auto; } .hx[client="aci"] .ts-wrapper.select .ts-control { padding-right: 1.65rem; /* to offset the arrow icon */ background: none; box-shadow: none; border: 0; } .hx[client="aci"] .ts-wrapper.select .ts-control input { } /* -------------------------------------------------------------------------- TABLES -------------------------------------------------------------------------- */ .hx[client="aci"] .table { width: auto; } .hx[client="aci"] .table, .hx[client="aci"] .table th, .hx[client="aci"] .table td { font-size: 0.96rem; line-height: 1.3; } .hx[client="aci"] .table.sm, .hx[client="aci"] .table.sm th, .hx[client="aci"] .table.sm td { font-size: 0.945rem; line-height: 1.2; } .hx[client="aci"] .table.xs, .hx[client="aci"] .table.xs th, .hx[client="aci"] .table.xs td { font-size: 0.92rem; line-height: 1.1; } .hx[client="aci"] .prop-tables .table thead th:nth-child(1) { min-width: 130px; } .hx[client="aci"] .prop-tables .table thead th:nth-child(2) { min-width: 100px; } .hx[client="aci"] .prop-tables .table thead th:nth-child(3) { min-width: 100px; } /* Block & Attribute Outlines */ .hx[client="aci"] .prop-tables > pre { display: block; width: auto; min-width: 280px; max-width: 500px; } .hx[client="aci"] .prose { max-width: none; --tw-text-opacity: 1; color: rgb(64 64 64 / var(--tw-text-opacity, 1)); line-height: 1.45; } .hx[client="aci"] .prose.vtrim {} .hx[client="aci"] .prose.vtrim:before { display: block; margin-top: -0.32em; content: ""; } .hx[client="aci"] .prose.vtrim:after { display: block; margin-bottom: -0.32em; content: ""; } /* Limits the width of certain elements */ .hx[client="aci"] .prose :where(p, h1, h2, h3, h4, h5, h6, ul, ol) { max-width: 92ch; } /* Reduces the heading bottom margin */ .hx[client="aci"] .prose :where(h1,h2,h3,h4,h5,h6) { margin-bottom: .25em; } /* Reduces the heading top margin */ .hx[client="aci"] .prose :where(h1,h2,h3,h4,h5,h6):not(:first-child) { margin-top: 24px; } /* -------------------------------------------------------------------------- HEADINGS -------------------------------------------------------------------------- */ .hx[client="aci"] .prose h1 { font-size: clamp(1.75rem, 1.532rem + 0.968vw, 2.5rem); line-height: 1.1; font-weight: 700; } .hx[client="aci"] .prose h1.vtrim:before { display: block; margin-top: -0.15em; content: ""; } .hx[client="aci"] .prose h1.vtrim:after { display: block; margin-bottom: -0.15em; content: ""; } .hx[client="aci"] .prose h1 { /*& + h2 { @apply mt-4; }*/ } .hx[client="aci"] .prose h2 { font-size: clamp(1.5rem, 1.355rem + 0.645vw, 2rem); line-height: 1.2; font-weight: 700; } .hx[client="aci"] .prose h2.vtrim:before { display: block; margin-top: -0.2em; content: ""; } .hx[client="aci"] .prose h2.vtrim:after { display: block; margin-bottom: -0.2em; content: ""; } .hx[client="aci"] .prose h2 { /*& + h3 { @apply mt-4; }*/ } .hx[client="aci"] .prose h3 { font-size: clamp(1.375rem, 1.266rem + 0.484vw, 1.75rem); line-height: 1.2; font-weight: 600; } .hx[client="aci"] .prose h3.vtrim:before { display: block; margin-top: -0.2em; content: ""; } .hx[client="aci"] .prose h3.vtrim:after { display: block; margin-bottom: -0.2em; content: ""; } .hx[client="aci"] .prose h3 { /*& + h4 { @apply mt-2; }*/ } .hx[client="aci"] .prose h4 { font-size: clamp(1.25rem, 1.177rem + 0.323vw, 1.5rem); line-height: 1.35; font-weight: 600; } .hx[client="aci"] .prose h4.vtrim:before { display: block; margin-top: -0.27em; content: ""; } .hx[client="aci"] .prose h4.vtrim:after { display: block; margin-bottom: -0.27em; content: ""; } .hx[client="aci"] .prose h4 { /*& + h5 { @apply mt-2; }*/ } .hx[client="aci"] .prose h5 { font-size: clamp(1.0625rem, 1.026rem + 0.161vw, 1.1875rem); line-height: 1.35; font-weight: 600; } .hx[client="aci"] .prose h5.vtrim:before { display: block; margin-top: -0.27em; content: ""; } .hx[client="aci"] .prose h5.vtrim:after { display: block; margin-bottom: -0.27em; content: ""; } .hx[client="aci"] .prose h5 { /*& + h6 { @apply mt-2; }*/ } /* -------------------------------------------------------------------------- TABLES -------------------------------------------------------------------------- */ .hx[client="aci"] .prose table { margin-top: 0px; margin-bottom: 0px; } .hx[client="aci"] .prose table thead { border-bottom-width: 2px; --tw-border-opacity: 1; border-color: rgb(64 64 64 / var(--tw-border-opacity, 1)); --tw-text-opacity: 1; color: rgb(64 64 64 / var(--tw-text-opacity, 1)); } /* First and last columns have (almost) no edge padding */ .hx[client="aci"] .prose table th:first-child, .hx[client="aci"] .prose table td:first-child { padding-left: 2px; } .hx[client="aci"] .prose table th:last-child, .hx[client="aci"] .prose table td:last-child { padding-right: 2px; } /* -------------------------------------------------------------------------- INLINE STYLES -------------------------------------------------------------------------- */ .hx[client="aci"] .prose code { border-radius: 0.75rem; --tw-bg-opacity: 1; background-color: rgb(253 242 248 / var(--tw-bg-opacity, 1)); padding-top: 2px; padding-bottom: 2px; font-size: 0.95em; --tw-text-opacity: 1; color: rgb(190 24 93 / var(--tw-text-opacity, 1)); } /* */ /* */ .hx-breadcrumbs > ol > li { /* Hide the breadcrumb items by default, because specific rules are implemented for showing them */ display: none !important; } /* Default icon size */ .hx-breadcrumbs > ol > li > svg, .hx-breadcrumbs > ol > li > a > svg { height: 1.1em; width: 1.1em; } /* Dots icon should be smaller */ .hx-breadcrumbs > ol > li .hx-breadcrumbs-dots-icon { height: 1em; width: 1em; } /* Normalizing flex layout with DaisyUI v5 */ .hx-breadcrumbs > ol > li > a { display: flex; gap: 0.25em; } /* Separator styles */ .hx-breadcrumbs > ol > li + li::before { margin-left: 0.4em !important; margin-right: 0.4em !important; height: auto !important; width: auto !important; transform: none !important; border-width: 0px !important; --tw-content: var(--separator) !important; content: var(--tw-content) !important; } /* Hide the "Home" text, unless it's the only item */ .hx-breadcrumbs > ol:has(>li:nth-child(2)) > li:first-child span { display: none !important; } /* -------------------------------------------------------------------------- TINY CONTAINER -------------------------------------------------------------------------- */ /* @container (max-width: 460px) { .hx-breadcrumbs > ol:has(>li:nth-child(3)) { > li:first-child { background: red; } } } */ /* -------------------------------------------------------------------------- PHONE-LIKE CONTAINER -------------------------------------------------------------------------- */ @container (min-width: 360px) and (max-width: 479px) { .hx-breadcrumbs > ol:has(>li:nth-child(3)) { /* Show the "dots" icon if it has 3 or more items */ /* > li:first-child .hx-breadcrumbs-dots-icon { @apply !inline-block; } */ /* Hides the icon of the first item that comes after the dots */ /* > li:last-child::before { @apply !hidden; } > li:last-child { @apply !ml-4; } */ } } /* Hide the "Home" item on mobile, unless it's the only item */ @container (max-width: 479px) { .hx-breadcrumbs > ol:has(>li:nth-child(2)) > li:first-child { display: none !important; } } /* -------------------------------------------------------------------------- TABLET-LIKE CONTAINER -------------------------------------------------------------------------- */ @container (min-width: 480px) { /* Show the third from last item */ .hx-breadcrumbs > ol > li:nth-last-child(2) { display: flex !important; } } @container (min-width: 480px) and (max-width: 1023px) { /* Show the "dots" icon if it has 4 or more items */ .hx-breadcrumbs > ol:has(>li:nth-child(4)) > li:first-child .hx-breadcrumbs-dots-icon { display: inline-block !important; } /* Hides the icon of the first item that comes after the dots */ .hx-breadcrumbs > ol:has(>li:nth-child(10)) > li:nth-child(9) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(10)) > li:nth-child(9)::before { display: none !important; } .hx-breadcrumbs > ol:has(>li:nth-child(9)) > li:nth-child(8) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(9)) > li:nth-child(8)::before { display: none !important; } .hx-breadcrumbs > ol:has(>li:nth-child(8)) > li:nth-child(7) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(8)) > li:nth-child(7)::before { display: none !important; } .hx-breadcrumbs > ol:has(>li:nth-child(7)) > li:nth-child(6) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(7)) > li:nth-child(6)::before { display: none !important; } .hx-breadcrumbs > ol:has(>li:nth-child(6)) > li:nth-child(5) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(6)) > li:nth-child(5)::before { display: none !important; } .hx-breadcrumbs > ol:has(>li:nth-child(5)) > li:nth-child(4) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(5)) > li:nth-child(4)::before { display: none !important; } .hx-breadcrumbs > ol:has(>li:nth-child(4)) > li:nth-child(3) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(4)) > li:nth-child(3)::before { display: none !important; } } /* -------------------------------------------------------------------------- DESKTOP-LIKE CONTAINER -------------------------------------------------------------------------- */ @container (min-width: 1024px) { /* Show the fourth from last item */ .hx-breadcrumbs > ol > li:nth-last-child(3) { display: flex !important; } /* Show the "dots" icon if it has 4 or more items */ .hx-breadcrumbs > ol:has(>li:nth-child(5)) > li:first-child .hx-breadcrumbs-dots-icon { display: inline-block !important; } /* Hides the icon of the first item that comes after the dots */ .hx-breadcrumbs > ol:has(>li:nth-child(10)) > li:nth-child(8) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(10)) > li:nth-child(8)::before { display: none !important; } .hx-breadcrumbs > ol:has(>li:nth-child(9)) > li:nth-child(7) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(9)) > li:nth-child(7)::before { display: none !important; } .hx-breadcrumbs > ol:has(>li:nth-child(8)) > li:nth-child(6) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(8)) > li:nth-child(6)::before { display: none !important; } .hx-breadcrumbs > ol:has(>li:nth-child(7)) > li:nth-child(5) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(7)) > li:nth-child(5)::before { display: none !important; } .hx-breadcrumbs > ol:has(>li:nth-child(6)) > li:nth-child(4) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(6)) > li:nth-child(4)::before { display: none !important; } .hx-breadcrumbs > ol:has(>li:nth-child(5)) > li:nth-child(3) { margin-left: 8px !important; } .hx-breadcrumbs > ol:has(>li:nth-child(5)) > li:nth-child(3)::before { display: none !important; } } /* @apply overflow-x-auto; */ .hx-carousel-container { /* @apply @container w-full max-w-full mx-auto; background: blue; */ } .hx-carousel-list { /* @apply flex gap-[var(--gap)]; */ } /* background: red; */ .hx-carousel-list > li { /* @apply shrink-0; */ } /* -------------------------------------------------------------------------- TINY CONTAINER -------------------------------------------------------------------------- */ @container (max-width: 359px) { .hx-carousel { /* */ } } /* -------------------------------------------------------------------------- PHONE-LIKE CONTAINER -------------------------------------------------------------------------- */ @container (min-width: 360px) and (max-width: 479px) { .hx-carousel { /* */ } } @container (max-width: 479px) { .hx-carousel { /* */ } } /* -------------------------------------------------------------------------- TABLET-LIKE CONTAINER -------------------------------------------------------------------------- */ @container (min-width: 480px) { .hx-carousel { /* */ } } @container (min-width: 480px) and (max-width: 1023px) { .hx-carousel { /* */ } } /* -------------------------------------------------------------------------- DESKTOP-LIKE CONTAINER -------------------------------------------------------------------------- */ @container (min-width: 1024px) { .hx-carousel { /* */ } } /* */ .hx-pagination .btn { font-weight: 400; } .hx-pagination .hx-pagination-counter span { text-wrap: nowrap; } .hx-pagination .hx-pagination-unset > * { border-width: 0px !important; background-color: transparent !important; padding-left: 0.5em; padding-right: 0.5em; opacity: 0.75; } /* -------------------------------------------------------------------------- SMALL CONTAINER -------------------------------------------------------------------------- */ @container (max-width: 599px) { /* Hide everything */ .hx-pagination li { display: none; } /* Show the follow elements */ .hx-pagination .hx-pagination-prev, .hx-pagination .hx-pagination-next, .hx-pagination .hx-pagination-counter { display: block; } /* "Next" button fills the container */ .hx-pagination .hx-pagination-next { flex-grow: 1; } } /* Hide the "Previous" text for really small containers */ @container (max-width: 479px) { .hx-pagination-prev span { display: none; } } /* -------------------------------------------------------------------------- TABLET-LIKE CONTAINERS -------------------------------------------------------------------------- */ @container (min-width: 600px) { /* Hide the counter from this point on */ .hx-pagination .hx-pagination-counter { display: none !important; } } @container (min-width: 600px) and (max-width: 1023px) { /* Hide the "Previous" text until desktop */ .hx-pagination .hx-pagination-prev span { display: none !important; } } @container (max-width: 1023px) { /* Hide the "extra" page numbers until desktop */ .hx-pagination .hx-pagination-extra { display: none !important; } } /* -------------------------------------------------------------------------- DESKTOP-LIKE CONTAINER -------------------------------------------------------------------------- */ @container (min-width: 1024px) { .hx-pagination { /* */ } } .hx[client="aci"] .tabs { /* @apply block; */ } .\[--hx-color-bg-active\:hsla\(0\2c 0\%\2c 0\%\2c 0\.05\)\] { --hx-color-bg-active: hsla(0,0%,0%,0.05); } .hx[client="aci"] .\[grid-area\:header\] { grid-area: header; } .hx[client="aci"] .\[grid-area\:main\] { grid-area: main; } .hx[client="aci"] .\[grid-template-areas\:\'header\'_\'main\'\] { grid-template-areas: 'header' 'main'; } .hx[client="aci"] .\[grid-template-areas\:\'header_main\'\] { grid-template-areas: 'header main'; } .hx[client="aci"] .\[grid-template-areas\:\'main_header\'\] { grid-template-areas: 'main header'; } /* DATA-ATTRIBUTES */ .hx[client="aci"] [data-hidden] { display: none !important; } /* Cross-page transitions */ @view-transition { navigation: auto; } /* TODO: Find a better place for this */ :root { --input-height: 2.5rem; } .hx[client="aci"] .hover\:link:hover { cursor: pointer; text-decoration-line: underline; } .hx[client="aci"] .hover\:link:hover:focus { outline: 2px solid transparent; outline-offset: 2px; } .hx[client="aci"] .hover\:link:hover:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media not all and (min-width: 1024px) { .hx[client="aci"] .max-lg\:\!modal-bottom { place-items: end !important; } .hx[client="aci"] .max-lg\:\!modal-bottom :where(.modal-box) { width: 100% !important; max-width: none !important; --tw-translate-y: 2.5rem !important; --tw-scale-x: 1 !important; --tw-scale-y: 1 !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; border-top-left-radius: var(--rounded-box, 1rem) !important; border-top-right-radius: var(--rounded-box, 1rem) !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; } } .hx[client="aci"] .\[\&\>\.btn\]\:btn-circle>.btn { height: 3rem; width: 3rem; border-radius: 9999px; padding: 0px; } .hx[client="aci"] .\[\&\>\.btn\]\:btn-lg>.btn { height: 4rem; min-height: 4rem; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 1.125rem; } .hx[client="aci"] .btn-square:where(.\[\&\>\.btn\]\:btn-lg>.btn) { height: 4rem; width: 4rem; padding: 0px; } .hx[client="aci"] .\[\&\>\.btn\]\:btn-circle>.btn:where(.btn-xs) { height: 1.5rem; width: 1.5rem; border-radius: 9999px; padding: 0px; } .hx[client="aci"] .\[\&\>\.btn\]\:btn-circle>.btn:where(.btn-sm) { height: 2rem; width: 2rem; border-radius: 9999px; padding: 0px; } .hx[client="aci"] .\[\&\>\.btn\]\:btn-circle>.btn:where(.btn-md) { height: 3rem; width: 3rem; border-radius: 9999px; padding: 0px; } .hx[client="aci"] .\[\&\>\.btn\]\:btn-circle>.btn:where(.btn-lg) { height: 4rem; width: 4rem; border-radius: 9999px; padding: 0px; } .hx[client="aci"] .btn-circle:where(.\[\&\>\.btn\]\:btn-lg>.btn) { height: 4rem; width: 4rem; border-radius: 9999px; padding: 0px; } .hx[client="aci"] .backdrop\:\!block::backdrop { display: block !important; } .hx[client="aci"] .backdrop\:bg-black\/65::backdrop { background-color: rgb(0 0 0 / 0.65); } .hx[client="aci"] .backdrop\:backdrop-blur-lg::backdrop { --tw-backdrop-blur: blur(16px); -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); } .hx[client="aci"] .first\:z-2:first-child { z-index: 2; } .hx[client="aci"] .first\:pl-0:first-child { padding-left: 0px; } .hx[client="aci"] .last\:pr-0:last-child { padding-right: 0px; } .hx[client="aci"] .hover\:-translate-y-1:hover { --tw-translate-y: -1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hx[client="aci"] .hover\:bg-black:hover { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .hx[client="aci"] .hover\:text-blue-600:hover { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); } .hx[client="aci"] .hover\:underline:hover { text-decoration-line: underline; } .hx[client="aci"] .hover\:shadow-2:hover { --tw-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 2px 1px -1px rgba(0, 0, 0, 0.1); --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color), 0px 1px 1px 0px var(--tw-shadow-color), 0px 2px 1px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hx[client="aci"] .group\/carousel[data-at-end-position] .group-\[\[data-at-end-position\]\]\/carousel\:\!pointer-events-none { pointer-events: none !important; } .hx[client="aci"] .group\/carousel[data-at-start-position] .group-\[\[data-at-start-position\]\]\/carousel\:\!pointer-events-none { pointer-events: none !important; } .group\/carousel.hx-carousel-mini .group-\[\.hx-carousel-mini\]\/carousel\:hidden { display: none; } .hx[client="aci"] .group\/carousel.carousel-thumbs .group-\[\.carousel-thumbs\]\/carousel\:cursor-pointer { cursor: pointer; } .hx[client="aci"] .group[data-init] .group-\[\[data-init\]\]\:\!overflow-x-visible { overflow-x: visible !important; } .hx[client="aci"] .group\/carousel:not([data-init]) .group-\[\&\:not\(\[data-init\]\)\]\/carousel\:\!opacity-0 { opacity: 0 !important; } .hx[client="aci"] .group\/carousel[data-at-end-position] .group-\[\[data-at-end-position\]\]\/carousel\:\!opacity-0 { opacity: 0 !important; } .hx[client="aci"] .group\/carousel[data-at-start-position] .group-\[\[data-at-start-position\]\]\/carousel\:\!opacity-0 { opacity: 0 !important; } .hx[client="aci"] .group\/carousel.vfx-crossfade .group-\[\.vfx-crossfade\]\/carousel\:transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .group\/carousel.hx-carousel-mini:not(data-[init]) .group-\[\.hx-carousel-mini\:not\(data-\[init\]\)\]\/carousel\:first\:block:first-child { display: block; } .hx[client="aci"] .peer:checked ~ .peer-checked\:\!hidden { display: none !important; } .hx[client="aci"] .peer:checked ~ .peer-checked\:\!max-h-none { max-height: none !important; } .hx[client="aci"] .aria-hidden\:hidden[aria-hidden="true"] { display: none; } .aria-selected\:border-\[var\(--hx-color-b-active\)\][aria-selected="true"] { border-color: var(--hx-color-b-active); } .aria-selected\:bg-\[var\(--hx-color-bg-active\)\][aria-selected="true"] { background-color: var(--hx-color-bg-active); } .hx[client="aci"] .aria-selected\:drop-shadow[aria-selected="true"] { --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); 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); } .hx[client="aci"] .data-\[active\]\:z-4[data-active] { z-index: 4; } .hx[client="aci"] .data-\[preload\]\:z-3[data-preload] { z-index: 3; } .hx[client="aci"] .data-\[active\]\:\!block[data-active] { display: block !important; } .hx[client="aci"] .data-\[preload\]\:\!block[data-preload] { display: block !important; } .hx[client="aci"] .group\/carousel.vfx-crossfade .group-\[\.vfx-crossfade\]\/carousel\:data-\[active\]\:\!opacity-100[data-active] { opacity: 1 !important; } .hx[client="aci"] .group\/carousel.vfx-crossfade .group-\[\.vfx-crossfade\]\/carousel\:data-\[preload\]\:opacity-0[data-preload] { opacity: 0; } .hx[client="aci"] .group\/carousel.vfx-crossfade .group-\[\.vfx-crossfade\]\/carousel\:data-\[active\]\:\!delay-0[data-active] { transition-delay: 0s !important; } .hx[client="aci"] .group\/carousel.vfx-crossfade .group-\[\.vfx-crossfade\]\/carousel\:data-\[preload\]\:delay-100[data-preload] { transition-delay: 100ms; } .hx[client="aci"] .group\/carousel.vfx-crossfade .group-\[\.vfx-crossfade\]\/carousel\:data-\[active\]\:\!ease-out[data-active] { transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; } @container row (min-width: 20rem) { .hx[client="aci"] .\@xs\/row\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .hx[client="aci"] .motion-reduce\:\!transition-none { transition-property: none !important; } } @media not all and (min-width: 1024px) { .hx[client="aci"] .max-lg\:\!max-w-full { max-width: 100% !important; } .hx[client="aci"] .max-lg\:\!rounded-b-none { border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; } .hx[client="aci"] .max-lg\:\!rounded-t-xl { border-top-left-radius: 0.75rem !important; border-top-right-radius: 0.75rem !important; } } @media (min-width: 480px) { .hx[client="aci"] .sm\:col-span-1 { grid-column: span 1 / span 1; } .hx[client="aci"] .sm\:col-span-10 { grid-column: span 10 / span 10; } .hx[client="aci"] .sm\:col-span-11 { grid-column: span 11 / span 11; } .hx[client="aci"] .sm\:col-span-12 { grid-column: span 12 / span 12; } .hx[client="aci"] .sm\:col-span-2 { grid-column: span 2 / span 2; } .hx[client="aci"] .sm\:col-span-3 { grid-column: span 3 / span 3; } .hx[client="aci"] .sm\:col-span-4 { grid-column: span 4 / span 4; } .hx[client="aci"] .sm\:col-span-5 { grid-column: span 5 / span 5; } .hx[client="aci"] .sm\:col-span-6 { grid-column: span 6 / span 6; } .hx[client="aci"] .sm\:col-span-7 { grid-column: span 7 / span 7; } .hx[client="aci"] .sm\:col-span-8 { grid-column: span 8 / span 8; } .hx[client="aci"] .sm\:col-span-9 { grid-column: span 9 / span 9; } .hx[client="aci"] .sm\:col-span-full { grid-column: 1 / -1; } .hx[client="aci"] .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .hx[client="aci"] .sm\:grid-cols-none { grid-template-columns: none; } .hx[client="aci"] .sm\:grid-cols-subgrid { grid-template-columns: subgrid; } } @media (min-width: 768px) { .hx[client="aci"] .md\:col-span-1 { grid-column: span 1 / span 1; } .hx[client="aci"] .md\:col-span-10 { grid-column: span 10 / span 10; } .hx[client="aci"] .md\:col-span-11 { grid-column: span 11 / span 11; } .hx[client="aci"] .md\:col-span-12 { grid-column: span 12 / span 12; } .hx[client="aci"] .md\:col-span-2 { grid-column: span 2 / span 2; } .hx[client="aci"] .md\:col-span-3 { grid-column: span 3 / span 3; } .hx[client="aci"] .md\:col-span-4 { grid-column: span 4 / span 4; } .hx[client="aci"] .md\:col-span-5 { grid-column: span 5 / span 5; } .hx[client="aci"] .md\:col-span-6 { grid-column: span 6 / span 6; } .hx[client="aci"] .md\:col-span-7 { grid-column: span 7 / span 7; } .hx[client="aci"] .md\:col-span-8 { grid-column: span 8 / span 8; } .hx[client="aci"] .md\:col-span-9 { grid-column: span 9 / span 9; } .hx[client="aci"] .md\:col-span-full { grid-column: 1 / -1; } .hx[client="aci"] .md\:hidden { display: none; } .hx[client="aci"] .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .hx[client="aci"] .md\:grid-cols-\[400px_1fr\] { grid-template-columns: 400px 1fr; } .hx[client="aci"] .md\:grid-cols-none { grid-template-columns: none; } .hx[client="aci"] .md\:grid-cols-subgrid { grid-template-columns: subgrid; } .hx[client="aci"] .md\:px-5 { padding-left: 12px; padding-right: 12px; } .hx[client="aci"] .md\:unset { all: unset; } } @media (min-width: 1024px) { .hx[client="aci"] .lg\:col-span-1 { grid-column: span 1 / span 1; } .hx[client="aci"] .lg\:col-span-10 { grid-column: span 10 / span 10; } .hx[client="aci"] .lg\:col-span-11 { grid-column: span 11 / span 11; } .hx[client="aci"] .lg\:col-span-12 { grid-column: span 12 / span 12; } .hx[client="aci"] .lg\:col-span-2 { grid-column: span 2 / span 2; } .hx[client="aci"] .lg\:col-span-3 { grid-column: span 3 / span 3; } .hx[client="aci"] .lg\:col-span-4 { grid-column: span 4 / span 4; } .hx[client="aci"] .lg\:col-span-5 { grid-column: span 5 / span 5; } .hx[client="aci"] .lg\:col-span-6 { grid-column: span 6 / span 6; } .hx[client="aci"] .lg\:col-span-7 { grid-column: span 7 / span 7; } .hx[client="aci"] .lg\:col-span-8 { grid-column: span 8 / span 8; } .hx[client="aci"] .lg\:col-span-9 { grid-column: span 9 / span 9; } .hx[client="aci"] .lg\:col-span-full { grid-column: 1 / -1; } .hx[client="aci"] .lg\:block { display: block; } .hx[client="aci"] .lg\:hidden { display: none; } .hx[client="aci"] .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .hx[client="aci"] .lg\:grid-cols-none { grid-template-columns: none; } .hx[client="aci"] .lg\:grid-cols-subgrid { grid-template-columns: subgrid; } .hx[client="aci"] .lg\:unset { all: unset; } } @media (min-width: 1280px) { .hx[client="aci"] .xl\:col-span-1 { grid-column: span 1 / span 1; } .hx[client="aci"] .xl\:col-span-10 { grid-column: span 10 / span 10; } .hx[client="aci"] .xl\:col-span-11 { grid-column: span 11 / span 11; } .hx[client="aci"] .xl\:col-span-12 { grid-column: span 12 / span 12; } .hx[client="aci"] .xl\:col-span-2 { grid-column: span 2 / span 2; } .hx[client="aci"] .xl\:col-span-3 { grid-column: span 3 / span 3; } .hx[client="aci"] .xl\:col-span-4 { grid-column: span 4 / span 4; } .hx[client="aci"] .xl\:col-span-5 { grid-column: span 5 / span 5; } .hx[client="aci"] .xl\:col-span-6 { grid-column: span 6 / span 6; } .hx[client="aci"] .xl\:col-span-7 { grid-column: span 7 / span 7; } .hx[client="aci"] .xl\:col-span-8 { grid-column: span 8 / span 8; } .hx[client="aci"] .xl\:col-span-9 { grid-column: span 9 / span 9; } .hx[client="aci"] .xl\:col-span-full { grid-column: 1 / -1; } .hx[client="aci"] .xl\:hidden { display: none; } .hx[client="aci"] .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .hx[client="aci"] .xl\:grid-cols-none { grid-template-columns: none; } .hx[client="aci"] .xl\:grid-cols-subgrid { grid-template-columns: subgrid; } .hx[client="aci"] .xl\:unset { all: unset; } } .dark\:\[--hx-color-bg-active\:hsla\(0\2c 0\%\2c 100\%\2c 0\.05\)\]:where([data-mode="dark"], [data-mode="dark"] *) { --hx-color-bg-active: hsla(0,0%,100%,0.05); } .hx[client="aci"] .group[open] .group-open\:\[\&\>\*\]\:pointer-events-auto>* { pointer-events: auto; } .hx[client="aci"] .\[\&\>\.btn\]\:rounded-r-none>.btn { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .hx[client="aci"] .\[\&\>\.btn\]\:rounded-t-none>.btn { border-top-left-radius: 0px; border-top-right-radius: 0px; } .hx[client="aci"] .\[\&\>\.btn\]\:text-white>.btn { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .hx[client="aci"] .peer:checked ~ .peer-checked\:\[\&\>\[data-close\]\]\:inline-flex>[data-close] { display: inline-flex; } .hx[client="aci"] .peer:checked ~ .peer-checked\:\[\&\>\[data-open\]\]\:hidden>[data-open] { display: none; } .hx[client="aci"] .\[\&\>button\]\:pointer-events-auto>button { pointer-events: auto; } .hx[client="aci"] .\[\&\>button\]\:transition-all>button { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .hx[client="aci"] .\[\&\>h3\]\:-mt-1>h3 { margin-top: -1px; } .hx[client="aci"] .\[\&\>h3\]\:mb-3>h3 { margin-bottom: 4px; } .hx[client="aci"] .\[\&\>h3\]\:text-h4>h3 { font-size: clamp(1.375rem, 1.266rem + 0.484vw, 1.75rem); line-height: 1.2; font-weight: 600; } .hx[client="aci"] .\[\&\>h3\]\:font-bold>h3 { font-weight: 700; } .hx[client="aci"] .\[\&\>h3\]\:text-h4>h3.vtrim:before { display: block; margin-top: -0.2em; content: ""; } .hx[client="aci"] .\[\&\>h3\]\:text-h4>h3.vtrim:after { display: block; margin-bottom: -0.2em; content: ""; } .hx[client="aci"] .\[\&\>img\]\:h-full>img { height: 100%; } .hx[client="aci"] .\[\&\>img\]\:w-full>img { width: 100%; } .hx[client="aci"] .\[\&\>img\]\:object-cover>img { object-fit: cover; } .hx[client="aci"] .\[\&\>img\]\:transition-transform>img { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .hx[client="aci"] .hover\:\[\&\>img\]\:scale-105>img:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hx[client="aci"] .\[\&\>li\:first-child\]\:\!flex>li:first-child { display: flex !important; } .hx[client="aci"] .\[\&\>li\:last-child\]\:\!flex>li:last-child { display: flex !important; } .hx[client="aci"] .\[\&\>li\>a\]\:h-full>li>a { height: 100%; } .hx[client="aci"] .\[\&\>li\>details\]\:h-full>li>details { height: 100%; } .hx[client="aci"] .\[\&\>li\>img\]\:mx-auto>li>img { margin-left: auto; margin-right: auto; } .hx[client="aci"] .\[\&\>li\>img\]\:aspect-\[16\/10\]>li>img { aspect-ratio: 16/10; } .hx[client="aci"] .\[\&\>li\>img\]\:aspect-\[16\/9\]>li>img { aspect-ratio: 16/9; } .hx[client="aci"] .\[\&\>li\>img\]\:aspect-\[4\/3\]>li>img { aspect-ratio: 4/3; } .hx[client="aci"] .\[\&\>li\>img\]\:aspect-square>li>img { aspect-ratio: 1 / 1; } .hx[client="aci"] .\[\&\>li\>img\]\:h-full>li>img { height: 100%; } .hx[client="aci"] .\[\&\>li\>img\]\:max-h-full>li>img { max-height: 100%; } .hx[client="aci"] .\[\&\>li\>img\]\:w-full>li>img { width: 100%; } .hx[client="aci"] .\[\&\>li\>img\]\:max-w-full>li>img { max-width: 100%; } .hx[client="aci"] .\[\&\>li\>img\]\:object-contain>li>img { object-fit: contain; } .hx[client="aci"] .\[\&\>li\]\:absolute>li { position: absolute; } .hx[client="aci"] .\[\&\>li\]\:left-0>li { left: 0px; } .hx[client="aci"] .\[\&\>li\]\:top-0>li { top: 0px; } .hx[client="aci"] .\[\&\>li\]\:aspect-\[16\/10\]>li { aspect-ratio: 16/10; } .hx[client="aci"] .\[\&\>li\]\:aspect-\[16\/9\]>li { aspect-ratio: 16/9; } .hx[client="aci"] .\[\&\>li\]\:aspect-\[4\/3\]>li { aspect-ratio: 4/3; } .hx[client="aci"] .\[\&\>li\]\:aspect-square>li { aspect-ratio: 1 / 1; } .hx[client="aci"] .\[\&\>li\]\:h-full>li { height: 100%; } .hx[client="aci"] .\[\&\>li\]\:w-\[var\(--item-width\)\]>li { width: var(--item-width); } .hx[client="aci"] .\[\&\>li\]\:w-full>li { width: 100%; } .hx[client="aci"] .\[\&\>li\]\:min-w-\[250px\]>li { min-width: 250px; } .hx[client="aci"] .\[\&\>li\]\:min-w-\[var\(--item-width\)\]>li { min-width: var(--item-width); } .hx[client="aci"] .\[\&\>li\]\:shrink-0>li { flex-shrink: 0; } .hx[client="aci"] .\[\&\>li\]\:flex-grow>li { flex-grow: 1; } .hx[client="aci"] .\[\&\>li\]\:cursor-pointer>li { cursor: pointer; } .hx[client="aci"] .\[\&\>li\]\:snap-start>li { scroll-snap-align: start; }