:root { --p: 259 94% 51%; --pf: 259 94% 41%; --pc: 0 0% 100%; --s: 314 100% 47%; --sf: 314 100% 37%; --sc: 0 0% 100%; --a: 174 60% 51%; --af: 174 60% 41%; --ac: 0 0% 100%; --n: 219 14% 28%; --nf: 222 13% 19%; --nc: 0 0% 100%; --b1: 0 0% 100%; --b2: 210 20% 98%; --b3: 216 12% 84%; --bc: 215 28% 17%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } @media (prefers-color-scheme: dark) { :root { --p:259 94% 61%; --pf: 259 94% 51%; --pc: 0 0% 100%; --s: 314 100% 47%; --sf: 314 100% 37%; --sc: 0 0% 100%; --a: 174 60% 51%; --af: 174 60% 41%; --ac: 0 0% 100%; --n: 222 13% 19%; --nf: 223 14% 10%; --nc: 0 0% 100%; --b1: 219 14% 28%; --b2: 222 13% 19%; --b3: 223 14% 10%; --bc: 228 14% 93%; --in: 221 83% 53%; --inc: 204 94% 94%; --su: 142 76% 36%; --suc: 141 84% 93%; --wa: 32 95% 44%; --wac: 48 96% 89%; --er: 0 72% 51%; --erc: 0 93% 94%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } } [data-theme=light] { --p: 259 94% 51%; --pf: 259 94% 41%; --pc: 0 0% 100%; --s: 314 100% 47%; --sf: 314 100% 37%; --sc: 0 0% 100%; --a: 174 60% 51%; --af: 174 60% 41%; --ac: 0 0% 100%; --n: 219 14% 28%; --nf: 222 13% 19%; --nc: 0 0% 100%; --b1: 0 0% 100%; --b2: 210 20% 98%; --b3: 216 12% 84%; --bc: 215 28% 17%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=dark] { --p: 259 94% 61%; --pf: 259 94% 51%; --pc: 0 0% 100%; --s: 314 100% 47%; --sf: 314 100% 37%; --sc: 0 0% 100%; --a: 174 60% 51%; --af: 174 60% 41%; --ac: 0 0% 100%; --n: 222 13% 19%; --nf: 223 14% 10%; --nc: 0 0% 100%; --b1: 219 14% 28%; --b2: 222 13% 19%; --b3: 223 14% 10%; --bc: 228 14% 93%; --in: 221 83% 53%; --inc: 204 94% 94%; --su: 142 76% 36%; --suc: 141 84% 93%; --wa: 32 95% 44%; --wac: 48 96% 89%; --er: 0 72% 51%; --erc: 0 93% 94%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=cupcake] { --p: 183 47% 59%; --pf: 183 47% 49%; --pc: 0 0% 100%; --s: 338 71% 78%; --sf: 338 72% 68%; --sc: 0 0% 100%; --a: 39 84% 58%; --af: 39 84% 48%; --ac: 0 0% 100%; --n: 280 46% 14%; --nf: 279 46% 11%; --nc: 0 0% 100%; --b1: 24 33% 97%; --b2: 27 22% 92%; --b3: 22 14% 89%; --bc: 280 46% 14%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 1.9rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 2px; --tab-radius: .5rem; } [data-theme=bumblebee] { --p: 50 94% 58%; --pf: 50 94% 48%; --pc: 240 33% 14%; --s: 41 74% 53%; --sf: 41 74% 43%; --sc: 0 0% 100%; --a: 240 33% 14%; --af: 240 33% 10%; --ac: 0 0% 100%; --n: 240 33% 14%; --nf: 240 33% 10%; --nc: 0 0% 100%; --b1: 0 0% 100%; --b2: 0 0% 96%; --b3: 0 0% 89%; --bc: 0 0% 0%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=emerald] { --p: 141 50% 60%; --pf: 141 50% 50%; --pc: 210 20% 98%; --s: 219 96% 60%; --sf: 219 96% 50%; --sc: 210 20% 98%; --a: 10 81% 56%; --af: 10 81% 46%; --ac: 210 20% 98%; --n: 219 20% 25%; --nf: 220 19% 15%; --nc: 210 20% 98%; --b1: 0 0% 100%; --b2: 210 20% 98%; --b3: 0 0% 95%; --bc: 219 20% 25%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0; --animation-input: 0; --btn-text-case: uppercase; --btn-focus-scale: 1; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=corporate] { --p: 229 96% 64%; --pf: 229 96% 54%; --pc: 233 27% 13%; --s: 215 26% 59%; --sf: 214 26% 49%; --sc: 233 27% 13%; --a: 154 49% 60%; --af: 154 49% 50%; --ac: 233 27% 13%; --n: 233 27% 13%; --nf: 240 25% 3%; --nc: 210 38% 95%; --b1: 0 0% 100%; --b2: 210 60% 98%; --b3: 210 38% 95%; --bc: 233 27% 13%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0; --animation-input: 0; --btn-text-case: uppercase; --btn-focus-scale: 1; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=synthwave] { --p: 321 70% 69%; --pf: 321 70% 59%; --pc: 257 63% 17%; --sf: 197 87% 75%; --s: 197 87% 65%; --sc: 257 63% 17%; --af: 48 89% 67%; --a: 48 89% 57%; --ac: 257 63% 17%; --n: 253 61% 19%; --nf: 257 64% 11%; --nc: 260 60% 98%; --b1: 254 59% 26%; --b2: 253 61% 19%; --b3: 257 64% 11%; --bc: 260 60% 98%; --in: 199 87% 64%; --inc: 257 63% 17%; --su: 168 74% 68%; --suc: 257 63% 17%; --wa: 48 89% 57%; --wac: 257 63% 17%; --er: 352 74% 57%; --erc: 260 60% 98%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=retro] { font-family: uisecondaryerif,Georgia,Cambria,Times New Roman,Times,serif; --p: 3 74% 76%; --pf: 3 74% 66%; --pc: 345 5% 15%; --s: 145 27% 72%; --sf: 145 27% 62%; --sc: 345 5% 15%; --a: 49 67% 76%; --af: 49 67% 66%; --ac: 345 5% 15%; --n: 42 17% 42%; --nf: 41 13% 24%; --nc: 45 47% 80%; --b1: 45 47% 80%; --b2: 45 37% 72%; --b3: 42 36% 65%; --bc: 345 5% 15%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 0.4rem; --rounded-btn: 0.4rem; --rounded-badge: 0.4rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=cyberpunk] { font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; --p: 345 100% 73%; --pf: 344 100% 67%; --pc: 0 0% 0%; --s: 195 80% 70%; --sf: 194 66% 61%; --sc: 0 0% 0%; --a: 276 74% 71%; --af: 276 76% 63%; --ac: 0 0% 0%; --n: 57 100% 13%; --nf: 60 80% 2%; --nc: 56 100% 50%; --b1: 56 100% 50%; --b2: 56 100% 43%; --b3: 56 100% 36%; --bc: 0 0% 0%; --in: 221 83% 53%; --inc: 204 94% 94%; --su: 142 76% 36%; --suc: 141 84% 93%; --wa: 32 95% 44%; --wac: 48 96% 89%; --er: 0 72% 51%; --erc: 0 93% 94%; --border-color: var(--b3); --rounded-box: 0; --rounded-btn: 0; --rounded-badge: 0; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0; } [data-theme=valentine] { --p: 353 74% 67%; --pf: 353 74% 57%; --pc: 0 0% 100%; --s: 254 86% 77%; --sf: 254 87% 67%; --sc: 0 0% 100%; --a: 181 56% 70%; --af: 181 55% 60%; --ac: 0 0% 100%; --n: 336 43% 48%; --nf: 340 40% 38%; --nc: 318 46% 89%; --b1: 318 46% 89%; --b2: 315 59% 79%; --b3: 316 62% 73%; --bc: 344 38% 28%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 1.9rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=halloween] { --p: 32 89% 52%; --pf: 32 89% 42%; --pc: 180 7% 8%; --s: 271 46% 42%; --sf: 271 46% 32%; --sc: 0 0% 100%; --a: 91 100% 33%; --af: 91 100% 23%; --ac: 0 0% 100%; --n: 180 4% 11%; --nf: 180 7% 8%; --nc: 0 0% 100%; --b1: 0 0% 13%; --b2: 180 4% 11%; --b3: 180 7% 8%; --bc: 0 0% 100%; --in: 221 83% 53%; --inc: 204 94% 94%; --su: 142 76% 36%; --suc: 141 84% 93%; --wa: 32 95% 44%; --wac: 48 96% 89%; --er: 0 72% 51%; --erc: 0 93% 94%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=garden] { --p: 139 16% 43%; --pf: 137 15% 33%; --pc: 0 0% 100%; --s: 97 37% 93%; --sf: 98 36% 82%; --sc: 96 32% 15%; --a: 0 68% 94%; --af: 0 71% 85%; --ac: 0 22% 16%; --n: 0 4% 35%; --nf: 0 4% 16%; --nc: 0 4% 91%; --b1: 0 4% 91%; --b2: 0 5% 81%; --b3: 0 5% 71%; --bc: 0 3% 6%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=forest] { --p: 141 72% 42%; --pf: 141 72% 32%; --pc: 0 0% 100%; --s: 141 75% 48%; --sf: 141 75% 38%; --sc: 0 0% 100%; --a: 35 69% 52%; --af: 35 69% 42%; --ac: 0 0% 100%; --n: 0 10% 6%; --nf: 0 20% 2%; --nc: 0 0% 100%; --b1: 0 12% 8%; --b2: 0 10% 6%; --b3: 0 20% 2%; --bc: 0 0% 100%; --in: 221 83% 53%; --inc: 204 94% 94%; --su: 142 76% 36%; --suc: 141 84% 93%; --wa: 32 95% 44%; --wac: 48 96% 89%; --er: 0 72% 51%; --erc: 0 93% 94%; --rounded-btn: 0.5rem; --border-color: var(--b3); --rounded-box: 1rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=aqua] { --p: 189 100% 63%; --pf: 189 100% 53%; --pc: 0 0% 0%; --s: 274 31% 57%; --sf: 274 31% 47%; --sc: 0 0% 100%; --a: 47 100% 80%; --af: 47 100% 70%; --ac: 0 0% 100%; --n: 231 77% 33%; --nf: 231 68% 29%; --nc: 0 0% 100%; --b1: 231 89% 38%; --b2: 231 77% 33%; --b3: 231 68% 29%; --bc: 0 0% 100%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=lofi] { --p: 0 0% 50%; --pf: 0 0% 45%; --pc: 240 4% 95%; --s: 0 0% 30%; --sf: 0 0% 25%; --sc: 240 4% 95%; --a: 0 0% 10%; --af: 0 0% 5%; --ac: 240 4% 95%; --n: 240 4% 95%; --nf: 240 6% 90%; --nc: 0 0% 30%; --b1: 0 0% 100%; --b2: 0 0% 100%; --b3: 0 0% 100%; --bc: 0 0% 49%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: #e6e6e6; --rounded-box: 0; --rounded-btn: 0; --rounded-badge: 0; --animation-btn: 0; --animation-input: 0; --btn-text-case: uppercase; --btn-focus-scale: 1; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0; } [data-theme=pastel] { --p: 284 22% 80%; --pf: 282 22% 70%; --pc: 0 0% 0%; --s: 352 70% 88%; --sf: 352 70% 78%; --sc: 0 0% 100%; --a: 158 55% 81%; --af: 158 55% 71%; --ac: 0 0% 100%; --n: 199 44% 61%; --nf: 199 44% 51%; --nc: 0 0% 100%; --b1: 0 0% 100%; --b2: 210 20% 98%; --b3: 216 12% 84%; --bc: 206 3% 55%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --rounded-box: 1rem; --rounded-btn: 1.9rem; --rounded-badge: 1.9rem; --border-color: var(--b3); --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=fantasy] { --p: 296 83% 25%; --pf: 296 82% 15%; --pc: 0 0% 100%; --s: 200 100% 37%; --sf: 200 100% 27%; --sc: 0 0% 100%; --a: 31 94% 51%; --af: 31 94% 41%; --ac: 0 0% 100%; --n: 215 28% 17%; --nf: 221 39% 11%; --nc: 0 0% 100%; --b1: 0 0% 100%; --b2: 210 20% 98%; --b3: 216 12% 84%; --bc: 215 28% 17%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=wireframe] { font-family: Chalkboard,comic sans ms,sanssecondaryerif; --p: 0 0% 72%; --pf: 0 0% 72%; --pc: 0 0% 0%; --s: 0 0% 72%; --sf: 0 0% 72%; --sc: 0 0% 0%; --a: 0 0% 72%; --af: 0 0% 72%; --ac: 0 0% 0%; --n: 0 0% 92%; --nf: 0 0% 92%; --nc: 0 0% 0%; --b1: 0 0% 100%; --b2: 0 0% 93%; --b3: 0 0% 87%; --bc: 0 0% 0%; --in: 240 100% 50%; --inc: 0 0% 100%; --su: 120 100% 25%; --suc: 0 0% 100%; --wa: 60 30% 50%; --wac: 0 0% 100%; --er: 0 100% 50%; --erc: 0 0% 100%; --border-color: #000; --rounded-box: 0.2rem; --rounded-btn: 0.2rem; --rounded-badge: 0.2rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.2rem; } [data-theme=wireframe] * { border-color: var(--border-color) !important; --tw-border-opacity: 1 !important; --tw-text-opacity: 1 !important; --tw-shadow: 0 0 0 1px var(--border-color) !important; } [data-theme=black] { --p: 0 0% 100%; --pf: 0 0% 100%; --pc: 0 0% 0%; --s: 0 0% 100%; --sf: 0 0% 100%; --sc: 0 0% 0%; --a: 0 0% 100%; --af: 0 0% 100%; --ac: 0 0% 0%; --b1: 0 0% 0%; --b2: 0 0% 20%; --b3: 0 0% 30%; --bc: 0 0% 100%; --n: 0 0% 20%; --nf: 0 0% 30%; --nc: 0 0% 100%; --in: 240 100% 50%; --inc: 0 0% 100%; --su: 120 100% 25%; --suc: 0 0% 0%; --wa: 60 100% 50%; --wac: 0 0% 0%; --er: 0 100% 50%; --erc: 0 0% 100%; --border-color: var(--b3); --rounded-box: 0; --rounded-btn: 0; --rounded-badge: 0; --animation-btn: 0; --animation-input: 0; --btn-text-case: lowercase; --btn-focus-scale: 1; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0; } [data-theme=luxury] { --p: 0 0% 100%; --pf: 0 0% 90%; --pc: 0 0% 0%; --s: 218 54% 18%; --sf: 219 56% 8%; --sc: 0 0% 100%; --a: 319 22% 26%; --af: 320 22% 16%; --ac: 0 0% 100%; --n: 270 4% 9%; --nf: 270 2% 18%; --nc: 37 67% 58%; --b1: 240 10% 4%; --b2: 270 4% 9%; --b3: 270 2% 18%; --bc: 37 67% 58%; --in: 202 100% 70%; --inc: 270 4% 9%; --su: 89 62% 52%; --suc: 270 4% 9%; --wa: 54 69% 64%; --wac: 270 4% 9%; --er: 0 100% 72%; --erc: 270 4% 9%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=dracula] { --p: 330 100% 85%; --pf: 330 100% 75%; --pc: 233 12% 13%; --s: 115 100% 85%; --sf: 115 100% 75%; --sc: 233 12% 13%; --a: 60 100% 85%; --af: 60 100% 75%; --ac: 233 12% 13%; --n: 245 14% 15%; --nf: 233 12% 13%; --nc: 251 100% 90%; --b1: 244 13% 21%; --b2: 245 14% 15%; --b3: 233 12% 13%; --bc: 251 100% 90%; --in: 204 94% 94%; --inc: 221 83% 53%; --su: 141 84% 93%; --suc: 142 76% 36%; --wa: 48 96% 89%; --wac: 32 95% 44%; --er: 0 93% 94%; --erc: 0 72% 51%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } [data-theme=cmyk] { --p: 203 83% 60%; --pf: 203 65% 54%; --pc: 0 0% 0%; --s: 335 78% 60%; --sf: 335 59% 53%; --sc: 0 0% 0%; --a: 56 100% 60%; --af: 56 72% 52%; --ac: 0 0% 0%; --n: 0 0% 10%; --nf: 0 0% 0%; --nc: 0 0% 100%; --b1: 0 0% 100%; --b2: 0 0% 96%; --b3: 0 0% 92%; --bc: 0 0% 0%; --in: 192 48% 52%; --inc: 0 0% 100%; --su: 291 48% 38%; --suc: 0 0% 100%; --wa: 25 85% 57%; --wac: 0 0% 100%; --er: 4 81% 56%; --erc: 0 0% 100%; --border-color: var(--b3); --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --navbar-padding: .5rem; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; } *,:after,:before { --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-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: rgba(59, 130, 246, 0.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; --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: ; } /*! tailwindcss v3.0.22 | MIT License | https://tailwindcss.com*/ *,:after,:before { box-sizing: border-box; border: 0 solid; } :after,:before { --tw-content: ""; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b,strong { font-weight: bolder; } code,kbd,pre,samp { font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; font-size: 1em; } small { font-size: 80%; } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: initial; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; padding: 0; } button,select { text-transform: none; } [type=button],[type=reset],[type=submit],button { -webkit-appearance: button; background-color: initial; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: initial; } ::-webkit-inner-spin-button,::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } menu,ol,ul { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } input::placeholder,textarea::placeholder { opacity: 1; color: #9ca3af; } [role=button],button { cursor: pointer; } :disabled { cursor: default; } audio,canvas,embed,iframe,img,object,svg,video { display: block; vertical-align: middle; } img,video { max-width: 100%; height: auto; } [hidden] { display: none; } :root { background-color: hsla(var(--b1) / var(--tw-bg-opacity, 1)); color: hsla(var(--bc) / var(--tw-text-opacity, 1)); } html { -webkit-tap-highlight-color: transparent; } *,:after,:before { --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59, 130, 246, 0.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; } .alert { display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; --tw-bg-opacity: 1; background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity)); padding: 1rem; border-radius: var(--rounded-box, 1rem); } .alert>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem*(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem*var(--tw-space-y-reverse)); } @media (min-width: 768px) { .alert { flex-direction:row; } .alert>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0px*(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px*var(--tw-space-y-reverse)); } } .alert>:where(*) { display: flex; align-items: center; gap: .5rem; } .artboard { width: 100%; } .avatar { position: relative; display: inline-flex; } .avatar>div { display: block; aspect-ratio: 1 / 1; overflow: hidden; } .avatar img { height: 100%; width: 100%; object-fit: cover; } .avatar.placeholder>div { display: flex; align-items: center; justify-content: center; } .badge { display: inline-flex; align-items: center; justify-content: center; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); height: 1.25rem; font-size: .875rem; line-height: 1.25rem; width: fit-content; padding-left: .563rem; padding-right: .563rem; border-width: 1px; --tw-border-opacity: 1; border-color: hsl(var(--n) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--n) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--nc) / var(--tw-text-opacity)); border-radius: var(--rounded-badge, 1.9rem); } .breadcrumbs { max-width: 100%; overflow-x: auto; padding-top: .5rem; padding-bottom: .5rem; } .breadcrumbs>ul { display: flex; align-items: center; white-space: nowrap; min-height: min-content; } .breadcrumbs>ul>li { display: flex; align-items: center; } .breadcrumbs>ul>li>a { display: flex; cursor: pointer; align-items: center; } .breadcrumbs>ul>li>a:hover { text-decoration-line: underline; } .btn { display: inline-flex; flex-shrink: 0; cursor: pointer; user-select: none; flex-wrap: wrap; align-items: center; justify-content: center; border-color: transparent; border-color: hsl(var(--n) / var(--tw-border-opacity)); text-align: center; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); border-radius: var(--rounded-btn, .5rem); height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: .875rem; line-height: 1.25rem; line-height: 1em; min-height: 3rem; font-weight: 600; text-transform: uppercase; text-transform: var(--btn-text-case, uppercase); border-width: var(--border-btn, 1px); animation: button-pop var(--animation-btn, .25s) ease-out; --tw-border-opacity: 1; --tw-bg-opacity: 1; background-color: hsl(var(--n) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--nc) / var(--tw-text-opacity)); } .btn-disabled,.btn[disabled] { pointer-events: none; --tw-border-opacity: 0; --tw-bg-opacity: 0.2; background-color: hsl(var(--n) / var(--tw-bg-opacity)); --tw-text-opacity: 0.2; color: hsl(var(--bc) / var(--tw-text-opacity)); } .btn-square { height: 3rem; width: 3rem; padding: 0; } .btn-circle { height: 3rem; width: 3rem; border-radius: 9999px; padding: 0; } .btn.loading,.btn.loading:hover { pointer-events: none; } .btn.loading:before { margin-right: .5rem; height: 1rem; width: 1rem; border-radius: 9999px; border-width: 2px; animation: spin 2s linear infinite; content: ""; border-top-color: transparent; border-left-color: transparent; border-bottom-color: initial; border-right-color: initial; } @media (prefers-reduced-motion:reduce) { .btn.loading:before { animation: spin 10s linear infinite; } } .btn-group { display: flex; flex-wrap: wrap; } .btn-group>input[type=radio].btn { appearance: none; } .btn-group>input[type=radio].btn:before { content: attr(data-title); } .card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--rounded-box, 1rem); } .card:focus { outline: 2px solid transparent; outline-offset: 2px; } .card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--padding-card, 2rem); gap: .5rem; } .card-body :where(p) { flex-grow: 1; } .card-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; } .card figure { display: flex; align-items: center; justify-content: center; } .card.image-full { display: grid; } .card.image-full:before { position: relative; content: ""; z-index: 10; --tw-bg-opacity: 1; background-color: hsl(var(--n) / var(--tw-bg-opacity)); opacity: .75; border-radius: var(--rounded-box, 1rem); } .card.image-full:before,.card.image-full>* { grid-column-start: 1; grid-row-start: 1; } .card.image-full>figure img { height: 100%; object-fit: cover; } .card.image-full>.card-body { position: relative; z-index: 20; --tw-text-opacity: 1; color: hsl(var(--nc) / var(--tw-text-opacity)); } .carousel { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .carousel-vertical { flex-direction: column; overflow-y: scroll; scroll-snap-type: y mandatory; } .carousel-item { box-sizing: initial; display: flex; flex: none; scroll-snap-align: start; } .carousel-center .carousel-item { scroll-snap-align: center; } .carousel-end .carousel-item { scroll-snap-align: end; } .collapse { position: relative; display: grid; overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; } .collapse-content,.collapse-title,.collapse>input[type=checkbox] { grid-column-start: 1; grid-row-start: 1; } .collapse>input[type=checkbox] { appearance: none; opacity: 0; } .collapse-content { grid-row-start: 2; overflow: hidden; max-height: 0; padding-left: 1rem; padding-right: 1rem; cursor: unset; transition: padding .2s ease-in-out,background-color .2s ease-in-out; } .collapse-open .collapse-content,.collapse:focus:not(.collapse-close) .collapse-content,.collapse:not(.collapse-close) input[type=checkbox]:checked~.collapse-content { max-height: 9000px; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); --tw-bg-opacity: 0.1; padding-bottom: 1rem; opacity: 1; transition: padding .2s ease-in-out,background-color .2s ease-in-out; } :root .countdown { line-height: 1em; } .countdown { display: inline-flex; } .countdown>* { height: 1em; display: inline-block; overflow-y: hidden; } .countdown>:before { position: relative; content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A"; white-space: pre; top: calc(var(--value)*-1em); text-align: center; transition: all 1s cubic-bezier(1, 0, 0, 1); } .divider { display: flex; flex-direction: row; align-items: center; align-self: stretch; margin-top: 1rem; margin-bottom: 1rem; height: 1rem; } .divider:after,.divider:before { content: ""; flex-grow: 1; height: .125rem; width: 100%; } .drawer { display: grid; overflow: hidden; } .drawer.drawer-end { direction: rtl; } .drawer.drawer-end>* { direction: ltr; } .drawer.drawer-end .drawer-toggle~.drawer-side>.drawer-overlay+* { --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); justify-self: end; } .drawer.drawer-end .drawer-toggle:checked~.drawer-side>.drawer-overlay+* { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .drawer-toggle { position: absolute; height: 0; width: 0; appearance: none; opacity: 0; } .drawer-toggle~.drawer-content { z-index: 0; grid-column-start: 1; grid-row-start: 1; max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .drawer-toggle~.drawer-side { grid-column-start: 1; grid-row-start: 1; display: grid; max-height: 100vh; } .drawer-toggle~.drawer-side>.drawer-overlay { visibility: hidden; grid-column-start: 1; grid-row-start: 1; opacity: 0; cursor: pointer; --tw-bg-opacity: 1; background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity)); transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .drawer-toggle~.drawer-side>.drawer-overlay+* { z-index: 10; grid-column-start: 1; grid-row-start: 1; --tw-translate-x: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .drawer-toggle:checked~.drawer-side { overflow-y: auto; } .drawer-toggle:checked~.drawer-side>.drawer-overlay { visibility: visible; opacity: .999999; --tw-bg-opacity: 0.4; } .drawer-toggle:checked~.drawer-side>.drawer-overlay+* { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } [dir=rtl] .drawer-toggle~.drawer-side>.drawer-overlay+* { --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } [dir=rtl] .drawer-toggle:checked~.drawer-side>.drawer-overlay+* { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @media (min-width: 1024px) { .drawer-mobile { grid-auto-columns:max-content auto; } .drawer-mobile>.drawer-toggle~.drawer-content { height: auto; } @media (min-width: 1024px) { .drawer-mobile>.drawer-toggle~.drawer-content { grid-column-start:2; } } @media (min-width: 1024px) { .drawer-mobile>.drawer-toggle~.drawer-side>.drawer-overlay { visibility:visible; } } @media (min-width: 1024px) { .drawer-mobile>.drawer-toggle~.drawer-side>.drawer-overlay+* { --tw-translate-x:0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } @media (min-width: 1024px) { .drawer-mobile.drawer-end>.drawer-toggle~.drawer-content { grid-column-start:1; } } @media (min-width: 1024px) { .drawer-mobile.drawer-end>.drawer-toggle~.drawer-side { grid-column-start:2; } } @media (min-width: 1024px) { .drawer-mobile.drawer-end>.drawer-toggle~.drawer-side>.drawer-overlay { visibility:visible; } } @media (min-width: 1024px) { .drawer-mobile.drawer-end>.drawer-toggle~.drawer-side>.drawer-overlay+* { --tw-translate-x:0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } .drawer-mobile>.drawer-toggle~.drawer-side { overflow-y: auto; } .drawer-mobile.drawer-end { grid-auto-columns: auto max-content; direction: ltr; } .drawer-mobile.drawer-end>.drawer-toggle~.drawer-content { height: auto; } .drawer-mobile.drawer-end>.drawer-toggle~.drawer-side { overflow-y: auto; } .drawer-mobile>.drawer-toggle:checked~.drawer-content { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } .dropdown { position: relative; display: inline-block; } .dropdown>:focus { outline: 2px solid transparent; outline-offset: 2px; } .dropdown .dropdown-content { visibility: hidden; position: absolute; z-index: 50; 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, backdrop-filter; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .dropdown-end .dropdown-content { right: 0; } .dropdown-left .dropdown-content { top: 0; right: 100%; bottom: auto; transform-origin: right; } .dropdown-right .dropdown-content { left: 100%; top: 0; bottom: auto; transform-origin: left; } .dropdown-top .dropdown-content { bottom: 100%; top: auto; transform-origin: bottom; } .dropdown-end.dropdown-right .dropdown-content { bottom: 0; top: auto; } .dropdown-end.dropdown-left .dropdown-content { bottom: 0; top: auto; } .dropdown.dropdown-hover:hover .dropdown-content,.dropdown.dropdown-open .dropdown-content,.dropdown:not(.dropdown-hover):focus-within .dropdown-content,.dropdown:not(.dropdown-hover):focus .dropdown-content { visibility: visible; opacity: 1; } .footer { display: grid; width: 100%; grid-auto-flow: row; place-items: start; row-gap: 2.5rem; column-gap: 1rem; font-size: .875rem; line-height: 1.25rem; } .footer>* { display: grid; place-items: start; gap: .5rem; } .footer-center { place-items: center; text-align: center; } .footer-center>* { place-items: center; } @media (min-width: 48rem) { .footer { grid-auto-flow:column; } .footer-center { grid-auto-flow: row dense; } } .form-control { display: flex; flex-direction: column; } .label { display: flex; user-select: none; align-items: center; justify-content: space-between; padding: .5rem .25rem; } .hero { display: grid; width: 100%; place-items: center; background-size: cover; background-position: 50%; } .hero>* { grid-column-start: 1; grid-row-start: 1; } .hero-overlay { grid-column-start: 1; grid-row-start: 1; height: 100%; width: 100%; --tw-bg-opacity: 0.5; background-color: hsl(var(--n) / var(--tw-bg-opacity)); } .hero-content { z-index: 0; display: flex; align-items: center; justify-content: center; max-width: 80rem; gap: 1rem; padding: 1rem; } .indicator { position: relative; display: inline-flex; width: fit-content; } .indicator .indicator-item { z-index: 1; position: absolute; right: 0; left: auto; top: 0; bottom: auto; --tw-translate-x: 50%; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator .indicator-item.indicator-start { right: auto; left: 0; --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator .indicator-item.indicator-center { right: 50%; left: 50%; --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator .indicator-item.indicator-end { right: 0; left: auto; --tw-translate-x: 50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator .indicator-item.indicator-bottom { top: auto; bottom: 0; --tw-translate-y: 50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator .indicator-item.indicator-middle { top: 50%; bottom: 50%; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .indicator .indicator-item.indicator-top { top: 0; bottom: auto; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .input { flex-shrink: 1; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: .875rem; line-height: 1.25rem; line-height: 2; border-width: 1px; border-color: hsl(var(--bc) / var(--tw-border-opacity)); --tw-border-opacity: 0; --tw-bg-opacity: 1; background-color: hsl(var(--b1) / var(--tw-bg-opacity)); border-radius: var(--rounded-btn, .5rem); } .input:focus { outline: 2px solid transparent; outline: 2px solid hsla(var(--bc) / .2); outline-offset: 2px; } .input-group { display: flex; width: 100%; align-items: stretch; } .input-group>*,.input-group>.input { border-radius: 0; } .input-group-md { font-size: .875rem; line-height: 1.25rem; line-height: 2; } .input-group-lg { font-size: 1.125rem; line-height: 1.75rem; line-height: 2; } .input-group-sm { font-size: .875rem; line-height: 2rem; } .input-group-xs { font-size: .75rem; line-height: 1rem; line-height: 1.625; } .input-group :where(span) { display: flex; align-items: center; --tw-bg-opacity: 1; background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity)); padding-left: 1rem; padding-right: 1rem; } .input-group :first-child { border-top-left-radius: var(--rounded-btn, .5rem); border-top-right-radius: 0; border-bottom-left-radius: var(--rounded-btn, .5rem); border-bottom-right-radius: 0; } .input-group :last-child { border-top-left-radius: 0; border-top-right-radius: var(--rounded-btn, .5rem); border-bottom-left-radius: 0; border-bottom-right-radius: var(--rounded-btn, .5rem); } .input-group-vertical { flex-direction: column; } .input-group-vertical :first-child { border-top-left-radius: var(--rounded-btn, .5rem); border-top-right-radius: var(--rounded-btn, .5rem); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .input-group-vertical :last-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: var(--rounded-btn, .5rem); border-bottom-right-radius: var(--rounded-btn, .5rem); } .kbd { display: inline-flex; align-items: center; justify-content: center; border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity)); --tw-border-opacity: 0.2; --tw-bg-opacity: 1; background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity)); padding-left: .5rem; padding-right: .5rem; border-radius: var(--rounded-btn, .5rem); border-width: 1px 1px 2px; min-height: 2.2em; min-width: 2.2em; } .link { cursor: pointer; text-decoration-line: underline; } .link-hover { text-decoration-line: none; } .link-hover:hover { text-decoration-line: underline; } .mask { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .mask-half-1 { -webkit-mask-size: 200%; mask-size: 200%; -webkit-mask-position: left; mask-position: left; } .mask-half-2 { -webkit-mask-size: 200%; mask-size: 200%; -webkit-mask-position: right; mask-position: right; } .menu { display: flex; flex-direction: column; } .menu.horizontal { display: inline-flex; flex-direction: row; } .menu.horizontal :where(li) { flex-direction: row; } .menu :where(li) { position: relative; display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; } .menu :where(li:not(.disabled):not(.menu-title))>:where(:not(ul)) { display: flex; cursor: pointer; user-select: none; align-items: center; outline: 2px solid transparent; outline-offset: 2px; } .menu>:where(li>:not(ul):focus) { outline: 2px solid transparent; outline-offset: 2px; } .menu>:where(li.disabled>:not(ul):focus) { cursor: auto; } .menu>:where(li) :where(ul) { display: flex; flex-direction: column; align-items: stretch; } .menu>:where(li)>:where(ul) { position: absolute; display: none; top: auto; left: 100%; border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .menu>:where(li:hover)>:where(ul) { display: flex; } .menu>:where(li:focus)>:where(ul) { display: flex; } .mockup-code { position: relative; overflow: hidden; overflow-x: auto; min-width: 20rem; --tw-bg-opacity: 1; background-color: hsl(var(--n) / var(--tw-bg-opacity)); padding-top: 1.25rem; padding-bottom: 1.25rem; --tw-text-opacity: 1; color: hsl(var(--nc) / var(--tw-text-opacity)); border-radius: var(--rounded-box, 1rem); } .mockup-code pre[data-prefix]:before { content: attr(data-prefix); display: inline-block; text-align: right; width: 2rem; opacity: .5; } .mockup-window { position: relative; overflow: hidden; overflow-x: auto; padding-top: 1.25rem; border-radius: var(--rounded-box, 1rem); } .mockup-window pre[data-prefix]:before { content: attr(data-prefix); display: inline-block; text-align: right; } .modal { pointer-events: none; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; justify-content: center; opacity: 0; z-index: 999; background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity)); --tw-bg-opacity: 0.4; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-property: transform, opacity; overflow-y: hidden; overscroll-behavior: contain; } @media (min-width: 640px) { .modal { align-items:center; } .modal-box { 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-bottom-left-radius: var(--rounded-box, 1rem); border-bottom-right-radius: var(--rounded-box, 1rem); } } .modal-box { max-height: calc(100vh - 5em); width: 100%; --tw-translate-y: 2.5rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-bg-opacity: 1; background-color: hsl(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, backdrop-filter; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); border-top-left-radius: var(--rounded-box, 1rem); border-top-right-radius: var(--rounded-box, 1rem); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); overflow-y: auto; overscroll-behavior: contain; } .modal-open,.modal-toggle:checked+.modal,.modal:target { pointer-events: auto; visibility: visible; opacity: 1; } .modal-action { display: flex; margin-top: 1.5rem; justify-content: flex-end; } .modal-toggle { position: fixed; height: 0; width: 0; appearance: none; opacity: 0; } .navbar { display: flex; align-items: center; padding: var(--navbar-padding, .5rem); min-height: 4rem; width: 100%; } .navbar>* { display: flex; align-items: center; } .navbar-start { width: 50%; justify-content: flex-start; } .navbar-center { flex-shrink: 0; } .navbar-end { width: 50%; justify-content: flex-end; } .progress { position: relative; width: 100%; appearance: none; overflow: hidden; height: .5rem; border-radius: var(--rounded-box, 1rem); } .radial-progress { position: relative; display: inline-grid; aspect-ratio: 1 / 1; height: auto; width: var(--size); place-content: center; border-radius: 9999px; background-color: initial; vertical-align: middle; box-sizing: initial; --value: 0; --size: 5rem; --thickness: calc(var(--size)/10); } .radial-progress::-moz-progress-bar { appearance: none; background-color: initial; } .radial-progress::-webkit-progress-value { appearance: none; background-color: initial; } .radial-progress::-webkit-progress-bar { appearance: none; background-color: initial; } .radial-progress:after,.radial-progress:before { position: absolute; border-radius: 9999px; content: ""; } .radial-progress:before { top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(farthest-side, currentColor 98%, transparent) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor calc(var(--value)*1%), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(99% - var(--thickness)), #000 calc(100% - var(--thickness))); mask: radial-gradient(farthest-side, transparent calc(99% - var(--thickness)), #000 calc(100% - var(--thickness))); } .radial-progress:after { inset: calc(50% - var(--thickness)/2); transform: rotate(calc(var(--value)*3.6deg - 90deg)) translate(calc(var(--size)/2 - 50%)); background-color: currentColor; } .range { height: 1.25rem; width: 100%; cursor: pointer; -webkit-appearance: none; --range-shdw: var(--bc); overflow: hidden; background-color: initial; border-radius: var(--rounded-box, 1rem); } .range:focus { outline: none; } .rating { position: relative; display: inline-flex; } .rating :where(input) { cursor: pointer; animation: rating-pop var(--animation-input, .25s) ease-out; height: 1.5rem; width: 1.5rem; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); --tw-bg-opacity: 1; } .select { display: inline-flex; flex-shrink: 0; cursor: pointer; user-select: none; appearance: none; height: 3rem; padding-left: 1rem; padding-right: 2.5rem; font-size: .875rem; line-height: 1.25rem; line-height: 2; min-height: 3rem; border-width: 1px; border-color: hsl(var(--bc) / var(--tw-border-opacity)); --tw-border-opacity: 0; --tw-bg-opacity: 1; background-color: hsl(var(--b1) / var(--tw-bg-opacity)); font-weight: 600; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); border-radius: var(--rounded-btn, .5rem); background-image: linear-gradient(45deg, transparent 50%, currentColor 0), linear-gradient(135deg, currentColor 50%, transparent 0); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16px) calc(1px + 50%); background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } .select:focus { outline: 2px solid transparent; outline: 2px solid hsla(var(--bc) / .2); outline-offset: 2px; } .select-disabled,.select[disabled] { pointer-events: none; cursor: not-allowed; --tw-border-opacity: 1; border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity)); --tw-text-opacity: 0.2; } .stack { display: inline-grid; place-items: center; align-items: flex-end; } .stack>* { grid-column-start: 1; grid-row-start: 1; transform: translateY(1rem) scale(.9); z-index: 1; width: 100%; opacity: .6; } .stack>:nth-child(2) { transform: translateY(.5rem) scale(.95); z-index: 2; opacity: .8; } .stack>:first-child { transform: translateY(0) scale(1); z-index: 3; opacity: 1; } .stats { display: inline-grid; --tw-bg-opacity: 1; background-color: hsl(var(--b1) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); border-radius: var(--rounded-box, 1rem); } :where(.stats) { grid-auto-flow: column; overflow-x: auto; } .stat { display: inline-grid; width: 100%; grid-template-columns: repeat(1, 1fr); column-gap: 1rem; border-color: hsl(var(--bc) / var(--tw-border-opacity)); --tw-border-opacity: 0.1; padding: 1rem 1.5rem; } .stat-figure { grid-column-start: 2; grid-row: span 3 / span 3; grid-row-start: 1; place-self: center; justify-self: end; } .stat-title { grid-column-start: 1; white-space: nowrap; opacity: .6; } .stat-value { grid-column-start: 1; white-space: nowrap; font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; } .stat-desc { grid-column-start: 1; white-space: nowrap; font-size: .75rem; line-height: 1rem; opacity: .6; } .stat-actions { grid-column-start: 1; white-space: nowrap; margin-top: 1rem; } .steps { display: inline-grid; grid-auto-flow: column; overflow: hidden; overflow-x: auto; counter-reset: step; grid-auto-columns: 1fr; } .steps .step { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: auto; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-rows: 40px 1fr; place-items: center; text-align: center; min-width: 4rem; } .swap { position: relative; display: inline-grid; user-select: none; place-content: center; cursor: pointer; } .swap>* { grid-column-start: 1; grid-row-start: 1; transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .swap input { appearance: none; } .swap .swap-indeterminate,.swap .swap-on,.swap input:indeterminate~.swap-on { opacity: 0; } .swap.swap-active .swap-off,.swap input:checked~.swap-off,.swap input:indeterminate~.swap-off { opacity: 0; } .swap-active .swap-on,.swap input:checked~.swap-on,.swap input:indeterminate~.swap-indeterminate { opacity: 1; } .tabs { display: flex; flex-wrap: wrap; align-items: flex-end; } .tab { position: relative; display: inline-flex; cursor: pointer; user-select: none; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; height: 2rem; font-size: .875rem; line-height: 1.25rem; line-height: 2; --tab-padding: 1rem; --tw-text-opacity: 0.5; --tab-color: hsla(var(--bc) / var(--tw-text-opacity, 1)); --tab-bg: hsla(var(--b1) / var(--tw-bg-opacity, 1)); --tab-border-color: hsla(var(--b3) / var(--tw-bg-opacity, 1)); color: var(--tab-color); padding-left: var(--tab-padding, 1rem); padding-right: var(--tab-padding, 1rem); } .table { position: relative; text-align: left; } .table th:first-child { position: sticky; position: -webkit-sticky; left: 0; z-index: 10; } .textarea { flex-shrink: 1; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); padding: .5rem 1rem; font-size: .875rem; line-height: 1.25rem; line-height: 2; min-height: 3rem; border-width: 1px; border-color: hsl(var(--bc) / var(--tw-border-opacity)); --tw-border-opacity: 0; --tw-bg-opacity: 1; background-color: hsl(var(--b1) / var(--tw-bg-opacity)); border-radius: var(--rounded-btn, .5rem); } .textarea:focus { outline: 2px solid transparent; outline: 2px solid hsla(var(--bc) / .2); outline-offset: 2px; } .toggle { flex-shrink: 0; --chkbg: hsla(var(--bc) / 0.2); --handleoffset: 1.5rem; height: 1.5rem; width: 3rem; cursor: pointer; appearance: none; border-width: 1px; border-color: hsl(var(--bc) / var(--tw-border-opacity)); --tw-border-opacity: 0.2; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); --tw-bg-opacity: 0.2; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); border-radius: var(--rounded-badge, 1.9rem); transition: background, box-shadow var(--animation-input, .2s) ease-in-out; box-shadow: calc(var(--handleoffset)*-1) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset; } .tooltip { position: relative; display: inline-block; --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px)); text-align: center; --tooltip-tail: 3px; --tooltip-color: hsl(var(--n)); --tooltip-text-color: hsl(var(--nc)); --tooltip-tail-offset: calc(100% + 1px - var(--tooltip-tail)); } .tooltip:before { position: absolute; pointer-events: none; content: attr(data-tip); transform: translateX(-50%); top: auto; left: 50%; right: auto; bottom: var(--tooltip-offset); max-width: 20rem; border-radius: .25rem; padding: .25rem .5rem; font-size: .875rem; line-height: 1.25rem; background-color: var(--tooltip-color); color: var(--tooltip-text-color); width: max-content; } .tooltip-bottom:before { transform: translateX(-50%); top: var(--tooltip-offset); left: 50%; right: auto; bottom: auto; } .tooltip-left:before { transform: translateY(-50%); top: 50%; left: auto; right: var(--tooltip-offset); bottom: auto; } .tooltip-right:before { transform: translateY(-50%); top: 50%; left: var(--tooltip-offset); right: auto; bottom: auto; } .avatar-group { display: flex; overflow: hidden; } .avatar-group .avatar { overflow: hidden; border-radius: 9999px; border-width: 4px; --tw-border-opacity: 1; border-color: hsl(var(--b1) / var(--tw-border-opacity)); } .btn-outline .badge { --tw-border-opacity: 1; border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity)); --tw-text-opacity: 1; color: hsl(var(--nc) / var(--tw-text-opacity)); } .btn-outline.btn-primary .badge { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .btn-outline.btn-secondary .badge { --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--s) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--sc) / var(--tw-text-opacity)); } .btn-outline.btn-accent .badge { --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--a) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--ac) / var(--tw-text-opacity)); } .btn-outline .badge.outline { --tw-border-opacity: 1; border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity)); background-color: initial; } .btn-outline.btn-primary .badge-outline { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); background-color: initial; --tw-text-opacity: 1; color: hsl(var(--p) / var(--tw-text-opacity)); } .btn-outline.btn-secondary .badge-outline { --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); background-color: initial; --tw-text-opacity: 1; color: hsl(var(--s) / var(--tw-text-opacity)); } .btn-outline.btn-accent .badge-outline { --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); background-color: initial; --tw-text-opacity: 1; color: hsl(var(--a) / var(--tw-text-opacity)); } .btn-outline:hover .badge { --tw-border-opacity: 1; border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); } .btn-outline:hover .badge.outline { --tw-border-opacity: 1; border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity)); --tw-text-opacity: 1; color: hsl(var(--nc) / var(--tw-text-opacity)); } .btn-outline.btn-primary:hover .badge { --tw-border-opacity: 1; border-color: hsl(var(--pc) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--pc) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--p) / var(--tw-text-opacity)); } .btn-outline.btn-primary:hover .badge.outline { --tw-border-opacity: 1; border-color: hsl(var(--pc) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .btn-outline.btn-secondary:hover .badge { --tw-border-opacity: 1; border-color: hsl(var(--sc) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--sc) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--s) / var(--tw-text-opacity)); } .btn-outline.btn-secondary:hover .badge.outline { --tw-border-opacity: 1; border-color: hsl(var(--sc) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--sc) / var(--tw-text-opacity)); } .btn-outline.btn-accent:hover .badge { --tw-border-opacity: 1; border-color: hsl(var(--ac) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--ac) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--a) / var(--tw-text-opacity)); } .btn-outline.btn-accent:hover .badge.outline { --tw-border-opacity: 1; border-color: hsl(var(--ac) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--ac) / var(--tw-text-opacity)); } .breadcrumbs>ul>li>a:focus { outline: 2px solid transparent; outline-offset: 2px; } .breadcrumbs>ul>li>a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .breadcrumbs>ul>li+:before { content: ""; margin-left: .5rem; margin-right: .75rem; display: block; height: .375rem; width: .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: .4; border-top: 1px solid; border-right: 1px solid; background-color: initial; } .btn:active:focus,.btn:active:hover { animation: none; transform: scale(var(--btn-focus-scale, .95)); } .btn-active,.btn:hover { --tw-border-opacity: 1; border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity)); } .btn:focus-visible { outline: 2px solid hsl(var(--nf)); outline-offset: 2px; } .btn-primary { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .btn-primary.btn-active,.btn-primary:hover { --tw-border-opacity: 1; border-color: hsl(var(--pf, var(--p)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity)); } .btn-primary:focus-visible { outline: 2px solid hsl(var(--p)); } .btn-secondary { --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--s) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--sc) / var(--tw-text-opacity)); } .btn-secondary.btn-active,.btn-secondary:hover { --tw-border-opacity: 1; border-color: hsl(var(--sf, var(--s)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity)); } .btn-secondary:focus-visible { outline: 2px solid hsl(var(--s)); } .btn-accent { --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--a) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--ac) / var(--tw-text-opacity)); } .btn-accent.btn-active,.btn-accent:hover { --tw-border-opacity: 1; border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity)); } .btn-accent:focus-visible { outline: 2px solid hsl(var(--a)); } .btn-info { --tw-border-opacity: 1; border-color: hsl(var(--in) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--in) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity)); } .btn-info.btn-active,.btn-info:hover { --tw-border-opacity: 1; border-color: hsl(var(--in) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--in) / var(--tw-bg-opacity)); } .btn-info:focus-visible { outline: 2px solid hsl(var(--in)); } .btn-success { --tw-border-opacity: 1; border-color: hsl(var(--su) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--su) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity)); } .btn-success.btn-active,.btn-success:hover { --tw-border-opacity: 1; border-color: hsl(var(--su) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--su) / var(--tw-bg-opacity)); } .btn-success:focus-visible { outline: 2px solid hsl(var(--su)); } .btn-warning { --tw-border-opacity: 1; border-color: hsl(var(--wa) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--wa) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity)); } .btn-warning.btn-active,.btn-warning:hover { --tw-border-opacity: 1; border-color: hsl(var(--wa) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--wa) / var(--tw-bg-opacity)); } .btn-warning:focus-visible { outline: 2px solid hsl(var(--wa)); } .btn-error { --tw-border-opacity: 1; border-color: hsl(var(--er) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--er) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity)); } .btn-error.btn-active,.btn-error:hover { --tw-border-opacity: 1; border-color: hsl(var(--er) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--er) / var(--tw-bg-opacity)); } .btn-error:focus-visible { outline: 2px solid hsl(var(--er)); } .btn.glass.btn-active,.btn.glass:hover { --glass-opacity: 25%; --glass-border-opacity: 15%; } .btn.glass:focus-visible { outline: 2px 0 0 2px solid currentColor; } .btn-ghost { border-width: 1px; border-color: transparent; background-color: initial; color: currentColor; } .btn-ghost.btn-active,.btn-ghost:hover { --tw-border-opacity: 0; --tw-bg-opacity: 0.2; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); } .btn-ghost:focus-visible { outline: 2px 0 0 2px solid currentColor; } .btn-link { border-color: transparent; background-color: initial; --tw-text-opacity: 1; color: hsl(var(--p) / var(--tw-text-opacity)); } .btn-link.btn-active,.btn-link:hover { border-color: transparent; background-color: initial; text-decoration-line: underline; } .btn-link:focus-visible { outline: 2px 0 0 2px solid currentColor; } .btn-outline { border-color: currentColor; background-color: initial; --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); } .btn-outline:hover { --tw-border-opacity: 1; border-color: hsl(var(--bc) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--b1) / var(--tw-text-opacity)); } .btn-outline.btn-primary { --tw-text-opacity: 1; color: hsl(var(--p) / var(--tw-text-opacity)); } .btn-outline.btn-primary:hover { --tw-border-opacity: 1; border-color: hsl(var(--pf, var(--p)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .btn-outline.btn-secondary { --tw-text-opacity: 1; color: hsl(var(--s) / var(--tw-text-opacity)); } .btn-outline.btn-secondary:hover { --tw-border-opacity: 1; border-color: hsl(var(--sf, var(--s)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--sc) / var(--tw-text-opacity)); } .btn-outline.btn-accent { --tw-text-opacity: 1; color: hsl(var(--a) / var(--tw-text-opacity)); } .btn-outline.btn-accent:hover { --tw-border-opacity: 1; border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--ac) / var(--tw-text-opacity)); } .btn-outline.btn-success { --tw-text-opacity: 1; color: hsl(var(--su) / var(--tw-text-opacity)); } .btn-outline.btn-success:hover { --tw-border-opacity: 1; border-color: hsl(var(--su) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--su) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity)); } .btn-outline.btn-info { --tw-text-opacity: 1; color: hsl(var(--in) / var(--tw-text-opacity)); } .btn-outline.btn-info:hover { --tw-border-opacity: 1; border-color: hsl(var(--in) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--in) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity)); } .btn-outline.btn-warning { --tw-text-opacity: 1; color: hsl(var(--wa) / var(--tw-text-opacity)); } .btn-outline.btn-warning:hover { --tw-border-opacity: 1; border-color: hsl(var(--wa) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--wa) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity)); } .btn-outline.btn-error { --tw-text-opacity: 1; color: hsl(var(--er) / var(--tw-text-opacity)); } .btn-outline.btn-error:hover { --tw-border-opacity: 1; border-color: hsl(var(--er) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--er) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity)); } .btn.loading.btn-circle:before,.btn.loading.btn-square:before { margin-right: 0; } .btn.loading.btn-lg:before,.btn.loading.btn-xl:before { height: 1.25rem; width: 1.25rem; } .btn.loading.btn-sm:before,.btn.loading.btn-xs:before { height: .75rem; width: .75rem; } .btn-group>.btn-active,.btn-group>input[type=radio]:checked.btn { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .btn-group>.btn-active:focus-visible,.btn-group>input[type=radio]:checked.btn:focus-visible { outline: 2px solid hsl(var(--p)); } .btn-group>.btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-group>.btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } @keyframes button-pop { 0% { transform: scale(var(--btn-focus-scale, .95)); } 40% { transform: scale(1.02); } to { transform: scale(1); } } .card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .card.bordered { border-width: 1px; --tw-border-opacity: 1; border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity)); } .card-bordered { border-width: 1px; --tw-border-opacity: 1; border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity)); } .card.compact .card-body { padding: 1rem; font-size: .875rem; line-height: 1.25rem; } .card-title { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; } .carousel::-webkit-scrollbar { display: none; } .checkbox { --chkbg: var(--bc); --chkfg: var(--b1); height: 1.5rem; width: 1.5rem; cursor: pointer; appearance: none; border-width: 1px; border-color: hsl(var(--bc) / var(--tw-border-opacity)); --tw-border-opacity: 0.2; border-radius: var(--rounded-btn, .5rem); } .checkbox:focus-visible { outline: 2px solid hsl(var(--bc)); outline-offset: 2px; } .checkbox:checked,.checkbox[checked=true] { --tw-bg-opacity: 1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); background-repeat: no-repeat; animation: checkmark var(--animation-input, .2s) ease-in-out; background-image: linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient(45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99%), linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%); } .checkbox:indeterminate { --tw-bg-opacity: 1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); background-repeat: no-repeat; animation: checkmark var(--animation-input, .2s) ease-in-out; background-image: linear-gradient(90deg, transparent 80%, hsl(var(--chkbg)) 0), linear-gradient(-90deg, transparent 80%, hsl(var(--chkbg)) 0), linear-gradient(0deg, hsl(var(--chkbg)) 43%, hsl(var(--chkfg)) 0, hsl(var(--chkfg)) 57%, hsl(var(--chkbg)) 0); } .checkbox-primary { --chkbg: var(--p); --chkfg: var(--pc); --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); } .checkbox-primary:hover { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); } .checkbox-primary:focus-visible { outline: 2px solid hsl(var(--p)); } .checkbox-primary:checked,.checkbox-primary[checked=true] { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .checkbox-secondary { --chkbg: var(--s); --chkfg: var(--sc); --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); } .checkbox-secondary:hover { --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); } .checkbox-secondary:focus-visible { outline: 2px solid hsl(var(--s)); } .checkbox-secondary:checked,.checkbox-secondary[checked=true] { --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--s) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--sc) / var(--tw-text-opacity)); } .checkbox-accent { --chkbg: var(--a); --chkfg: var(--ac); --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); } .checkbox-accent:hover { --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); } .checkbox-accent:focus-visible { outline: 2px solid hsl(var(--a)); } .checkbox-accent:checked,.checkbox-accent[checked=true] { --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--a) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--ac) / var(--tw-text-opacity)); } .checkbox:disabled { cursor: not-allowed; border-color: transparent; --tw-bg-opacity: 1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); opacity: .2; } @keyframes checkmark { 0% { background-position-y: 5px; } 50% { background-position-y: -2px; } to { background-position-y: 0; } } .checkbox-mark { display: none; } .collapse-arrow .collapse-title:after { position: absolute; display: block; height: .5rem; width: .5rem; transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); top: 1.4rem; right: 1.4rem; content: ""; transform-origin: 75% 75%; transform: rotate(45deg); box-shadow: 2px 2px; pointer-events: none; } .collapse-plus .collapse-title:after { position: absolute; display: block; height: .5rem; width: .5rem; transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); top: .9rem; right: 1.4rem; content: "+"; pointer-events: none; } .collapse:not(.collapse-open):not(.collapse-close) .collapse-title,.collapse:not(.collapse-open):not(.collapse-close) input[type=checkbox] { cursor: pointer; } .collapse:focus:not(.collapse-open):not(.collapse-close) .collapse-title { cursor: unset; } .collapse-title,.collapse>input[type=checkbox] { width: 100%; padding: 1rem 3rem 1rem 1rem; min-height: 3.75rem; transition: background-color .2s ease-in-out; } .collapse:not(.collapse-close) input[type=checkbox]:focus~.collapse-title { background-color: hsl(var(--bc) / var(--tw-bg-opacity)); --tw-bg-opacity: 0.1; } .collapse-open .collapse-title,.collapse:focus:not(.collapse-close) .collapse-title,.collapse:not(.collapse-close) input[type=checkbox]:checked~.collapse-title { background-color: hsl(var(--bc) / var(--tw-bg-opacity)); --tw-bg-opacity: 0.1; outline: 2px solid transparent; outline-offset: 2px; } .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,.collapse-arrow:not(.collapse-close) input[type=checkbox]:checked~.collapse-title:after,.collapse-open.collapse-arrow .collapse-title:after { transform: rotate(225deg); } .collapse-open.collapse-plus .collapse-title:after,.collapse-plus:focus:not(.collapse-close) .collapse-title:after,.collapse-plus:not(.collapse-close) input[type=checkbox]:checked~.collapse-title:after { content: "−"; } .divider:before { --tw-bg-opacity: 0.1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); } .divider:after { --tw-bg-opacity: 0.1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); } .divider:not(:empty) { gap: 1rem; } .drawer.drawer-end .drawer-toggle:checked~.drawer-content { --tw-translate-x: -0.5rem; 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)); } .drawer-toggle:checked~.drawer-content { --tw-translate-x: 0.5rem; 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)); } .drawer-toggle:focus-visible~.drawer-content .drawer-button { outline: 2px solid hsl(var(--nf)); outline-offset: 2px; } .drawer-toggle:focus-visible~.drawer-content .drawer-button.btn-primary { outline: 2px solid hsl(var(--p)); } .drawer-toggle:focus-visible~.drawer-content .drawer-button.btn-secondary { outline: 2px solid hsl(var(--s)); } .drawer-toggle:focus-visible~.drawer-content .drawer-button.btn-accent { outline: 2px solid hsl(var(--a)); } .drawer-toggle:focus-visible~.drawer-content .drawer-button.btn-info { outline: 2px solid hsl(var(--in)); } .drawer-toggle:focus-visible~.drawer-content .drawer-button.btn-success { outline: 2px solid hsl(var(--su)); } .drawer-toggle:focus-visible~.drawer-content .drawer-button.btn-warning { outline: 2px solid hsl(var(--wa)); } .drawer-toggle:focus-visible~.drawer-content .drawer-button.btn-error { outline: 2px solid hsl(var(--er)); } .drawer-toggle:focus-visible~.drawer-content .drawer-button.glass { outline: 2px solid currentColor; } .drawer-toggle:focus-visible~.drawer-content .drawer-button.btn-ghost { outline: 2px solid currentColor; } .drawer-toggle:focus-visible~.drawer-content .drawer-button.btn-link { outline: 2px solid currentColor; } .dropdown.dropdown-hover:hover .dropdown-content,.dropdown.dropdown-open .dropdown-content,.dropdown:focus-within .dropdown-content,.dropdown:focus .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)); } .footer-title { margin-bottom: .5rem; font-weight: 700; text-transform: uppercase; opacity: .5; } .label-text { font-size: .875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); } .label-text-alt { font-size: .75rem; line-height: 1rem; --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); } .label a:hover { --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); } .input-bordered { --tw-border-opacity: 0.2; } .input-ghost { --tw-bg-opacity: 0.05; } .input-ghost:focus { --tw-bg-opacity: 1; --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); box-shadow: none; } .input-primary { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); } .input-primary:focus { outline: 2px solid hsl(var(--p)); } .input-secondary { --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); } .input-secondary:focus { outline: 2px solid hsl(var(--s)); } .input-accent { --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); } .input-accent:focus { outline: 2px solid hsl(var(--a)); } .input-info { --tw-border-opacity: 1; border-color: hsl(var(--in) / var(--tw-border-opacity)); } .input-info:focus { outline: 2px solid hsl(var(--in)); } .input-success { --tw-border-opacity: 1; border-color: hsl(var(--su) / var(--tw-border-opacity)); } .input-success:focus { outline: 2px solid hsl(var(--su)); } .input-warning { --tw-border-opacity: 1; border-color: hsl(var(--wa) / var(--tw-border-opacity)); } .input-warning:focus { outline: 2px solid hsl(var(--wa)); } .input-error { --tw-border-opacity: 1; border-color: hsl(var(--er) / var(--tw-border-opacity)); } .input-error:focus { outline: 2px solid hsl(var(--er)); } .input-disabled,.input[disabled] { cursor: not-allowed; --tw-border-opacity: 1; border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity)); --tw-text-opacity: 0.2; } .input-disabled::placeholder,.input[disabled]::placeholder { --tw-placeholder-opacity: 0.2; color: hsl(var(--bc) / var(--tw-placeholder-opacity)); } .link-primary { --tw-text-opacity: 1; color: hsl(var(--p) / var(--tw-text-opacity)); } .link-primary:hover { --tw-text-opacity: 1; color: hsl(var(--pf, var(--p)) / var(--tw-text-opacity)); } .link-secondary { --tw-text-opacity: 1; color: hsl(var(--s) / var(--tw-text-opacity)); } .link-secondary:hover { --tw-text-opacity: 1; color: hsl(var(--sf, var(--s)) / var(--tw-text-opacity)); } .link-accent { --tw-text-opacity: 1; color: hsl(var(--a) / var(--tw-text-opacity)); } .link-accent:hover { --tw-text-opacity: 1; color: hsl(var(--af, var(--a)) / var(--tw-text-opacity)); } .link-neutral { --tw-text-opacity: 1; color: hsl(var(--n) / var(--tw-text-opacity)); } .link-neutral:hover { --tw-text-opacity: 1; color: hsl(var(--nf, var(--n)) / var(--tw-text-opacity)); } .link:focus { outline: 2px solid transparent; outline-offset: 2px; } .link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .mask-squircle { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==); } .mask-decagon { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); } .mask-diamond { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); } .mask-heart { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDE4NC42MDZhMTUuMzg0IDE1LjM4NCAwIDAxLTguNjUzLTIuNjc4QzUzLjU2NSAxNTYuMjggMzcuMjA1IDEzOC42OTUgMjguMTgyIDEyNy43IDguOTUyIDEwNC4yNjQtLjI1NCA4MC4yMDIuMDA1IDU0LjE0Ni4zMDggMjQuMjg3IDI0LjI2NCAwIDUzLjQwNiAwYzIxLjE5MiAwIDM1Ljg2OSAxMS45MzcgNDQuNDE2IDIxLjg3OWEyLjg4NCAyLjg4NCAwIDAwNC4zNTYgMEMxMTAuNzI1IDExLjkyNyAxMjUuNDAyIDAgMTQ2LjU5NCAwYzI5LjE0MiAwIDUzLjA5OCAyNC4yODcgNTMuNCA1NC4xNTEuMjYgMjYuMDYxLTguOTU2IDUwLjEyMi0yOC4xNzYgNzMuNTU0LTkuMDIzIDEwLjk5NC0yNS4zODMgMjguNTgtNjMuMTY1IDU0LjIyOGExNS4zODQgMTUuMzg0IDAgMDEtOC42NTMgMi42NzN6Ii8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDE4NC42MDZhMTUuMzg0IDE1LjM4NCAwIDAxLTguNjUzLTIuNjc4QzUzLjU2NSAxNTYuMjggMzcuMjA1IDEzOC42OTUgMjguMTgyIDEyNy43IDguOTUyIDEwNC4yNjQtLjI1NCA4MC4yMDIuMDA1IDU0LjE0Ni4zMDggMjQuMjg3IDI0LjI2NCAwIDUzLjQwNiAwYzIxLjE5MiAwIDM1Ljg2OSAxMS45MzcgNDQuNDE2IDIxLjg3OWEyLjg4NCAyLjg4NCAwIDAwNC4zNTYgMEMxMTAuNzI1IDExLjkyNyAxMjUuNDAyIDAgMTQ2LjU5NCAwYzI5LjE0MiAwIDUzLjA5OCAyNC4yODcgNTMuNCA1NC4xNTEuMjYgMjYuMDYxLTguOTU2IDUwLjEyMi0yOC4xNzYgNzMuNTU0LTkuMDIzIDEwLjk5NC0yNS4zODMgMjguNTgtNjMuMTY1IDU0LjIyOGExNS4zODQgMTUuMzg0IDAgMDEtOC42NTMgMi42NzN6Ii8+PC9zdmc+); } .mask-hexagon { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=); } .mask-hexagon-2 { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+); } .mask-circle { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjEwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjEwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); } .mask-parallelogram { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNDYuMTU0IDBIMjAwbC00Ni4xNTQgMTUzLjg0NkgweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNDYuMTU0IDBIMjAwbC00Ni4xNTQgMTUzLjg0NkgweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); } .mask-parallelogram-2 { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTUzLjg0NiAwSDBsNDYuMTU0IDE1My44NDZIMjAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTUzLjg0NiAwSDBsNDYuMTU0IDE1My44NDZIMjAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); } .mask-parallelogram-3 { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU0IiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjA3NyA0Ny4wNzd2MTUzLjg0NmwxNTMuODQ2LTQ2LjE1NFYuOTIzeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU0IiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjA3NyA0Ny4wNzd2MTUzLjg0NmwxNTMuODQ2LTQ2LjE1NFYuOTIzeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); } .mask-parallelogram-4 { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU0IiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTUzLjkyMyA0Ny4wNzd2MTUzLjg0NkwuMDc3IDE1NC43N1YuOTIzeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU0IiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTUzLjkyMyA0Ny4wNzd2MTUzLjg0NkwuMDc3IDE1NC43N1YuOTIzeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); } .mask-pentagon { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjE4MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw5NS4xMDYgNjkuMDk4LTM2LjMyNyAxMTEuODA0SDM3LjIyTC44OTQgNjkuMDk4eiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjE4MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw5NS4xMDYgNjkuMDk4LTM2LjMyNyAxMTEuODA0SDM3LjIyTC44OTQgNjkuMDk4eiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); } .mask-square { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwaDIwMHYyMDBIMHoiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwaDIwMHYyMDBIMHoiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==); } .mask-star { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjE4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMTM3LjI2M2wtNTguNzc5IDQyLjAyNCAyMi4xNjMtNjguMzg5TC44OTQgNjguNDgxbDcyLjQ3Ni0uMjQzTDk2IDBsMjIuNjMgNjguMjM4IDcyLjQ3Ni4yNDMtNTguNDkgNDIuNDE3IDIyLjE2MyA2OC4zODl6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjE4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMTM3LjI2M2wtNTguNzc5IDQyLjAyNCAyMi4xNjMtNjguMzg5TC44OTQgNjguNDgxbDcyLjQ3Ni0uMjQzTDk2IDBsMjIuNjMgNjguMjM4IDcyLjQ3Ni4yNDMtNTguNDkgNDIuNDE3IDIyLjE2MyA2OC4zODl6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); } .mask-star-2 { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjE4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMTUzLjA0NGwtNTguNzc5IDI2LjI0MyA3LjAyLTYzLjUxM0wuODk0IDY4LjQ4MWw2My4xMTctMTMuMDFMOTYgMGwzMS45ODkgNTUuNDcyIDYzLjExNyAxMy4wMS00My4zNDcgNDcuMjkyIDcuMDIgNjMuNTEzeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjE4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMTUzLjA0NGwtNTguNzc5IDI2LjI0MyA3LjAyLTYzLjUxM0wuODk0IDY4LjQ4MWw2My4xMTctMTMuMDFMOTYgMGwzMS45ODkgNTUuNDcyIDYzLjExNyAxMy4wMS00My4zNDcgNDcuMjkyIDcuMDIgNjMuNTEzeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); } .mask-triangle { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc0IiBoZWlnaHQ9IjE0OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODcgMTQ4LjQ3NmwtODYuNjAzLjE4NUw0My44NiA3NC40MjMgODcgMGw0My4xNCA3NC40MjMgNDMuNDYzIDc0LjIzOHoiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc0IiBoZWlnaHQ9IjE0OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODcgMTQ4LjQ3NmwtODYuNjAzLjE4NUw0My44NiA3NC40MjMgODcgMGw0My4xNCA3NC40MjMgNDMuNDYzIDc0LjIzOHoiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==); } .mask-triangle-2 { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc0IiBoZWlnaHQ9IjE1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODcgLjczOGw4Ni42MDMtLjE4NC00My40NjMgNzQuMjM4TDg3IDE0OS4yMTQgNDMuODYgNzQuNzkyLjM5Ny41NTR6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc0IiBoZWlnaHQ9IjE1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODcgLjczOGw4Ni42MDMtLjE4NC00My40NjMgNzQuMjM4TDg3IDE0OS4yMTQgNDMuODYgNzQuNzkyLjM5Ny41NTR6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); } .mask-triangle-3 { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQ5LjM2OSA4Ny4xMDdsLjE4NSA4Ni42MDMtNzQuMjM5LTQzLjQ2M0wuODkzIDg3LjEwN2w3NC40MjItNDMuMTRMMTQ5LjU1NC41MDV6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQ5LjM2OSA4Ny4xMDdsLjE4NSA4Ni42MDMtNzQuMjM5LTQzLjQ2M0wuODkzIDg3LjEwN2w3NC40MjItNDMuMTRMMTQ5LjU1NC41MDV6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); } .mask-triangle-4 { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjYzMSA4Ny4xMDdMLjQ0Ni41MDVsNzQuMjM5IDQzLjQ2MiA3NC40MjIgNDMuMTQtNzQuNDIyIDQzLjE0TC40NDYgMTczLjcxeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE3NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjYzMSA4Ny4xMDdMLjQ0Ni41MDVsNzQuMjM5IDQzLjQ2MiA3NC40MjIgNDMuMTQtNzQuNDIyIDQzLjE0TC40NDYgMTczLjcxeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); } .menu.horizontal li.bordered>a,.menu.horizontal li.bordered>button,.menu.horizontal li.bordered>span { border-left-width: 0; border-bottom-width: 4px; --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); } .menu[class*=p-] li *,.menu[class*=p-] li button { border-radius: var(--rounded-btn, .5rem); } .menu :where(li.bordered>*) { border-left-width: 4px; --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); } .menu :where(li)>:where(:not(ul)) { gap: .75rem; padding: .75rem 1rem; color: currentColor; } .menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul):focus),.menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul):hover) { --tw-bg-opacity: 0.1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); } .menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul).active),.menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul):active) { --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .menu :where(li:empty) { margin: .5rem 1rem; height: 1px; --tw-bg-opacity: 0.1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); } .menu li.disabled>* { user-select: none; --tw-text-opacity: 0.2; color: hsl(var(--bc) / var(--tw-text-opacity)); } .menu li.disabled>:hover { background-color: initial; } .menu li.hover-bordered a { border-left-width: 4px; border-color: transparent; } .menu li.hover-bordered a:hover { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); } .menu.compact li>a,.menu.compact li>span { padding-top: .5rem; padding-bottom: .5rem; font-size: .875rem; line-height: 1.25rem; } .menu .menu-title>* { padding-top: .25rem; padding-bottom: .25rem; font-size: .75rem; line-height: 1rem; font-weight: 700; --tw-text-opacity: 0.4; color: hsl(var(--bc) / var(--tw-text-opacity)); } .menu :where(li:not(.disabled))>:where(:not(ul)) { outline: 2px solid transparent; outline-offset: 2px; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .menu>:where(li:first-child) { border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-right-radius: unset; border-bottom-left-radius: unset; } .menu>:where(li:first-child)>:where(:not(ul)) { border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-right-radius: unset; border-bottom-left-radius: unset; } .menu>:where(li:last-child) { border-top-left-radius: unset; border-top-right-radius: unset; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .menu>:where(li:last-child)>:where(:not(ul)) { border-top-left-radius: unset; border-top-right-radius: unset; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .menu>:where(li)>:where(ul) :where(li) { width: 100%; white-space: nowrap; } .menu>:where(li)>:where(ul) :where(li) :where(ul) { padding-left: 1rem; } .menu>:where(li)>:where(ul) :where(li) :where(:not(ul)) { width: 100%; white-space: nowrap; } .menu>:where(li)>:where(ul)>:where(li:first-child) { border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-right-radius: unset; border-bottom-left-radius: unset; } .menu>:where(li)>:where(ul)>:where(li:first-child)>:where(:not(ul)) { border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-right-radius: unset; border-bottom-left-radius: unset; } .menu>:where(li)>:where(ul)>:where(li:last-child) { border-top-left-radius: unset; border-top-right-radius: unset; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .menu>:where(li)>:where(ul)>:where(li:last-child)>:where(:not(ul)) { border-top-left-radius: unset; border-top-right-radius: unset; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .mockup-code:before { content: ""; margin-bottom: 1rem; display: block; height: .75rem; width: .75rem; border-radius: 9999px; opacity: .3; box-shadow: 1.4em 0,2.8em 0,4.2em 0; } .mockup-code pre { padding-right: 1.25rem; } .mockup-code pre:before { content: ""; margin-right: 2ch; } .mockup-window:before { content: ""; margin-bottom: 1rem; display: block; height: .75rem; width: .75rem; border-radius: 9999px; opacity: .3; box-shadow: 1.4em 0,2.8em 0,4.2em 0; } .mockup-phone { display: inline-block; border: 4px solid #444; border-radius: 50px; background-color: #000; padding: 10px; margin: 0 auto; overflow: hidden; } .mockup-phone .camera { position: relative; top: 0; left: 0; background: #000; height: 25px; width: 150px; margin: 0 auto; border-bottom-left-radius: 17px; border-bottom-right-radius: 17px; z-index: 11; } .mockup-phone .camera:before { content: ""; position: absolute; top: 35%; left: 50%; width: 50px; height: 4px; border-radius: 5px; background-color: #0c0b0e; transform: translate(-50%, -50%); } .mockup-phone .camera:after { content: ""; position: absolute; top: 20%; left: 70%; width: 8px; height: 8px; border-radius: 5px; background-color: #0f0b25; } .mockup-phone .display { overflow: hidden; border-radius: 40px; margin-top: -25px; } .modal-open .modal-box,.modal-toggle:checked+.modal .modal-box,.modal:target .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)); } .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*(1 - var(--tw-space-x-reverse))); } .progress::-moz-progress-bar { --tw-bg-opacity: 1; background-color: hsl(var(--n) / var(--tw-bg-opacity)); } .progress-primary::-moz-progress-bar { --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); } .progress-secondary::-moz-progress-bar { --tw-bg-opacity: 1; background-color: hsl(var(--s) / var(--tw-bg-opacity)); } .progress-accent::-moz-progress-bar { --tw-bg-opacity: 1; background-color: hsl(var(--a) / var(--tw-bg-opacity)); } .progress-info::-moz-progress-bar { --tw-bg-opacity: 1; background-color: hsl(var(--in) / var(--tw-bg-opacity)); } .progress-success::-moz-progress-bar { --tw-bg-opacity: 1; background-color: hsl(var(--su) / var(--tw-bg-opacity)); } .progress-warning::-moz-progress-bar { --tw-bg-opacity: 1; background-color: hsl(var(--wa) / var(--tw-bg-opacity)); } .progress-error::-moz-progress-bar { --tw-bg-opacity: 1; background-color: hsl(var(--er) / var(--tw-bg-opacity)); } .progress::-webkit-progress-bar { --tw-bg-opacity: 0.2; background-color: hsl(var(--n) / var(--tw-bg-opacity)); border-radius: var(--rounded-box, 1rem); } .progress::-webkit-progress-value { --tw-bg-opacity: 1; background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity)); border-radius: var(--rounded-box, 1rem); } .progress-primary::-webkit-progress-value { --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); } .progress-secondary::-webkit-progress-value { --tw-bg-opacity: 1; background-color: hsl(var(--s) / var(--tw-bg-opacity)); } .progress-accent::-webkit-progress-value { --tw-bg-opacity: 1; background-color: hsl(var(--a) / var(--tw-bg-opacity)); } .progress-info::-webkit-progress-value { --tw-bg-opacity: 1; background-color: hsl(var(--in) / var(--tw-bg-opacity)); } .progress-success::-webkit-progress-value { --tw-bg-opacity: 1; background-color: hsl(var(--su) / var(--tw-bg-opacity)); } .progress-warning::-webkit-progress-value { --tw-bg-opacity: 1; background-color: hsl(var(--wa) / var(--tw-bg-opacity)); } .progress-error::-webkit-progress-value { --tw-bg-opacity: 1; background-color: hsl(var(--er) / var(--tw-bg-opacity)); } .radio { --chkbg: var(--bc); height: 1.5rem; width: 1.5rem; cursor: pointer; appearance: none; border-radius: 9999px; border-width: 1px; border-color: hsl(var(--bc) / var(--tw-border-opacity)); --tw-border-opacity: 0.2; transition: background, box-shadow var(--animation-input, .2s) ease-in-out; } .radio:focus-visible { outline: 2px solid hsl(var(--bc)); outline-offset: 2px; } .radio:checked { --tw-bg-opacity: 1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); animation: radiomark var(--animation-input, .2s) ease-in-out; box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset; } .radio-primary { --chkbg: var(--p); --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); } .radio-primary:hover { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); } .radio-primary:focus-visible { outline: 2px solid hsl(var(--p)); } .radio-primary:checked { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .radio-secondary { --chkbg: var(--s); --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); } .radio-secondary:hover { --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); } .radio-secondary:focus-visible { outline: 2px solid hsl(var(--s)); } .radio-secondary:checked { --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--s) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--sc) / var(--tw-text-opacity)); } .radio-accent { --chkbg: var(--a); --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); } .radio-accent:hover { --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); } .radio-accent:focus-visible { outline: 2px solid hsl(var(--a)); } .radio-accent:checked { --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--a) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--ac) / var(--tw-text-opacity)); } .radio:disabled { cursor: not-allowed; opacity: .2; } @keyframes radiomark { 0% { box-shadow: 0 0 0 12px hsl(var(--b1)) inset, 0 0 0 12px hsl(var(--b1)) inset; } 50% { box-shadow: 0 0 0 3px hsl(var(--b1)) inset, 0 0 0 3px hsl(var(--b1)) inset; } to { box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset; } } .radio-mark { display: none; } .range:focus-visible::-webkit-slider-thumb { --focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset; } .range:focus-visible::-moz-range-thumb { --focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset; } .range::-webkit-slider-runnable-track { height: .5rem; width: 100%; border-radius: var(--rounded-box, 1rem); background-color: hsla(var(--bc) / .1); } .range::-moz-range-track { height: .5rem; width: 100%; border-radius: var(--rounded-box, 1rem); background-color: hsla(var(--bc) / .1); } .range::-webkit-slider-thumb { background-color: hsl(var(--b1)); position: relative; height: 1.25rem; width: 1.25rem; border-style: none; -webkit-transition-property: all; transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); border-radius: var(--rounded-box, 1rem); -webkit-appearance: none; top: 50%; color: hsl(var(--range-shdw)); transform: translateY(-50%); --filler-size: 100rem; --filler-offset: .6rem; box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow,0 0), calc(var(--filler-size)*-1 - var(--filler-offset)) 0 0 var(--filler-size); } .range::-moz-range-thumb { background-color: hsl(var(--b1)); position: relative; height: 1.25rem; width: 1.25rem; border-style: none; -moz-transition-property: all; transition-property: all; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); border-radius: var(--rounded-box, 1rem); top: 50%; color: hsl(var(--range-shdw)); --filler-size: 100rem; --filler-offset: .5rem; box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow,0 0), calc(var(--filler-size)*-1 - var(--filler-offset)) 0 0 var(--filler-size); } .range-primary { --range-shdw: var(--p); } .range-secondary { --range-shdw: var(--s); } .range-accent { --range-shdw: var(--a); } .rating input { appearance: none; -webkit-appearance: none; } .rating .rating-hidden { width: .5rem; background-color: initial; } .rating input:checked~input { --tw-bg-opacity: 0.2; } .rating input:focus-visible { transition-property: transform; transition-duration: .3s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transform: translateY(-.125em); } .rating input:active:focus { animation: none; transform: translateY(-.125em); } .rating-half :where(input:not(.rating-hidden)) { width: .75rem; } @keyframes rating-pop { 0% { transform: translateY(-.125em); } 40% { transform: translateY(-.125em); } to { transform: translateY(0); } } .select-bordered { --tw-border-opacity: 0.2; } .select-ghost { --tw-bg-opacity: 0.05; } .select-ghost:focus { --tw-bg-opacity: 1; --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); } .select-primary { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); } .select-primary:focus { outline: 2px solid hsl(var(--p)); } .select-secondary { --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); } .select-secondary:focus { outline: 2px solid hsl(var(--s)); } .select-accent { --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); } .select-accent:focus { outline: 2px solid hsl(var(--a)); } .select-info { --tw-border-opacity: 1; border-color: hsl(var(--in) / var(--tw-border-opacity)); } .select-info:focus { outline: 2px solid hsl(var(--in)); } .select-success { --tw-border-opacity: 1; border-color: hsl(var(--su) / var(--tw-border-opacity)); } .select-success:focus { outline: 2px solid hsl(var(--su)); } .select-warning { --tw-border-opacity: 1; border-color: hsl(var(--wa) / var(--tw-border-opacity)); } .select-warning:focus { outline: 2px solid hsl(var(--wa)); } .select-error { --tw-border-opacity: 1; border-color: hsl(var(--er) / var(--tw-border-opacity)); } .select-error:focus { outline: 2px solid hsl(var(--er)); } .select-disabled::placeholder,.select[disabled]::placeholder { --tw-placeholder-opacity: 0.2; color: hsl(var(--bc) / var(--tw-placeholder-opacity)); } .select-multiple,.select[multiple],.select[size].select:not([size="1"]) { background-image: none; padding-right: 1rem; } :where(.stats)>:not([hidden])~:not([hidden]) { --tw-divide-x-reverse: 0; --tw-divide-y-reverse: 0; border-width: calc(0px*(1 - var(--tw-divide-y-reverse))) calc(1px*var(--tw-divide-x-reverse)) calc(0px*var(--tw-divide-y-reverse)) calc(1px*(1 - var(--tw-divide-x-reverse))); } .steps .step:before { top: 0; grid-column-start: 1; grid-row-start: 1; height: .5rem; width: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-bg-opacity: 1; background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); content: ""; margin-left: -100%; } .steps .step:after { content: counter(step); counter-increment: step; z-index: 1; position: relative; grid-column-start: 1; grid-row-start: 1; display: grid; height: 2rem; width: 2rem; place-items: center; place-self: center; border-radius: 9999px; --tw-bg-opacity: 1; background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); } .steps .step:first-child:before { content: none; } .steps .step[data-content]:after { content: attr(data-content); } .steps .step-neutral+.step-neutral:before,.steps .step-neutral:after { --tw-bg-opacity: 1; background-color: hsl(var(--n) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--nc) / var(--tw-text-opacity)); } .steps .step-primary+.step-primary:before,.steps .step-primary:after { --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .steps .step-secondary+.step-secondary:before,.steps .step-secondary:after { --tw-bg-opacity: 1; background-color: hsl(var(--s) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--sc) / var(--tw-text-opacity)); } .steps .step-accent+.step-accent:before,.steps .step-accent:after { --tw-bg-opacity: 1; background-color: hsl(var(--a) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--ac) / var(--tw-text-opacity)); } .steps .step-info+.step-info:before { --tw-bg-opacity: 1; background-color: hsl(var(--in) / var(--tw-bg-opacity)); } .steps .step-info:after { --tw-bg-opacity: 1; background-color: hsl(var(--in) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity)); } .steps .step-success+.step-success:before { --tw-bg-opacity: 1; background-color: hsl(var(--su) / var(--tw-bg-opacity)); } .steps .step-success:after { --tw-bg-opacity: 1; background-color: hsl(var(--su) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity)); } .steps .step-warning+.step-warning:before { --tw-bg-opacity: 1; background-color: hsl(var(--wa) / var(--tw-bg-opacity)); } .steps .step-warning:after { --tw-bg-opacity: 1; background-color: hsl(var(--wa) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity)); } .steps .step-error+.step-error:before { --tw-bg-opacity: 1; background-color: hsl(var(--er) / var(--tw-bg-opacity)); } .steps .step-error:after { --tw-bg-opacity: 1; background-color: hsl(var(--er) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity)); } .swap-rotate .swap-indeterminate,.swap-rotate .swap-on,.swap-rotate input:indeterminate~.swap-on { --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)); } .swap-rotate.swap-active .swap-off,.swap-rotate input:checked~.swap-off,.swap-rotate input:indeterminate~.swap-off { --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)); } .swap-rotate.swap-active .swap-on,.swap-rotate input:checked~.swap-on,.swap-rotate input:indeterminate~.swap-indeterminate { --tw-rotate: 0deg; 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)); } .swap-flip { transform-style: preserve-3d; perspective: 16em; } .swap-flip .swap-indeterminate,.swap-flip .swap-on,.swap-flip input:indeterminate~.swap-on { transform: rotateY(180deg); backface-visibility: hidden; opacity: 1; } .swap-flip.swap-active .swap-off,.swap-flip input:checked~.swap-off,.swap-flip input:indeterminate~.swap-off { transform: rotateY(-180deg); backface-visibility: hidden; opacity: 1; } .swap-flip.swap-active .swap-on,.swap-flip input:checked~.swap-on,.swap-flip input:indeterminate~.swap-indeterminate { transform: rotateY(0deg); } .tab:hover { --tw-text-opacity: 1; } .tab.tab-active { border-color: hsl(var(--bc) / var(--tw-border-opacity)); --tw-border-opacity: 1; --tw-text-opacity: 1; } .tab:focus { outline: 2px solid transparent; outline-offset: 2px; } .tab:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; border-bottom-right-radius: var(--tab-radius, .5rem); border-bottom-left-radius: var(--tab-radius, .5rem); } .tab-bordered { border-color: hsl(var(--bc) / var(--tw-border-opacity)); --tw-border-opacity: 0.2; border-bottom: calc(var(--tab-border, 1px) + 1px) hsl(var(--bc) / var(--tw-border-opacity)); border-style: solid; } .tab-lifted { border-top-left-radius: var(--tab-radius, .5rem); border-top-right-radius: var(--tab-radius, .5rem); border: 0 solid transparent; border-bottom: var(--tab-border, 1px) solid var(--tab-border-color); padding-left: var(--tab-padding, 1rem); padding-right: var(--tab-padding, 1rem); padding-top: var(--tab-border, 1px); } .tab-lifted.tab-active { background-color: var(--tab-bg); border-left-width: var(--tab-border, 1px); border-bottom-width: 0; border-right-width: var(--tab-border, 1px); border-top-width: var(--tab-border, 1px); border-left-color: var(--tab-border-color); border-right-color: var(--tab-border-color); border-top-color: var(--tab-border-color); padding-left: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px)); padding-right: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px)); padding-bottom: var(--tab-border, 1px); padding-top: 0; } .tab-lifted.tab-active:after,.tab-lifted.tab-active:before { z-index: 1; content: ""; display: block; position: absolute; width: var(--tab-radius, .5rem); height: var(--tab-radius, .5rem); bottom: 0; --tab-grad: calc(68% - var(--tab-border, 1px)); --tab-corner-bg: radial-gradient(circle at var(--circle-pos), transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.3px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)); } .tab-lifted.tab-active:before { left: calc(var(--tab-radius, .5rem)*-1); --circle-pos: top left; background-image: var(--tab-corner-bg); } [dir=rtl] .tab-lifted.tab-active:before { --circle-pos: top right; } .tab-lifted.tab-active:after { right: calc(var(--tab-radius, .5rem)*-1); --circle-pos: top right; background-image: var(--tab-corner-bg); } [dir=rtl] .tab-lifted.tab-active:after { --circle-pos: top left; } .tab-lifted.tab-active:first-child:before { background: none; } .tab-lifted.tab-active:last-child:after { background: none; } .tab-lifted.tab-active+.tab-lifted.tab-active:before { background: none; } .tabs-boxed { --tw-bg-opacity: 1; background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity)); padding: .25rem; border-radius: var(--rounded-btn, .5rem); } .tabs-boxed .tab-active { --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); border-radius: var(--rounded-btn, .5rem); } .tabs-boxed .tab-active:hover { --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .table :where(th,td) { white-space: nowrap; padding: 1rem; vertical-align: middle; } .table tr.active:nth-child(2n) td,.table tr.active:nth-child(2n) th,.table tr.active td,.table tr.active th { --tw-bg-opacity: 1; background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity)); } .table tr.hover:hover td,.table tr.hover:hover th,.table tr.hover:nth-child(2n):hover td,.table tr.hover:nth-child(2n):hover th { --tw-bg-opacity: 1; background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity)); } .table:where(:not(.table-zebra)) :where(thead,tbody,tfoot) :where(tr:not(:last-child) :where(th,td)) { border-bottom-width: 1px; --tw-border-opacity: 1; border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity)); } .table :where(thead,tfoot) :where(th,td) { --tw-bg-opacity: 1; background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity)); font-size: .75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; } .table :where(thead,tfoot) :where(th,td):first-child { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; } .table :where(thead,tfoot) :where(th,td):last-child { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; } .table :where(tbody th,tbody td) { --tw-bg-opacity: 1; background-color: hsl(var(--b1) / var(--tw-bg-opacity)); } .table-zebra tbody tr td:first-child,.table-zebra tbody tr th:first-child { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; } .table-zebra tbody tr td:last-child,.table-zebra tbody tr th:last-child { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; } .table-zebra tbody tr:nth-child(2n) td,.table-zebra tbody tr:nth-child(2n) th { --tw-bg-opacity: 1; background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity)); } .textarea-bordered { --tw-border-opacity: 0.2; } .textarea-ghost { --tw-bg-opacity: 0.05; } .textarea-ghost:focus { --tw-bg-opacity: 1; --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); box-shadow: none; } .textarea-primary { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); } .textarea-primary:focus { outline: 2px solid hsl(var(--p)); } .textarea-secondary { --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); } .textarea-secondary:focus { outline: 2px solid hsl(var(--s)); } .textarea-accent { --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); } .textarea-accent:focus { outline: 2px solid hsl(var(--a)); } .textarea-info { --tw-border-opacity: 1; border-color: hsl(var(--in) / var(--tw-border-opacity)); } .textarea-info:focus { outline: 2px solid hsl(var(--in)); } .textarea-success { --tw-border-opacity: 1; border-color: hsl(var(--su) / var(--tw-border-opacity)); } .textarea-success:focus { outline: 2px solid hsl(var(--su)); } .textarea-warning { --tw-border-opacity: 1; border-color: hsl(var(--wa) / var(--tw-border-opacity)); } .textarea-warning:focus { outline: 2px solid hsl(var(--wa)); } .textarea-error { --tw-border-opacity: 1; border-color: hsl(var(--er) / var(--tw-border-opacity)); } .textarea-error:focus { outline: 2px solid hsl(var(--er)); } .textarea-disabled,.textarea[disabled] { cursor: not-allowed; --tw-border-opacity: 1; border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity)); --tw-text-opacity: 0.2; } .textarea-disabled::placeholder,.textarea[disabled]::placeholder { --tw-placeholder-opacity: 0.2; color: hsl(var(--bc) / var(--tw-placeholder-opacity)); } .toggle:focus-visible { outline: 2px solid hsl(var(--bc)); outline-offset: 2px; } .toggle:checked,.toggle[checked=true] { --chkbg: hsl(var(--bc)); --tw-border-opacity: 1; --tw-bg-opacity: 1; box-shadow: var(--handleoffset) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset; } [dir=rtl] .toggle:checked,[dir=rtl] .toggle[checked=true] { box-shadow: calc(var(--handleoffset)*1) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset; } .toggle:indeterminate { --chkbg: hsl(var(--bc)); --tw-border-opacity: 1; --tw-bg-opacity: 1; box-shadow: calc(var(--handleoffset)/2) 0 0 2px hsl(var(--b1)) inset, calc(var(--handleoffset)/-2) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset; } [dir=rtl] .toggle:indeterminate { box-shadow: calc(var(--handleoffset)/2) 0 0 2px hsl(var(--b1)) inset, calc(var(--handleoffset)/-2) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset; } .toggle-primary:focus-visible { outline: 2px solid hsl(var(--p)); } .toggle-primary:checked,.toggle-primary[checked=true] { --chkbg: hsl(var(--p)); --tw-border-opacity: 0.1; border-color: hsl(var(--p) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .toggle-secondary:focus-visible { outline: 2px solid hsl(var(--s)); } .toggle-secondary:checked,.toggle-secondary[checked=true] { --chkbg: hsl(var(--s)); --tw-border-opacity: 0.1; border-color: hsl(var(--s) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--s) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--sc) / var(--tw-text-opacity)); } .toggle-accent:focus-visible { outline: 2px solid hsl(var(--a)); } .toggle-accent:checked,.toggle-accent[checked=true] { --chkbg: hsl(var(--a)); --tw-border-opacity: 0.1; border-color: hsl(var(--a) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--a) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--ac) / var(--tw-text-opacity)); } .toggle:disabled { cursor: not-allowed; border-color: transparent; --tw-bg-opacity: 0.2; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); } .toggle-mark { display: none; } .tooltip:after,.tooltip:before { opacity: 0; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-delay: .1s; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .tooltip:after { position: absolute; content: ""; width: 0; height: 0; display: block; transform: translateX(-50%); border: var(--tooltip-tail, 0) solid transparent; border-top: var(--tooltip-tail, 0) solid var(--tooltip-color); top: auto; left: 50%; right: auto; bottom: var(--tooltip-tail-offset); } .tooltip.tooltip-open:after,.tooltip.tooltip-open:before,.tooltip:hover:after,.tooltip:hover:before { opacity: 1; transition-delay: 75ms; } .tooltip-bottom:after { transform: translateX(-50%); border-left-color: transparent; border-bottom-color: var(--tooltip-color); border-right-color: transparent; border-top-color: transparent; top: var(--tooltip-tail-offset); left: 50%; right: auto; bottom: auto; } .tooltip-left:after { transform: translateY(-50%); border-left-color: var(--tooltip-color); border-bottom-color: transparent; border-right-color: transparent; border-top-color: transparent; top: 50%; left: auto; right: calc(var(--tooltip-tail-offset) + 1px); bottom: auto; } .tooltip-right:after { transform: translateY(-50%); border-left-color: transparent; border-bottom-color: transparent; border-right-color: var(--tooltip-color); border-top-color: transparent; top: 50%; left: calc(var(--tooltip-tail-offset) + 1px); right: auto; bottom: auto; } .tooltip-primary { --tooltip-color: hsl(var(--p)); --tooltip-text-color: hsl(var(--pc)); } .tooltip-secondary { --tooltip-color: hsl(var(--s)); --tooltip-text-color: hsl(var(--sc)); } .tooltip-accent { --tooltip-color: hsl(var(--a)); --tooltip-text-color: hsl(var(--ac)); } .tooltip-info { --tooltip-color: hsla(var(--in)); --tooltip-text-color: hsl(var(--inc)); } .tooltip-success { --tooltip-color: hsla(var(--su)); --tooltip-text-color: hsl(var(--suc)); } .tooltip-warning { --tooltip-color: hsla(var(--wa)); --tooltip-text-color: hsl(var(--wac)); } .tooltip-error { --tooltip-color: hsla(var(--er)); --tooltip-text-color: hsl(var(--erc)); } :root .prose { --tw-prose-body: hsl(var(--bc)); --tw-prose-headings: hsl(var(--b)); --tw-prose-lead: #4b5563; --tw-prose-links: hsl(var(--b)); --tw-prose-bold: hsl(var(--b)); --tw-prose-counters: #6b7280; --tw-prose-bullets: hsla(var(--bc)/.5); --tw-prose-hr: hsla(var(--bc)/.2); --tw-prose-quotes: hsl(var(--b)); --tw-prose-quote-borders: hsla(var(--bc)/.2); --tw-prose-captions: #6b7280; --tw-prose-code: hsl(var(--b)); --tw-prose-pre-code: hsla(var(--bc)/.2); --tw-prose-pre-bg: #1f2937; --tw-prose-th-borders: hsla(var(--bc)/.5); --tw-prose-td-borders: hsla(var(--bc)/.2); --tw-prose-invert-body: hsla(var(--bc)/.5); --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: hsl(var(--bc)); --tw-prose-invert-quotes: #f3f4f6; --tw-prose-invert-quote-borders: hsl(var(--bc)); --tw-prose-invert-captions: #9ca3af; --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: hsla(var(--bc)/.5); --tw-prose-invert-pre-bg: rgba(0, 0, 0, 0.5) ); --tw-prose-invert-th-borders: #4b5563; --tw-prose-invert-td-borders: hsl(var(--bc)); } .prose { color: inherit; } .prose :where(code):not(:where([class~=not-prose] *)) { padding: 2px 8px; border-radius: var(--rounded-badge); } .prose code:after,.prose code:before { content: none; } .prose pre code { border-radius: none; background: inherit; padding: 0; color: inherit; } .prose blockquote { border-left-color: hsl(var(--bc) / 40%); } .prose :where(ul>li,ol>li):not(:where([class~=not-prose] *))::marker { color: hsl(var(--bc) / 40%); } .prose :where(thead th,tbody td):not(:where([class~=not-prose] *)) { color: inherit; } .prose :where(tbody tr,thead):not(:where([class~=not-prose] *)) { border-bottom-color: hsl(var(--bc) / 20%); } .animate-none { animation: none; } @keyframes spin { to { transform: rotate(1turn); } } .animate-spin { animation: spin 1s linear infinite; } @keyframes ping { 75%,to { transform: scale(2); opacity: 0; } } .animate-ping { animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite; } @keyframes pulse { 50% { opacity: .5; } } .animate-pulse { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes bounce { 0%,to { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1); } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,.2,1); } } .animate-bounce { animation: bounce 1s infinite; } .divide-transparent>:not([hidden])~:not([hidden]) { border-color: transparent; } .divide-current>:not([hidden])~:not([hidden]) { border-color: currentColor; } .divide-primary>:not([hidden])~:not([hidden]) { border-color: hsl(var(--p)); } .divide-primary-focus>:not([hidden])~:not([hidden]) { border-color: hsl(var(--pf, var(--p))); } .divide-primary-content>:not([hidden])~:not([hidden]) { border-color: hsl(var(--pc)); } .divide-secondary>:not([hidden])~:not([hidden]) { border-color: hsl(var(--s)); } .divide-secondary-focus>:not([hidden])~:not([hidden]) { border-color: hsl(var(--sf, var(--s))); } .divide-secondary-content>:not([hidden])~:not([hidden]) { border-color: hsl(var(--sc)); } .divide-accent>:not([hidden])~:not([hidden]) { border-color: hsl(var(--a)); } .divide-accent-focus>:not([hidden])~:not([hidden]) { border-color: hsl(var(--af, var(--a))); } .divide-accent-content>:not([hidden])~:not([hidden]) { border-color: hsl(var(--ac)); } .divide-neutral>:not([hidden])~:not([hidden]) { border-color: hsl(var(--n)); } .divide-neutral-focus>:not([hidden])~:not([hidden]) { border-color: hsl(var(--nf, var(--n))); } .divide-neutral-content>:not([hidden])~:not([hidden]) { border-color: hsl(var(--nc)); } .divide-base-100>:not([hidden])~:not([hidden]) { border-color: hsl(var(--b1)); } .divide-base-200>:not([hidden])~:not([hidden]) { border-color: hsl(var(--b2, var(--b1))); } .divide-base-300>:not([hidden])~:not([hidden]) { border-color: hsl(var(--b3, var(--b2))); } .divide-base-content>:not([hidden])~:not([hidden]) { border-color: hsl(var(--bc)); } .divide-info>:not([hidden])~:not([hidden]) { border-color: hsl(var(--in)); } .divide-info-content>:not([hidden])~:not([hidden]) { border-color: hsl(var(--inc, var(--nc))); } .divide-success>:not([hidden])~:not([hidden]) { border-color: hsl(var(--su)); } .divide-success-content>:not([hidden])~:not([hidden]) { border-color: hsl(var(--suc, var(--nc))); } .divide-warning>:not([hidden])~:not([hidden]) { border-color: hsl(var(--wa)); } .divide-warning-content>:not([hidden])~:not([hidden]) { border-color: hsl(var(--wac, var(--nc))); } .divide-error>:not([hidden])~:not([hidden]) { border-color: hsl(var(--er)); } .divide-error-content>:not([hidden])~:not([hidden]) { border-color: hsl(var(--erc, var(--nc))); } .border-transparent { border-color: transparent; } .border-current { border-color: currentColor; } .border-primary { border-color: hsl(var(--p)); } .border-primary-focus { border-color: hsl(var(--pf, var(--p))); } .border-primary-content { border-color: hsl(var(--pc)); } .border-secondary { border-color: hsl(var(--s)); } .border-secondary-focus { border-color: hsl(var(--sf, var(--s))); } .border-secondary-content { border-color: hsl(var(--sc)); } .border-accent { border-color: hsl(var(--a)); } .border-accent-focus { border-color: hsl(var(--af, var(--a))); } .border-accent-content { border-color: hsl(var(--ac)); } .border-neutral { border-color: hsl(var(--n)); } .border-neutral-focus { border-color: hsl(var(--nf, var(--n))); } .border-neutral-content { border-color: hsl(var(--nc)); } .border-base-100 { border-color: hsl(var(--b1)); } .border-base-200 { border-color: hsl(var(--b2, var(--b1))); } .border-base-300 { border-color: hsl(var(--b3, var(--b2))); } .border-base-content { border-color: hsl(var(--bc)); } .border-info { border-color: hsl(var(--in)); } .border-info-content { border-color: hsl(var(--inc, var(--nc))); } .border-success { border-color: hsl(var(--su)); } .border-success-content { border-color: hsl(var(--suc, var(--nc))); } .border-warning { border-color: hsl(var(--wa)); } .border-warning-content { border-color: hsl(var(--wac, var(--nc))); } .border-error { border-color: hsl(var(--er)); } .border-error-content { border-color: hsl(var(--erc, var(--nc))); } .border-x-transparent { border-left-color: transparent; border-right-color: transparent; } .border-x-current { border-left-color: initial; border-right-color: initial; } .border-x-primary { border-left-color: hsl(var(--p)); border-right-color: hsl(var(--p)); } .border-x-primary-focus { border-left-color: hsl(var(--pf, var(--p))); border-right-color: hsl(var(--pf, var(--p))); } .border-x-primary-content { border-left-color: hsl(var(--pc)); border-right-color: hsl(var(--pc)); } .border-x-secondary { border-left-color: hsl(var(--s)); border-right-color: hsl(var(--s)); } .border-x-secondary-focus { border-left-color: hsl(var(--sf, var(--s))); border-right-color: hsl(var(--sf, var(--s))); } .border-x-secondary-content { border-left-color: hsl(var(--sc)); border-right-color: hsl(var(--sc)); } .border-x-accent { border-left-color: hsl(var(--a)); border-right-color: hsl(var(--a)); } .border-x-accent-focus { border-left-color: hsl(var(--af, var(--a))); border-right-color: hsl(var(--af, var(--a))); } .border-x-accent-content { border-left-color: hsl(var(--ac)); border-right-color: hsl(var(--ac)); } .border-x-neutral { border-left-color: hsl(var(--n)); border-right-color: hsl(var(--n)); } .border-x-neutral-focus { border-left-color: hsl(var(--nf, var(--n))); border-right-color: hsl(var(--nf, var(--n))); } .border-x-neutral-content { border-left-color: hsl(var(--nc)); border-right-color: hsl(var(--nc)); } .border-x-base-100 { border-left-color: hsl(var(--b1)); border-right-color: hsl(var(--b1)); } .border-x-base-200 { border-left-color: hsl(var(--b2, var(--b1))); border-right-color: hsl(var(--b2, var(--b1))); } .border-x-base-300 { border-left-color: hsl(var(--b3, var(--b2))); border-right-color: hsl(var(--b3, var(--b2))); } .border-x-base-content { border-left-color: hsl(var(--bc)); border-right-color: hsl(var(--bc)); } .border-x-info { border-left-color: hsl(var(--in)); border-right-color: hsl(var(--in)); } .border-x-info-content { border-left-color: hsl(var(--inc, var(--nc))); border-right-color: hsl(var(--inc, var(--nc))); } .border-x-success { border-left-color: hsl(var(--su)); border-right-color: hsl(var(--su)); } .border-x-success-content { border-left-color: hsl(var(--suc, var(--nc))); border-right-color: hsl(var(--suc, var(--nc))); } .border-x-warning { border-left-color: hsl(var(--wa)); border-right-color: hsl(var(--wa)); } .border-x-warning-content { border-left-color: hsl(var(--wac, var(--nc))); border-right-color: hsl(var(--wac, var(--nc))); } .border-x-error { border-left-color: hsl(var(--er)); border-right-color: hsl(var(--er)); } .border-x-error-content { border-left-color: hsl(var(--erc, var(--nc))); border-right-color: hsl(var(--erc, var(--nc))); } .border-y-transparent { border-top-color: transparent; border-bottom-color: transparent; } .border-y-current { border-top-color: initial; border-bottom-color: initial; } .border-y-primary { border-top-color: hsl(var(--p)); border-bottom-color: hsl(var(--p)); } .border-y-primary-focus { border-top-color: hsl(var(--pf, var(--p))); border-bottom-color: hsl(var(--pf, var(--p))); } .border-y-primary-content { border-top-color: hsl(var(--pc)); border-bottom-color: hsl(var(--pc)); } .border-y-secondary { border-top-color: hsl(var(--s)); border-bottom-color: hsl(var(--s)); } .border-y-secondary-focus { border-top-color: hsl(var(--sf, var(--s))); border-bottom-color: hsl(var(--sf, var(--s))); } .border-y-secondary-content { border-top-color: hsl(var(--sc)); border-bottom-color: hsl(var(--sc)); } .border-y-accent { border-top-color: hsl(var(--a)); border-bottom-color: hsl(var(--a)); } .border-y-accent-focus { border-top-color: hsl(var(--af, var(--a))); border-bottom-color: hsl(var(--af, var(--a))); } .border-y-accent-content { border-top-color: hsl(var(--ac)); border-bottom-color: hsl(var(--ac)); } .border-y-neutral { border-top-color: hsl(var(--n)); border-bottom-color: hsl(var(--n)); } .border-y-neutral-focus { border-top-color: hsl(var(--nf, var(--n))); border-bottom-color: hsl(var(--nf, var(--n))); } .border-y-neutral-content { border-top-color: hsl(var(--nc)); border-bottom-color: hsl(var(--nc)); } .border-y-base-100 { border-top-color: hsl(var(--b1)); border-bottom-color: hsl(var(--b1)); } .border-y-base-200 { border-top-color: hsl(var(--b2, var(--b1))); border-bottom-color: hsl(var(--b2, var(--b1))); } .border-y-base-300 { border-top-color: hsl(var(--b3, var(--b2))); border-bottom-color: hsl(var(--b3, var(--b2))); } .border-y-base-content { border-top-color: hsl(var(--bc)); border-bottom-color: hsl(var(--bc)); } .border-y-info { border-top-color: hsl(var(--in)); border-bottom-color: hsl(var(--in)); } .border-y-info-content { border-top-color: hsl(var(--inc, var(--nc))); border-bottom-color: hsl(var(--inc, var(--nc))); } .border-y-success { border-top-color: hsl(var(--su)); border-bottom-color: hsl(var(--su)); } .border-y-success-content { border-top-color: hsl(var(--suc, var(--nc))); border-bottom-color: hsl(var(--suc, var(--nc))); } .border-y-warning { border-top-color: hsl(var(--wa)); border-bottom-color: hsl(var(--wa)); } .border-y-warning-content { border-top-color: hsl(var(--wac, var(--nc))); border-bottom-color: hsl(var(--wac, var(--nc))); } .border-y-error { border-top-color: hsl(var(--er)); border-bottom-color: hsl(var(--er)); } .border-y-error-content { border-top-color: hsl(var(--erc, var(--nc))); border-bottom-color: hsl(var(--erc, var(--nc))); } .border-t-transparent { border-top-color: transparent; } .border-t-current { border-top-color: initial; } .border-t-primary { border-top-color: hsl(var(--p)); } .border-t-primary-focus { border-top-color: hsl(var(--pf, var(--p))); } .border-t-primary-content { border-top-color: hsl(var(--pc)); } .border-t-secondary { border-top-color: hsl(var(--s)); } .border-t-secondary-focus { border-top-color: hsl(var(--sf, var(--s))); } .border-t-secondary-content { border-top-color: hsl(var(--sc)); } .border-t-accent { border-top-color: hsl(var(--a)); } .border-t-accent-focus { border-top-color: hsl(var(--af, var(--a))); } .border-t-accent-content { border-top-color: hsl(var(--ac)); } .border-t-neutral { border-top-color: hsl(var(--n)); } .border-t-neutral-focus { border-top-color: hsl(var(--nf, var(--n))); } .border-t-neutral-content { border-top-color: hsl(var(--nc)); } .border-t-base-100 { border-top-color: hsl(var(--b1)); } .border-t-base-200 { border-top-color: hsl(var(--b2, var(--b1))); } .border-t-base-300 { border-top-color: hsl(var(--b3, var(--b2))); } .border-t-base-content { border-top-color: hsl(var(--bc)); } .border-t-info { border-top-color: hsl(var(--in)); } .border-t-info-content { border-top-color: hsl(var(--inc, var(--nc))); } .border-t-success { border-top-color: hsl(var(--su)); } .border-t-success-content { border-top-color: hsl(var(--suc, var(--nc))); } .border-t-warning { border-top-color: hsl(var(--wa)); } .border-t-warning-content { border-top-color: hsl(var(--wac, var(--nc))); } .border-t-error { border-top-color: hsl(var(--er)); } .border-t-error-content { border-top-color: hsl(var(--erc, var(--nc))); } .border-r-transparent { border-right-color: transparent; } .border-r-current { border-right-color: initial; } .border-r-primary { border-right-color: hsl(var(--p)); } .border-r-primary-focus { border-right-color: hsl(var(--pf, var(--p))); } .border-r-primary-content { border-right-color: hsl(var(--pc)); } .border-r-secondary { border-right-color: hsl(var(--s)); } .border-r-secondary-focus { border-right-color: hsl(var(--sf, var(--s))); } .border-r-secondary-content { border-right-color: hsl(var(--sc)); } .border-r-accent { border-right-color: hsl(var(--a)); } .border-r-accent-focus { border-right-color: hsl(var(--af, var(--a))); } .border-r-accent-content { border-right-color: hsl(var(--ac)); } .border-r-neutral { border-right-color: hsl(var(--n)); } .border-r-neutral-focus { border-right-color: hsl(var(--nf, var(--n))); } .border-r-neutral-content { border-right-color: hsl(var(--nc)); } .border-r-base-100 { border-right-color: hsl(var(--b1)); } .border-r-base-200 { border-right-color: hsl(var(--b2, var(--b1))); } .border-r-base-300 { border-right-color: hsl(var(--b3, var(--b2))); } .border-r-base-content { border-right-color: hsl(var(--bc)); } .border-r-info { border-right-color: hsl(var(--in)); } .border-r-info-content { border-right-color: hsl(var(--inc, var(--nc))); } .border-r-success { border-right-color: hsl(var(--su)); } .border-r-success-content { border-right-color: hsl(var(--suc, var(--nc))); } .border-r-warning { border-right-color: hsl(var(--wa)); } .border-r-warning-content { border-right-color: hsl(var(--wac, var(--nc))); } .border-r-error { border-right-color: hsl(var(--er)); } .border-r-error-content { border-right-color: hsl(var(--erc, var(--nc))); } .border-b-transparent { border-bottom-color: transparent; } .border-b-current { border-bottom-color: initial; } .border-b-primary { border-bottom-color: hsl(var(--p)); } .border-b-primary-focus { border-bottom-color: hsl(var(--pf, var(--p))); } .border-b-primary-content { border-bottom-color: hsl(var(--pc)); } .border-b-secondary { border-bottom-color: hsl(var(--s)); } .border-b-secondary-focus { border-bottom-color: hsl(var(--sf, var(--s))); } .border-b-secondary-content { border-bottom-color: hsl(var(--sc)); } .border-b-accent { border-bottom-color: hsl(var(--a)); } .border-b-accent-focus { border-bottom-color: hsl(var(--af, var(--a))); } .border-b-accent-content { border-bottom-color: hsl(var(--ac)); } .border-b-neutral { border-bottom-color: hsl(var(--n)); } .border-b-neutral-focus { border-bottom-color: hsl(var(--nf, var(--n))); } .border-b-neutral-content { border-bottom-color: hsl(var(--nc)); } .border-b-base-100 { border-bottom-color: hsl(var(--b1)); } .border-b-base-200 { border-bottom-color: hsl(var(--b2, var(--b1))); } .border-b-base-300 { border-bottom-color: hsl(var(--b3, var(--b2))); } .border-b-base-content { border-bottom-color: hsl(var(--bc)); } .border-b-info { border-bottom-color: hsl(var(--in)); } .border-b-info-content { border-bottom-color: hsl(var(--inc, var(--nc))); } .border-b-success { border-bottom-color: hsl(var(--su)); } .border-b-success-content { border-bottom-color: hsl(var(--suc, var(--nc))); } .border-b-warning { border-bottom-color: hsl(var(--wa)); } .border-b-warning-content { border-bottom-color: hsl(var(--wac, var(--nc))); } .border-b-error { border-bottom-color: hsl(var(--er)); } .border-b-error-content { border-bottom-color: hsl(var(--erc, var(--nc))); } .border-l-transparent { border-left-color: transparent; } .border-l-current { border-left-color: initial; } .border-l-primary { border-left-color: hsl(var(--p)); } .border-l-primary-focus { border-left-color: hsl(var(--pf, var(--p))); } .border-l-primary-content { border-left-color: hsl(var(--pc)); } .border-l-secondary { border-left-color: hsl(var(--s)); } .border-l-secondary-focus { border-left-color: hsl(var(--sf, var(--s))); } .border-l-secondary-content { border-left-color: hsl(var(--sc)); } .border-l-accent { border-left-color: hsl(var(--a)); } .border-l-accent-focus { border-left-color: hsl(var(--af, var(--a))); } .border-l-accent-content { border-left-color: hsl(var(--ac)); } .border-l-neutral { border-left-color: hsl(var(--n)); } .border-l-neutral-focus { border-left-color: hsl(var(--nf, var(--n))); } .border-l-neutral-content { border-left-color: hsl(var(--nc)); } .border-l-base-100 { border-left-color: hsl(var(--b1)); } .border-l-base-200 { border-left-color: hsl(var(--b2, var(--b1))); } .border-l-base-300 { border-left-color: hsl(var(--b3, var(--b2))); } .border-l-base-content { border-left-color: hsl(var(--bc)); } .border-l-info { border-left-color: hsl(var(--in)); } .border-l-info-content { border-left-color: hsl(var(--inc, var(--nc))); } .border-l-success { border-left-color: hsl(var(--su)); } .border-l-success-content { border-left-color: hsl(var(--suc, var(--nc))); } .border-l-warning { border-left-color: hsl(var(--wa)); } .border-l-warning-content { border-left-color: hsl(var(--wac, var(--nc))); } .border-l-error { border-left-color: hsl(var(--er)); } .border-l-error-content { border-left-color: hsl(var(--erc, var(--nc))); } .bg-transparent { background-color: initial; } .bg-current { background-color: currentColor; } .bg-primary { background-color: hsl(var(--p)); } .bg-primary-focus { background-color: hsl(var(--pf, var(--p))); } .bg-primary-content { background-color: hsl(var(--pc)); } .bg-secondary { background-color: hsl(var(--s)); } .bg-secondary-focus { background-color: hsl(var(--sf, var(--s))); } .bg-secondary-content { background-color: hsl(var(--sc)); } .bg-accent { background-color: hsl(var(--a)); } .bg-accent-focus { background-color: hsl(var(--af, var(--a))); } .bg-accent-content { background-color: hsl(var(--ac)); } .bg-neutral { background-color: hsl(var(--n)); } .bg-neutral-focus { background-color: hsl(var(--nf, var(--n))); } .bg-neutral-content { background-color: hsl(var(--nc)); } .bg-base-100 { background-color: hsl(var(--b1)); } .bg-base-200 { background-color: hsl(var(--b2, var(--b1))); } .bg-base-300 { background-color: hsl(var(--b3, var(--b2))); } .bg-base-content { background-color: hsl(var(--bc)); } .bg-info { background-color: hsl(var(--in)); } .bg-info-content { background-color: hsl(var(--inc, var(--nc))); } .bg-success { background-color: hsl(var(--su)); } .bg-success-content { background-color: hsl(var(--suc, var(--nc))); } .bg-warning { background-color: hsl(var(--wa)); } .bg-warning-content { background-color: hsl(var(--wac, var(--nc))); } .bg-error { background-color: hsl(var(--er)); } .bg-error-content { background-color: hsl(var(--erc, var(--nc))); } .bg-none { background-image: none; } .bg-gradient-to-t { background-image: linear-gradient(0deg, var(--tw-gradient-stops)); } .bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); } .bg-gradient-to-r { background-image: linear-gradient(90deg, var(--tw-gradient-stops)); } .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } .bg-gradient-to-b { background-image: linear-gradient(180deg, var(--tw-gradient-stops)); } .bg-gradient-to-bl { background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)); } .bg-gradient-to-l { background-image: linear-gradient(270deg, var(--tw-gradient-stops)); } .bg-gradient-to-tl { background-image: linear-gradient(to top left, var(--tw-gradient-stops)); } .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); } .from-current { --tw-gradient-from: currentColor; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsla(0, 0%, 100%, 0)); } .from-primary { --tw-gradient-from: hsl(var(--p)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--p) / 0)); } .from-primary-focus { --tw-gradient-from: hsl(var(--pf, var(--p))); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--pf, var(--p)) / 0)); } .from-primary-content { --tw-gradient-from: hsl(var(--pc)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--pc) / 0)); } .from-secondary { --tw-gradient-from: hsl(var(--s)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--s) / 0)); } .from-secondary-focus { --tw-gradient-from: hsl(var(--sf, var(--s))); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--sf, var(--s)) / 0)); } .from-secondary-content { --tw-gradient-from: hsl(var(--sc)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--sc) / 0)); } .from-accent { --tw-gradient-from: hsl(var(--a)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--a) / 0)); } .from-accent-focus { --tw-gradient-from: hsl(var(--af, var(--a))); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--af, var(--a)) / 0)); } .from-accent-content { --tw-gradient-from: hsl(var(--ac)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--ac) / 0)); } .from-neutral { --tw-gradient-from: hsl(var(--n)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--n) / 0)); } .from-neutral-focus { --tw-gradient-from: hsl(var(--nf, var(--n))); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--nf, var(--n)) / 0)); } .from-neutral-content { --tw-gradient-from: hsl(var(--nc)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--nc) / 0)); } .from-base-100 { --tw-gradient-from: hsl(var(--b1)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--b1) / 0)); } .from-base-200 { --tw-gradient-from: hsl(var(--b2, var(--b1))); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--b2, var(--b1)) / 0)); } .from-base-300 { --tw-gradient-from: hsl(var(--b3, var(--b2))); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--b3, var(--b2)) / 0)); } .from-base-content { --tw-gradient-from: hsl(var(--bc)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--bc) / 0)); } .from-info { --tw-gradient-from: hsl(var(--in)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--in) / 0)); } .from-info-content { --tw-gradient-from: hsl(var(--inc, var(--nc))); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--inc, var(--nc)) / 0)); } .from-success { --tw-gradient-from: hsl(var(--su)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--su) / 0)); } .from-success-content { --tw-gradient-from: hsl(var(--suc, var(--nc))); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--suc, var(--nc)) / 0)); } .from-warning { --tw-gradient-from: hsl(var(--wa)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--wa) / 0)); } .from-warning-content { --tw-gradient-from: hsl(var(--wac, var(--nc))); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--wac, var(--nc)) / 0)); } .from-error { --tw-gradient-from: hsl(var(--er)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--er) / 0)); } .from-error-content { --tw-gradient-from: hsl(var(--erc, var(--nc))); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--erc, var(--nc)) / 0)); } .via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, transparent); } .via-current { --tw-gradient-stops: var(--tw-gradient-from), currentColor, var(--tw-gradient-to, hsla(0, 0%, 100%, 0)); } .via-primary { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--p)), var(--tw-gradient-to, hsl(var(--p) / 0)); } .via-primary-focus { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--pf, var(--p))), var(--tw-gradient-to, hsl(var(--pf, var(--p)) / 0)); } .via-primary-content { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--pc)), var(--tw-gradient-to, hsl(var(--pc) / 0)); } .via-secondary { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--s)), var(--tw-gradient-to, hsl(var(--s) / 0)); } .via-secondary-focus { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--sf, var(--s))), var(--tw-gradient-to, hsl(var(--sf, var(--s)) / 0)); } .via-secondary-content { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--sc)), var(--tw-gradient-to, hsl(var(--sc) / 0)); } .via-accent { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--a)), var(--tw-gradient-to, hsl(var(--a) / 0)); } .via-accent-focus { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--af, var(--a))), var(--tw-gradient-to, hsl(var(--af, var(--a)) / 0)); } .via-accent-content { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--ac)), var(--tw-gradient-to, hsl(var(--ac) / 0)); } .via-neutral { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--n)), var(--tw-gradient-to, hsl(var(--n) / 0)); } .via-neutral-focus { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--nf, var(--n))), var(--tw-gradient-to, hsl(var(--nf, var(--n)) / 0)); } .via-neutral-content { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--nc)), var(--tw-gradient-to, hsl(var(--nc) / 0)); } .via-base-100 { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--b1)), var(--tw-gradient-to, hsl(var(--b1) / 0)); } .via-base-200 { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--b2, var(--b1))), var(--tw-gradient-to, hsl(var(--b2, var(--b1)) / 0)); } .via-base-300 { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--b3, var(--b2))), var(--tw-gradient-to, hsl(var(--b3, var(--b2)) / 0)); } .via-base-content { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--bc)), var(--tw-gradient-to, hsl(var(--bc) / 0)); } .via-info { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--in)), var(--tw-gradient-to, hsl(var(--in) / 0)); } .via-info-content { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--inc, var(--nc))), var(--tw-gradient-to, hsl(var(--inc, var(--nc)) / 0)); } .via-success { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--su)), var(--tw-gradient-to, hsl(var(--su) / 0)); } .via-success-content { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--suc, var(--nc))), var(--tw-gradient-to, hsl(var(--suc, var(--nc)) / 0)); } .via-warning { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--wa)), var(--tw-gradient-to, hsl(var(--wa) / 0)); } .via-warning-content { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--wac, var(--nc))), var(--tw-gradient-to, hsl(var(--wac, var(--nc)) / 0)); } .via-error { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--er)), var(--tw-gradient-to, hsl(var(--er) / 0)); } .via-error-content { --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--erc, var(--nc))), var(--tw-gradient-to, hsl(var(--erc, var(--nc)) / 0)); } .to-transparent { --tw-gradient-to: transparent; } .to-current { --tw-gradient-to: currentColor; } .to-primary { --tw-gradient-to: hsl(var(--p)); } .to-primary-focus { --tw-gradient-to: hsl(var(--pf, var(--p))); } .to-primary-content { --tw-gradient-to: hsl(var(--pc)); } .to-secondary { --tw-gradient-to: hsl(var(--s)); } .to-secondary-focus { --tw-gradient-to: hsl(var(--sf, var(--s))); } .to-secondary-content { --tw-gradient-to: hsl(var(--sc)); } .to-accent { --tw-gradient-to: hsl(var(--a)); } .to-accent-focus { --tw-gradient-to: hsl(var(--af, var(--a))); } .to-accent-content { --tw-gradient-to: hsl(var(--ac)); } .to-neutral { --tw-gradient-to: hsl(var(--n)); } .to-neutral-focus { --tw-gradient-to: hsl(var(--nf, var(--n))); } .to-neutral-content { --tw-gradient-to: hsl(var(--nc)); } .to-base-100 { --tw-gradient-to: hsl(var(--b1)); } .to-base-200 { --tw-gradient-to: hsl(var(--b2, var(--b1))); } .to-base-300 { --tw-gradient-to: hsl(var(--b3, var(--b2))); } .to-base-content { --tw-gradient-to: hsl(var(--bc)); } .to-info { --tw-gradient-to: hsl(var(--in)); } .to-info-content { --tw-gradient-to: hsl(var(--inc, var(--nc))); } .to-success { --tw-gradient-to: hsl(var(--su)); } .to-success-content { --tw-gradient-to: hsl(var(--suc, var(--nc))); } .to-warning { --tw-gradient-to: hsl(var(--wa)); } .to-warning-content { --tw-gradient-to: hsl(var(--wac, var(--nc))); } .to-error { --tw-gradient-to: hsl(var(--er)); } .to-error-content { --tw-gradient-to: hsl(var(--erc, var(--nc))); } .text-transparent { color: transparent; } .text-current { color: currentColor; } .text-primary { color: hsl(var(--p)); } .text-primary-focus { color: hsl(var(--pf, var(--p))); } .text-primary-content { color: hsl(var(--pc)); } .text-secondary { color: hsl(var(--s)); } .text-secondary-focus { color: hsl(var(--sf, var(--s))); } .text-secondary-content { color: hsl(var(--sc)); } .text-accent { color: hsl(var(--a)); } .text-accent-focus { color: hsl(var(--af, var(--a))); } .text-accent-content { color: hsl(var(--ac)); } .text-neutral { color: hsl(var(--n)); } .text-neutral-focus { color: hsl(var(--nf, var(--n))); } .text-neutral-content { color: hsl(var(--nc)); } .text-base-100 { color: hsl(var(--b1)); } .text-base-200 { color: hsl(var(--b2, var(--b1))); } .text-base-300 { color: hsl(var(--b3, var(--b2))); } .text-base-content { color: hsl(var(--bc)); } .text-info { color: hsl(var(--in)); } .text-info-content { color: hsl(var(--inc, var(--nc))); } .text-success { color: hsl(var(--su)); } .text-success-content { color: hsl(var(--suc, var(--nc))); } .text-warning { color: hsl(var(--wa)); } .text-warning-content { color: hsl(var(--wac, var(--nc))); } .text-error { color: hsl(var(--er)); } .text-error-content { color: hsl(var(--erc, var(--nc))); } .placeholder-transparent::placeholder { color: transparent; } .placeholder-current::placeholder { color: currentColor; } .placeholder-primary::placeholder { color: hsl(var(--p)); } .placeholder-primary-focus::placeholder { color: hsl(var(--pf, var(--p))); } .placeholder-primary-content::placeholder { color: hsl(var(--pc)); } .placeholder-secondary::placeholder { color: hsl(var(--s)); } .placeholder-secondary-focus::placeholder { color: hsl(var(--sf, var(--s))); } .placeholder-secondary-content::placeholder { color: hsl(var(--sc)); } .placeholder-accent::placeholder { color: hsl(var(--a)); } .placeholder-accent-focus::placeholder { color: hsl(var(--af, var(--a))); } .placeholder-accent-content::placeholder { color: hsl(var(--ac)); } .placeholder-neutral::placeholder { color: hsl(var(--n)); } .placeholder-neutral-focus::placeholder { color: hsl(var(--nf, var(--n))); } .placeholder-neutral-content::placeholder { color: hsl(var(--nc)); } .placeholder-base-100::placeholder { color: hsl(var(--b1)); } .placeholder-base-200::placeholder { color: hsl(var(--b2, var(--b1))); } .placeholder-base-300::placeholder { color: hsl(var(--b3, var(--b2))); } .placeholder-base-content::placeholder { color: hsl(var(--bc)); } .placeholder-info::placeholder { color: hsl(var(--in)); } .placeholder-info-content::placeholder { color: hsl(var(--inc, var(--nc))); } .placeholder-success::placeholder { color: hsl(var(--su)); } .placeholder-success-content::placeholder { color: hsl(var(--suc, var(--nc))); } .placeholder-warning::placeholder { color: hsl(var(--wa)); } .placeholder-warning-content::placeholder { color: hsl(var(--wac, var(--nc))); } .placeholder-error::placeholder { color: hsl(var(--er)); } .placeholder-error-content::placeholder { color: hsl(var(--erc, var(--nc))); } .ring-0 { --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(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 transparent); } .ring-1 { --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(1px + 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 transparent); } .ring-2 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent); } .ring-4 { --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(4px + 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 transparent); } .ring-8 { --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(8px + 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 transparent); } .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 transparent); } .ring-inset { --tw-ring-inset: inset; } .ring-transparent { --tw-ring-color: transparent; } .ring-current { --tw-ring-color: currentColor; } .ring-primary { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--p) / var(--tw-ring-opacity)); } .ring-primary-focus { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--pf, var(--p)) / var(--tw-ring-opacity)); } .ring-primary-content { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--pc) / var(--tw-ring-opacity)); } .ring-secondary { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--s) / var(--tw-ring-opacity)); } .ring-secondary-focus { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--sf, var(--s)) / var(--tw-ring-opacity)); } .ring-secondary-content { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--sc) / var(--tw-ring-opacity)); } .ring-accent { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--a) / var(--tw-ring-opacity)); } .ring-accent-focus { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--af, var(--a)) / var(--tw-ring-opacity)); } .ring-accent-content { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--ac) / var(--tw-ring-opacity)); } .ring-neutral { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--n) / var(--tw-ring-opacity)); } .ring-neutral-focus { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--nf, var(--n)) / var(--tw-ring-opacity)); } .ring-neutral-content { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--nc) / var(--tw-ring-opacity)); } .ring-base-100 { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--b1) / var(--tw-ring-opacity)); } .ring-base-200 { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--b2, var(--b1)) / var(--tw-ring-opacity)); } .ring-base-300 { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--b3, var(--b2)) / var(--tw-ring-opacity)); } .ring-base-content { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--bc) / var(--tw-ring-opacity)); } .ring-info { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--in) / var(--tw-ring-opacity)); } .ring-info-content { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--inc, var(--nc)) / var(--tw-ring-opacity)); } .ring-success { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--su) / var(--tw-ring-opacity)); } .ring-success-content { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--suc, var(--nc)) / var(--tw-ring-opacity)); } .ring-warning { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--wa) / var(--tw-ring-opacity)); } .ring-warning-content { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--wac, var(--nc)) / var(--tw-ring-opacity)); } .ring-error { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--er) / var(--tw-ring-opacity)); } .ring-error-content { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--erc, var(--nc)) / var(--tw-ring-opacity)); } .ring-opacity-0 { --tw-ring-opacity: 0; } .ring-opacity-5 { --tw-ring-opacity: 0.05; } .ring-opacity-10 { --tw-ring-opacity: 0.1; } .ring-opacity-20 { --tw-ring-opacity: 0.2; } .ring-opacity-25 { --tw-ring-opacity: 0.25; } .ring-opacity-30 { --tw-ring-opacity: 0.3; } .ring-opacity-40 { --tw-ring-opacity: 0.4; } .ring-opacity-50 { --tw-ring-opacity: 0.5; } .ring-opacity-60 { --tw-ring-opacity: 0.6; } .ring-opacity-70 { --tw-ring-opacity: 0.7; } .ring-opacity-75 { --tw-ring-opacity: 0.75; } .ring-opacity-80 { --tw-ring-opacity: 0.8; } .ring-opacity-90 { --tw-ring-opacity: 0.9; } .ring-opacity-95 { --tw-ring-opacity: 0.95; } .ring-opacity-100 { --tw-ring-opacity: 1; } .ring-offset-0 { --tw-ring-offset-width: 0px; } .ring-offset-1 { --tw-ring-offset-width: 1px; } .ring-offset-2 { --tw-ring-offset-width: 2px; } .ring-offset-4 { --tw-ring-offset-width: 4px; } .ring-offset-8 { --tw-ring-offset-width: 8px; } .ring-offset-transparent { --tw-ring-offset-color: transparent; } .ring-offset-current { --tw-ring-offset-color: currentColor; } .ring-offset-primary { --tw-ring-offset-color: hsl(var(--p)); } .ring-offset-primary-focus { --tw-ring-offset-color: hsl(var(--pf, var(--p))); } .ring-offset-primary-content { --tw-ring-offset-color: hsl(var(--pc)); } .ring-offset-secondary { --tw-ring-offset-color: hsl(var(--s)); } .ring-offset-secondary-focus { --tw-ring-offset-color: hsl(var(--sf, var(--s))); } .ring-offset-secondary-content { --tw-ring-offset-color: hsl(var(--sc)); } .ring-offset-accent { --tw-ring-offset-color: hsl(var(--a)); } .ring-offset-accent-focus { --tw-ring-offset-color: hsl(var(--af, var(--a))); } .ring-offset-accent-content { --tw-ring-offset-color: hsl(var(--ac)); } .ring-offset-neutral { --tw-ring-offset-color: hsl(var(--n)); } .ring-offset-neutral-focus { --tw-ring-offset-color: hsl(var(--nf, var(--n))); } .ring-offset-neutral-content { --tw-ring-offset-color: hsl(var(--nc)); } .ring-offset-base-100 { --tw-ring-offset-color: hsl(var(--b1)); } .ring-offset-base-200 { --tw-ring-offset-color: hsl(var(--b2, var(--b1))); } .ring-offset-base-300 { --tw-ring-offset-color: hsl(var(--b3, var(--b2))); } .ring-offset-base-content { --tw-ring-offset-color: hsl(var(--bc)); } .ring-offset-info { --tw-ring-offset-color: hsl(var(--in)); } .ring-offset-info-content { --tw-ring-offset-color: hsl(var(--inc, var(--nc))); } .ring-offset-success { --tw-ring-offset-color: hsl(var(--su)); } .ring-offset-success-content { --tw-ring-offset-color: hsl(var(--suc, var(--nc))); } .ring-offset-warning { --tw-ring-offset-color: hsl(var(--wa)); } .ring-offset-warning-content { --tw-ring-offset-color: hsl(var(--wac, var(--nc))); } .ring-offset-error { --tw-ring-offset-color: hsl(var(--er)); } .ring-offset-error-content { --tw-ring-offset-color: hsl(var(--erc, var(--nc))); } .transition-none { transition-property: none; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; } .transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; } .rounded-box { border-radius: var(--rounded-box, 1rem); } .rounded-t-box { border-top-left-radius: var(--rounded-box, 1rem); border-top-right-radius: var(--rounded-box, 1rem); } .rounded-b-box { border-bottom-left-radius: var(--rounded-box, 1rem); border-bottom-right-radius: var(--rounded-box, 1rem); } .rounded-btn { border-radius: var(--rounded-btn, .5rem); } .rounded-badge { border-radius: var(--rounded-badge, 1.9rem); } .text-2xs { font-size: .7rem; } .glass,.glass.btn-active,.glass:hover { border: none; backdrop-filter: blur(var(--glass-blur, 40px)); background-color: initial; background-image: linear-gradient( 135deg, rgb(255 255 255 / var(--glass-opacity, 30%)), transparent ), linear-gradient( var(--glass-reflex-degree, 100deg), rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%, transparent 0 ); box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, .05); text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%)); } .min-h-6 { min-height: 1.5rem; } .min-h-8 { min-height: 2rem; } .min-h-12 { min-height: 3rem; } .min-h-16 { min-height: 4rem; } .no-animation { --btn-focus-scale: 1; --animation-btn: 0; --animation-input: 0; } .tab-border-none { --tab-border: 0px; } .tab-border { --tab-border: 1px; } .tab-border-2 { --tab-border: 2px; } .tab-border-3 { --tab-border: 3px; } .tab-rounded-none { --tab-radius: 0; } .tab-rounded-lg { --tab-radius: 0.5rem; } .artboard-demo { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; } .artboard.phone { width: 320px; } .artboard.phone-1 { width: 320px; height: 568px; } .artboard.phone-1.artboard-horizontal,.artboard.phone-1.horizontal { width: 568px; height: 320px; } .artboard.phone-2 { width: 375px; height: 667px; } .artboard.phone-2.artboard-horizontal,.artboard.phone-2.horizontal { width: 667px; height: 375px; } .artboard.phone-3 { width: 414px; height: 736px; } .artboard.phone-3.artboard-horizontal,.artboard.phone-3.horizontal { width: 736px; height: 414px; } .artboard.phone-4 { width: 375px; height: 812px; } .artboard.phone-4.artboard-horizontal,.artboard.phone-4.horizontal { width: 812px; height: 375px; } .artboard.phone-5 { width: 414px; height: 896px; } .artboard.phone-5.artboard-horizontal,.artboard.phone-5.horizontal { width: 896px; height: 414px; } .artboard.phone-6 { width: 320px; height: 1024px; } .artboard.phone-6.artboard-horizontal,.artboard.phone-6.horizontal { width: 1024px; height: 320px; } .badge-xs { height: .75rem; font-size: .75rem; line-height: .75rem; padding-left: .313rem; padding-right: .313rem; } .badge-sm { height: 1rem; font-size: .75rem; line-height: 1rem; padding-left: .438rem; padding-right: .438rem; } .badge-md { height: 1.25rem; font-size: .875rem; line-height: 1.25rem; padding-left: .563rem; padding-right: .563rem; } .badge-lg { height: 1.5rem; font-size: 1rem; line-height: 1.5rem; padding-left: .688rem; padding-right: .688rem; } .btn-xs { height: 1.5rem; padding-left: .5rem; padding-right: .5rem; min-height: 1.5rem; font-size: .75rem; } .btn-sm { height: 2rem; padding-left: .75rem; padding-right: .75rem; min-height: 2rem; font-size: .875rem; } .btn-md { height: 3rem; padding-left: 1rem; padding-right: 1rem; min-height: 3rem; font-size: .875rem; } .btn-lg { height: 4rem; padding-left: 1.5rem; padding-right: 1.5rem; min-height: 4rem; font-size: 1.125rem; } .btn-wide { width: 16rem; } .btn-block { width: 100%; } .btn-square:where(.btn-xs) { height: 1.5rem; width: 1.5rem; padding: 0; } .btn-square:where(.btn-sm) { height: 2rem; width: 2rem; padding: 0; } .btn-square:where(.btn-md) { height: 3rem; width: 3rem; padding: 0; } .btn-square:where(.btn-lg) { height: 4rem; width: 4rem; padding: 0; } .btn-circle:where(.btn-xs) { height: 1.5rem; width: 1.5rem; border-radius: 9999px; padding: 0; } .btn-circle:where(.btn-sm) { height: 2rem; width: 2rem; border-radius: 9999px; padding: 0; } .btn-circle:where(.btn-md) { height: 3rem; width: 3rem; border-radius: 9999px; padding: 0; } .btn-circle:where(.btn-lg) { height: 4rem; width: 4rem; border-radius: 9999px; padding: 0; } .card-side { align-items: stretch; flex-direction: row; } .card-side figure>* { max-width: unset; } :where(.card-side figure>*) { width: 100%; height: 100%; object-fit: cover; } .checkbox-xs { height: 1rem; width: 1rem; } .checkbox-sm { height: 1.25rem; width: 1.25rem; } .checkbox-md { height: 1.5rem; width: 1.5rem; } .checkbox-lg { height: 2rem; width: 2rem; } .divider-horizontal { flex-direction: column; } .divider-horizontal:before { height: 100%; width: .125rem; } .divider-horizontal:after { height: 100%; width: .125rem; } .divider-vertical { flex-direction: row; } .divider-vertical:before { height: .125rem; width: 100%; } .divider-vertical:after { height: .125rem; width: 100%; } .input-md { height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: .875rem; line-height: 1.25rem; line-height: 2; } .input-lg { height: 4rem; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 1.125rem; line-height: 1.75rem; line-height: 2; } .input-sm { height: 2rem; padding-left: .75rem; padding-right: .75rem; font-size: .875rem; line-height: 2rem; } .input-xs { height: 1.5rem; padding-left: .5rem; padding-right: .5rem; font-size: .75rem; line-height: 1rem; line-height: 1.625; } .kbd-xs { padding-left: .25rem; padding-right: .25rem; font-size: .75rem; line-height: 1rem; min-height: 1.2em; min-width: 1.2em; } .kbd-sm { padding-left: .25rem; padding-right: .25rem; font-size: .875rem; line-height: 1.25rem; min-height: 1.6em; min-width: 1.6em; } .kbd-md { padding-left: .5rem; padding-right: .5rem; font-size: 1rem; line-height: 1.5rem; min-height: 2.2em; min-width: 2.2em; } .kbd-lg { padding-left: 1rem; padding-right: 1rem; font-size: 1.125rem; line-height: 1.75rem; min-height: 2.5em; min-width: 2.5em; } .menu-vertical { flex-direction: column; } .menu-vertical :where(li) { flex-direction: column; } .menu-vertical>:where(li)>:where(ul) { top: auto; left: 100%; } .menu-horizontal { display: inline-flex; flex-direction: row; } .menu-horizontal :where(li) { flex-direction: row; } .menu-horizontal>:where(li)>:where(ul) { top: 100%; left: auto; } .radio-xs { height: 1rem; width: 1rem; } .radio-sm { height: 1.25rem; width: 1.25rem; } .radio-md { height: 1.5rem; width: 1.5rem; } .radio-lg { height: 2rem; width: 2rem; } .range-xs { height: .75rem; } .range-xs::-webkit-slider-runnable-track { height: .25rem; } .range-xs::-moz-range-track { height: .25rem; } .range-xs::-webkit-slider-thumb { height: .75rem; width: .75rem; --filler-offset: .4rem; } .range-xs::-moz-range-thumb { height: .75rem; width: .75rem; --filler-offset: .4rem; } .range-sm { height: 1rem; } .range-sm::-webkit-slider-runnable-track { height: .25rem; } .range-sm::-moz-range-track { height: .25rem; } .range-sm::-webkit-slider-thumb { height: 1rem; width: 1rem; --filler-offset: .5rem; } .range-sm::-moz-range-thumb { height: 1rem; width: 1rem; --filler-offset: .5rem; } .range-md { height: 1.25rem; } .range-md::-webkit-slider-runnable-track { height: .5rem; } .range-md::-moz-range-track { height: .5rem; } .range-md::-webkit-slider-thumb { height: 1.25rem; width: 1.25rem; --filler-offset: .6rem; } .range-md::-moz-range-thumb { height: 1.25rem; width: 1.25rem; --filler-offset: .6rem; } .range-lg { height: 2rem; } .range-lg::-webkit-slider-runnable-track { height: 1rem; } .range-lg::-moz-range-track { height: 1rem; } .range-lg::-webkit-slider-thumb { height: 2rem; width: 2rem; --filler-offset: 1rem; } .range-lg::-moz-range-thumb { height: 2rem; width: 2rem; --filler-offset: 1rem; } .rating-xs input { height: .75rem; width: .75rem; } .rating-sm input { height: 1rem; width: 1rem; } .rating-md input { height: 1.5rem; width: 1.5rem; } .rating-lg input { height: 2.5rem; width: 2.5rem; } .rating-half.rating-xs input:not(.rating-hidden) { width: .375rem; } .rating-half.rating-sm input:not(.rating-hidden) { width: .5rem; } .rating-half.rating-md input:not(.rating-hidden) { width: .75rem; } .rating-half.rating-lg input:not(.rating-hidden) { width: 1.25rem; } .select-md { height: 3rem; padding-left: 1rem; padding-right: 2.5rem; font-size: .875rem; line-height: 1.25rem; line-height: 2; min-height: 3rem; } .select-lg { height: 4rem; padding-left: 1.5rem; padding-right: 2rem; font-size: 1.125rem; line-height: 1.75rem; line-height: 2; min-height: 4rem; } .select-sm { height: 2rem; padding-left: .75rem; padding-right: 2rem; font-size: .875rem; line-height: 2rem; min-height: 2rem; } .select-xs { height: 1.5rem; padding-left: .5rem; padding-right: 2rem; font-size: .75rem; line-height: 1rem; line-height: 1.625; min-height: 1.5rem; } .stats-horizontal { grid-auto-flow: column; } .stats-vertical { grid-auto-flow: row; } .steps-horizontal { grid-auto-columns: 1fr; display: inline-grid; grid-auto-flow: column; overflow: hidden; overflow-x: auto; } .steps-horizontal .step { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); place-items: center; text-align: center; } .steps-vertical { grid-auto-rows: 1fr; grid-auto-flow: row; } .steps-vertical .step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr)); } .tab-md { height: 2rem; font-size: .875rem; line-height: 1.25rem; line-height: 2; --tab-padding: 1rem; } .tab-lg { height: 3rem; font-size: 1.125rem; line-height: 1.75rem; line-height: 2; --tab-padding: 1.25rem; } .tab-sm { height: 1.5rem; font-size: .875rem; line-height: .75rem; --tab-padding: 0.75rem; } .tab-xs { height: 1.25rem; font-size: .75rem; line-height: .75rem; --tab-padding: 0.5rem; } .toggle-xs { --handleoffset: 0.5rem; height: 1rem; width: 1.5rem; } .toggle-sm { --handleoffset: 0.75rem; height: 1.25rem; width: 2rem; } .toggle-md { --handleoffset: 1.5rem; height: 1.5rem; width: 3rem; } .toggle-lg { --handleoffset: 2rem; height: 2rem; width: 4rem; } .alert-sm { padding: .5rem; } .alert-info { --tw-bg-opacity: 1; background-color: hsl(var(--in) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity)); } .alert-success { --tw-bg-opacity: 1; background-color: hsl(var(--su) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity)); } .alert-warning { --tw-bg-opacity: 1; background-color: hsl(var(--wa) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity)); } .alert-error { --tw-bg-opacity: 1; background-color: hsl(var(--er) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity)); } .artboard-demo { --tw-bg-opacity: 1; background-color: hsl(var(--b1) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); border-radius: var(--rounded-box, 1rem); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1),0 1px 2px 0 rgba(0, 0, 0, .06); } .avatar.online:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: 9999px; --tw-bg-opacity: 1; background-color: hsl(var(--su) / var(--tw-bg-opacity)); width: 15%; height: 15%; top: 7%; right: 7%; box-shadow: 0 0 0 2px hsl(var(--b1)); } .avatar.offline:before { content: ""; position: absolute; z-index: 10; display: block; border-radius: 9999px; --tw-bg-opacity: 1; background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity)); width: 15%; height: 15%; top: 7%; right: 7%; box-shadow: 0 0 0 2px hsl(var(--b1)); } .badge-primary { --tw-border-opacity: 1; border-color: hsl(var(--p) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--p) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--pc) / var(--tw-text-opacity)); } .badge-secondary { --tw-border-opacity: 1; border-color: hsl(var(--s) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--s) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--sc) / var(--tw-text-opacity)); } .badge-accent { --tw-border-opacity: 1; border-color: hsl(var(--a) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--a) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--ac) / var(--tw-text-opacity)); } .badge-ghost { --tw-border-opacity: 1; border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); } .badge-outline { border-color: currentColor; --tw-border-opacity: 0.5; background-color: initial; --tw-text-opacity: 1; color: hsl(var(--bc) / var(--tw-text-opacity)); } .badge-outline.badge-primary { --tw-text-opacity: 1; color: hsl(var(--p) / var(--tw-text-opacity)); } .badge-outline.badge-secondary { --tw-text-opacity: 1; color: hsl(var(--s) / var(--tw-text-opacity)); } .badge-outline.badge-accent { --tw-text-opacity: 1; color: hsl(var(--a) / var(--tw-text-opacity)); } .badge-info { border-color: transparent; --tw-bg-opacity: 1; background-color: hsl(var(--in) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity)); } .badge-success { border-color: transparent; --tw-bg-opacity: 1; background-color: hsl(var(--su) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity)); } .badge-warning { border-color: transparent; --tw-bg-opacity: 1; background-color: hsl(var(--wa) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity)); } .badge-error { border-color: transparent; --tw-bg-opacity: 1; background-color: hsl(var(--er) / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity)); } .card-compact .card-body { padding: 1rem; font-size: .875rem; line-height: 1.25rem; } .card-compact .card-title { margin-bottom: .25rem; } .card-normal .card-body { padding: var(--padding-card, 2rem); font-size: 1rem; line-height: 1.5rem; } .card-normal .card-title { margin-bottom: .75rem; } .divider-horizontal { margin: 0 1rem; height: auto; width: 1rem; } .divider-vertical { margin: 1rem 0; height: 1rem; width: auto; } .menu-vertical :where(li.bordered>*) { border-left-width: 4px; border-bottom-width: 0; } .menu-horizontal :where(li.bordered>*) { border-left-width: 0; border-bottom-width: 4px; } .menu-normal :where(li>*) { padding-top: .75rem; padding-bottom: .75rem; font-size: 1rem; line-height: 1.5rem; } .menu-compact :where(li>*) { padding-top: .5rem; padding-bottom: .5rem; font-size: .875rem; line-height: 1.25rem; } .menu-vertical>:where(li:first-child) { border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-right-radius: unset; border-bottom-left-radius: unset; } .menu-vertical>:where(li:first-child)>:where(:not(ul)) { border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-right-radius: unset; border-bottom-left-radius: unset; } .menu-vertical>:where(li:last-child) { border-top-left-radius: unset; border-top-right-radius: unset; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .menu-vertical>:where(li:last-child)>:where(:not(ul)) { border-top-left-radius: unset; border-top-right-radius: unset; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .menu-horizontal>:where(li:first-child) { border-top-left-radius: inherit; border-top-right-radius: unset; border-bottom-right-radius: unset; border-bottom-left-radius: inherit; } .menu-horizontal>:where(li:first-child)>:where(:not(ul)) { border-top-left-radius: inherit; border-top-right-radius: unset; border-bottom-right-radius: unset; border-bottom-left-radius: inherit; } .menu-horizontal>:where(li:last-child) { border-top-left-radius: unset; border-top-right-radius: inherit; border-bottom-right-radius: inherit; border-bottom-left-radius: unset; } .menu-horizontal>:where(li:last-child)>:where(:not(ul)) { border-top-left-radius: unset; border-top-right-radius: inherit; border-bottom-right-radius: inherit; border-bottom-left-radius: unset; } .stats-horizontal>:not([hidden])~:not([hidden]) { --tw-divide-x-reverse: 0; --tw-divide-y-reverse: 0; border-width: calc(0px*(1 - var(--tw-divide-y-reverse))) calc(1px*var(--tw-divide-x-reverse)) calc(0px*var(--tw-divide-y-reverse)) calc(1px*(1 - var(--tw-divide-x-reverse))); } .stats-horizontal { overflow-x: auto; } .stats-vertical>:not([hidden])~:not([hidden]) { --tw-divide-y-reverse: 0; --tw-divide-x-reverse: 0; border-width: calc(1px*(1 - var(--tw-divide-y-reverse))) calc(0px*var(--tw-divide-x-reverse)) calc(1px*var(--tw-divide-y-reverse)) calc(0px*(1 - var(--tw-divide-x-reverse))); } .stats-vertical { overflow-y: auto; } .steps-horizontal .step { grid-template-rows: 40px 1fr; grid-template-columns: auto; min-width: 4rem; } .steps-horizontal .step:before { height: .5rem; width: 100%; --tw-translate-y: 0px; --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); content: ""; margin-left: -100%; } .steps-vertical .step { gap: .5rem; grid-template-columns: 40px 1fr; grid-template-rows: auto; min-height: 4rem; justify-items: start; } .steps-vertical .step:before { height: 100%; width: .5rem; --tw-translate-y: -50%; --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); margin-left: 50%; } .table-normal :where(th,td) { padding: 1rem; font-size: 1rem; line-height: 1.5rem; } .table-compact :where(th,td) { padding: .5rem; font-size: .875rem; line-height: 1.25rem; } @media (min-width: 640px) { .sm\:input-group-sm { font-size:.875rem; line-height: 2rem; } .btn.loading.btn-xs:before,.btn.loading.sm\:btn-sm:before { height: .75rem; width: .75rem; } .sm\:badge-sm { height: 1rem; font-size: .75rem; line-height: 1rem; padding-left: .438rem; padding-right: .438rem; } .sm\:btn-sm { height: 2rem; padding-left: .75rem; padding-right: .75rem; min-height: 2rem; font-size: .875rem; } .btn-square:where(.sm\:btn-sm) { height: 2rem; width: 2rem; padding: 0; } .btn-circle:where(.sm\:btn-sm) { height: 2rem; width: 2rem; border-radius: 9999px; padding: 0; } .sm\:checkbox-sm { height: 1.25rem; width: 1.25rem; } .sm\:input-sm { height: 2rem; padding-left: .75rem; padding-right: .75rem; font-size: .875rem; line-height: 2rem; } .sm\:kbd-sm { padding-left: .25rem; padding-right: .25rem; font-size: .875rem; line-height: 1.25rem; min-height: 1.6em; min-width: 1.6em; } .sm\:radio-sm { height: 1.25rem; width: 1.25rem; } .sm\:range-sm { height: 1rem; } .sm\:range-sm::-webkit-slider-runnable-track { height: .25rem; } .sm\:range-sm::-moz-range-track { height: .25rem; } .sm\:range-sm::-webkit-slider-thumb { height: 1rem; width: 1rem; --filler-offset: .5rem; } .sm\:range-sm::-moz-range-thumb { height: 1rem; width: 1rem; --filler-offset: .5rem; } .sm\:rating-sm input { height: 1rem; width: 1rem; } .rating-half.sm\:rating-sm input:not(.rating-hidden) { width: .5rem; } .sm\:select-sm { height: 2rem; padding-left: .75rem; padding-right: 2rem; font-size: .875rem; line-height: 2rem; min-height: 2rem; } .sm\:tab-sm { height: 1.5rem; font-size: .875rem; line-height: .75rem; --tab-padding: 0.75rem; } .sm\:toggle-sm { --handleoffset: 0.75rem; height: 1.25rem; width: 2rem; } .sm\:alert-sm { padding: .5rem; } } @media (min-width: 768px) { .md\:input-group-md { font-size:.875rem; line-height: 1.25rem; line-height: 2; } .md\:badge-md { height: 1.25rem; font-size: .875rem; line-height: 1.25rem; padding-left: .563rem; padding-right: .563rem; } .md\:btn-md { height: 3rem; padding-left: 1rem; padding-right: 1rem; min-height: 3rem; font-size: .875rem; } .btn-square:where(.md\:btn-md) { height: 3rem; width: 3rem; padding: 0; } .btn-circle:where(.md\:btn-md) { height: 3rem; width: 3rem; border-radius: 9999px; padding: 0; } .md\:checkbox-md { height: 1.5rem; width: 1.5rem; } .md\:input-md { height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: .875rem; line-height: 1.25rem; line-height: 2; } .md\:kbd-md { padding-left: .5rem; padding-right: .5rem; font-size: 1rem; line-height: 1.5rem; min-height: 2.2em; min-width: 2.2em; } .md\:radio-md { height: 1.5rem; width: 1.5rem; } .md\:range-md { height: 1.25rem; } .md\:range-md::-webkit-slider-runnable-track { height: .5rem; } .md\:range-md::-moz-range-track { height: .5rem; } .md\:range-md::-webkit-slider-thumb { height: 1.25rem; width: 1.25rem; --filler-offset: .6rem; } .md\:range-md::-moz-range-thumb { height: 1.25rem; width: 1.25rem; --filler-offset: .6rem; } .md\:rating-md input { height: 1.5rem; width: 1.5rem; } .rating-half.md\:rating-md input:not(.rating-hidden) { width: .75rem; } .md\:select-md { height: 3rem; padding-left: 1rem; padding-right: 2.5rem; font-size: .875rem; line-height: 1.25rem; line-height: 2; min-height: 3rem; } .md\:tab-md { height: 2rem; font-size: .875rem; line-height: 1.25rem; line-height: 2; --tab-padding: 1rem; } .md\:toggle-md { --handleoffset: 1.5rem; height: 1.5rem; width: 3rem; } } @media (min-width: 1024px) { .lg\:input-group-lg { font-size:1.125rem; line-height: 1.75rem; line-height: 2; } .btn.loading.btn-xl:before,.btn.loading.lg\:btn-lg:before { height: 1.25rem; width: 1.25rem; } .lg\:tab-rounded-lg { --tab-radius: 0.5rem; } .lg\:badge-lg { height: 1.5rem; font-size: 1rem; line-height: 1.5rem; padding-left: .688rem; padding-right: .688rem; } .lg\:btn-lg { height: 4rem; padding-left: 1.5rem; padding-right: 1.5rem; min-height: 4rem; font-size: 1.125rem; } .btn-square:where(.lg\:btn-lg) { height: 4rem; width: 4rem; padding: 0; } .btn-circle:where(.lg\:btn-lg) { height: 4rem; width: 4rem; border-radius: 9999px; padding: 0; } .lg\:checkbox-lg { height: 2rem; width: 2rem; } .lg\:input-lg { height: 4rem; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 1.125rem; line-height: 1.75rem; line-height: 2; } .lg\:kbd-lg { padding-left: 1rem; padding-right: 1rem; font-size: 1.125rem; line-height: 1.75rem; min-height: 2.5em; min-width: 2.5em; } .lg\:radio-lg { height: 2rem; width: 2rem; } .lg\:range-lg { height: 2rem; } .lg\:range-lg::-webkit-slider-runnable-track { height: 1rem; } .lg\:range-lg::-moz-range-track { height: 1rem; } .lg\:range-lg::-webkit-slider-thumb { height: 2rem; width: 2rem; --filler-offset: 1rem; } .lg\:range-lg::-moz-range-thumb { height: 2rem; width: 2rem; --filler-offset: 1rem; } .lg\:rating-lg input { height: 2.5rem; width: 2.5rem; } .rating-half.lg\:rating-lg input:not(.rating-hidden) { width: 1.25rem; } .lg\:select-lg { height: 4rem; padding-left: 1.5rem; padding-right: 2rem; font-size: 1.125rem; line-height: 1.75rem; line-height: 2; min-height: 4rem; } .lg\:tab-lg { height: 3rem; font-size: 1.125rem; line-height: 1.75rem; line-height: 2; --tab-padding: 1.25rem; } .lg\:toggle-lg { --handleoffset: 2rem; height: 2rem; width: 4rem; } } @media (min-width: 1280px) { .btn.loading.btn-lg:before,.btn.loading.xl\:btn-xl:before { height:1.25rem; width: 1.25rem; } }