*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;} *,::before,::after{box-sizing:border-box} html{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";line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4} body{margin:0;padding:0;line-height:inherit} a{color:inherit;text-decoration:inherit} img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle} img,video{max-width:100%;height:auto} h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit} ol,ul{list-style:none;margin:0;padding:0} 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} :root { color-scheme: light; --pf: 259 94% 44%; --sf: 314 100% 40%; --af: 174 75% 39%; --nf: 214 20% 14%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 259 94% 51%; --pc: 259 96% 91%; --s: 314 100% 47%; --sc: 314 100% 91%; --a: 174 75% 46%; --ac: 174 75% 11%; --n: 214 20% 21%; --nc: 212 19% 87%; --b1: 0 0% 100%; --b2: 0 0% 95%; --b3: 180 2% 90%; --bc: 215 28% 17% } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --pf: 262 80% 43%; --sf: 316 70% 43%; --af: 175 70% 34%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 262 80% 50%; --pc: 0 0% 100%; --s: 316 70% 50%; --sc: 0 0% 100%; --a: 175 70% 41%; --ac: 0 0% 100%; --n: 213 18% 20%; --nf: 212 17% 17%; --nc: 220 13% 69%; --b1: 212 18% 14%; --b2: 213 18% 12%; --b3: 213 18% 10%; --bc: 220 13% 69% } } [data-theme=light] { color-scheme: light; --pf: 259 94% 44%; --sf: 314 100% 40%; --af: 174 75% 39%; --nf: 214 20% 14%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 259 94% 51%; --pc: 259 96% 91%; --s: 314 100% 47%; --sc: 314 100% 91%; --a: 174 75% 46%; --ac: 174 75% 11%; --n: 214 20% 21%; --nc: 212 19% 87%; --b1: 0 0% 100%; --b2: 0 0% 95%; --b3: 180 2% 90%; --bc: 215 28% 17% } [data-theme=dark] { color-scheme: dark; --pf: 262 80% 43%; --sf: 316 70% 43%; --af: 175 70% 34%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 262 80% 50%; --pc: 0 0% 100%; --s: 316 70% 50%; --sc: 0 0% 100%; --a: 175 70% 41%; --ac: 0 0% 100%; --n: 213 18% 20%; --nf: 212 17% 17%; --nc: 220 13% 69%; --b1: 212 18% 14%; --b2: 213 18% 12%; --b3: 213 18% 10%; --bc: 220 13% 69% } [data-theme=cupcake] { color-scheme: light; --pf: 183 47% 52%; --sf: 338 71% 71%; --af: 39 84% 51%; --nf: 280 46% 7%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --pc: 183 20% 13%; --sc: 340 15% 16%; --ac: 37 41% 13%; --nc: 283 9% 81%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --rounded-box: 1rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --border-btn: 1px; --p: 183 47% 59%; --s: 338 71% 78%; --a: 39 84% 58%; --n: 280 46% 14%; --b1: 24 33% 97%; --b2: 27 22% 92%; --b3: 23 14% 89%; --bc: 280 46% 14%; --rounded-btn: 1.9rem; --tab-border: 2px; --tab-radius: .5rem } [data-theme=bumblebee] { color-scheme: light; --pf: 50 94% 51%; --sf: 41 74% 46%; --af: 24 67% 52%; --nf: 240 33% 7%; --b2: 0 0% 93%; --b3: 0 0% 86%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --bc: 146 0% 19%; --ac: 23 34% 13%; --nc: 247 7% 81%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 50 94% 58%; --pc: 240 33% 14%; --s: 41 74% 53%; --sc: 240 33% 14%; --a: 24 67% 59%; --n: 240 33% 14%; --b1: 0 0% 100% } [data-theme=emerald] { color-scheme: light; --pf: 141 50% 53%; --sf: 219 96% 53%; --af: 10 81% 49%; --nf: 219 20% 18%; --b2: 0 0% 93%; --b3: 0 0% 86%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --rounded-box: 1rem; --rounded-btn: 0.5rem; --rounded-badge: 1.9rem; --btn-text-case: uppercase; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 141 50% 60%; --pc: 151 28% 19%; --s: 219 96% 60%; --sc: 210 20% 98%; --a: 10 81% 56%; --ac: 210 20% 98%; --n: 219 20% 25%; --nc: 210 20% 98%; --b1: 0 0% 100%; --bc: 219 20% 25%; --animation-btn: 0; --animation-input: 0; --btn-focus-scale: 1 } [data-theme=corporate] { color-scheme: light; --pf: 229 96% 57%; --sf: 215 26% 52%; --af: 154 49% 53%; --nf: 233 27% 6%; --b2: 0 0% 93%; --b3: 0 0% 86%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --pc: 243 100% 94%; --sc: 216 13% 13%; --ac: 151 21% 13%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --btn-text-case: uppercase; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 229 96% 64%; --s: 215 26% 59%; --a: 154 49% 60%; --n: 233 27% 13%; --nc: 210 38% 95%; --b1: 0 0% 100%; --bc: 233 27% 13%; --rounded-box: 0.25rem; --rounded-btn: .125rem; --rounded-badge: .125rem; --animation-btn: 0; --animation-input: 0; --btn-focus-scale: 1 } [data-theme=synthwave] { color-scheme: dark; --pf: 321 70% 62%; --sf: 197 87% 58%; --af: 48 89% 50%; --nf: 253 59% 13%; --b2: 253 58% 8%; --b3: 253 58% 1%; --pc: 323 23% 15%; --sc: 199 28% 14%; --ac: 45 42% 13%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 321 70% 69%; --s: 197 87% 65%; --a: 48 89% 57%; --n: 253 59% 20%; --nc: 260 60% 98%; --b1: 253 58% 15%; --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% } [data-theme=retro] { color-scheme: light; --pf: 3 74% 69%; --sf: 145 27% 65%; --af: 24 67% 52%; --nf: 340 7% 10%; --inc: 239 85% 93%; --suc: 126 38% 89%; --wac: 29 59% 11%; --erc: 11 100% 91%; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 3 74% 76%; --pc: 345 5% 15%; --s: 145 27% 72%; --sc: 345 5% 15%; --a: 24 67% 59%; --ac: 345 5% 15%; --n: 340 7% 17%; --nc: 43 41% 88%; --b1: 45 47% 80%; --b2: 44 47% 73%; --b3: 44 47% 68%; --bc: 345 5% 15%; --in: 221 83% 53%; --su: 142 76% 36%; --wa: 32 95% 44%; --er: 0 72% 51%; --rounded-box: 0.4rem; --rounded-btn: 0.4rem; --rounded-badge: 0.4rem } [data-theme=cyberpunk] { color-scheme: light; --pf: 345 100% 66%; --sf: 195 80% 63%; --af: 276 74% 64%; --nf: 57 100% 6%; --b2: 56 100% 43%; --b3: 56 100% 36%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --bc: 53 46% 13%; --pc: 348 27% 15%; --sc: 196 23% 15%; --ac: 277 22% 15%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace; --p: 345 100% 73%; --s: 195 80% 70%; --a: 276 74% 71%; --n: 57 100% 13%; --nc: 56 100% 50%; --b1: 56 100% 50%; --rounded-box: 0; --rounded-btn: 0; --rounded-badge: 0; --tab-radius: 0 } [data-theme=valentine] { color-scheme: light; --pf: 353 74% 60%; --sf: 254 86% 70%; --af: 181 56% 63%; --nf: 336 43% 41%; --b2: 318 46% 82%; --b3: 318 46% 75%; --pc: 356 26% 14%; --sc: 256 20% 15%; --ac: 181 16% 15%; --inc: 239 85% 93%; --suc: 126 38% 89%; --wac: 29 59% 11%; --erc: 11 100% 91%; --rounded-box: 1rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 353 74% 67%; --s: 254 86% 77%; --a: 181 56% 70%; --n: 336 43% 48%; --nc: 318 46% 89%; --b1: 318 46% 89%; --bc: 344 38% 28%; --in: 221 83% 53%; --su: 142 76% 36%; --wa: 32 95% 44%; --er: 0 72% 51%; --rounded-btn: 1.9rem } [data-theme=halloween] { color-scheme: dark; --pf: 32 89% 45%; --sf: 271 46% 35%; --af: 91 100% 26%; --nf: 31 81% 3%; --b2: 0 0% 6%; --b3: 0 0% 0%; --bc: 145 0% 81%; --sc: 275 36% 88%; --nc: 26 11% 80%; --inc: 239 85% 93%; --suc: 126 38% 89%; --wac: 29 59% 11%; --erc: 11 100% 91%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 32 89% 52%; --pc: 180 7% 8%; --s: 271 46% 42%; --a: 91 100% 33%; --ac: 0 0% 0%; --n: 31 81% 10%; --b1: 0 0% 13%; --in: 221 83% 53%; --su: 142 76% 36%; --wa: 32 95% 44%; --er: 0 72% 51% } [data-theme=garden] { color-scheme: light; --pf: 331 100% 41%; --sf: 334 37% 34%; --af: 139 16% 36%; --nf: 44 100% 1%; --b2: 0 4% 84%; --b3: 0 4% 77%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --pc: 346 100% 93%; --sc: 340 30% 88%; --ac: 136 12% 88%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 331 100% 48%; --s: 334 37% 41%; --a: 139 16% 43%; --n: 44 100% 8%; --nc: 0 4% 91%; --b1: 0 4% 91%; --bc: 0 3% 6% } [data-theme=forest] { color-scheme: dark; --pf: 141 72% 35%; --sf: 164 73% 35%; --af: 175 73% 35%; --nf: 161 37% 8%; --b2: 0 12% 1%; --b3: 0 0% 0%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --bc: 360 1% 79%; --sc: 158 32% 11%; --ac: 172 31% 11%; --nc: 157 7% 81%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --rounded-box: 1rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 141 72% 42%; --pc: 0 0% 0%; --s: 164 73% 42%; --a: 175 73% 42%; --n: 161 37% 15%; --b1: 0 12% 8%; --rounded-btn: 1.9rem } [data-theme=aqua] { color-scheme: dark; --pf: 182 93% 42%; --sf: 274 31% 50%; --af: 47 100% 73%; --nf: 205 54% 43%; --b2: 219 53% 36%; --b3: 219 53% 29%; --bc: 228 38% 89%; --sc: 276 17% 12%; --ac: 46 19% 16%; --nc: 212 51% 91%; --inc: 239 85% 93%; --suc: 126 38% 89%; --wac: 29 59% 11%; --erc: 11 100% 91%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 182 93% 49%; --pc: 181 100% 17%; --s: 274 31% 57%; --a: 47 100% 80%; --n: 205 54% 50%; --b1: 219 53% 43%; --in: 221 83% 53%; --su: 142 76% 36%; --wa: 32 95% 44%; --er: 0 72% 51% } [data-theme=lofi] { color-scheme: light; --pf: 0 0% 0%; --sf: 0 2% 3%; --af: 0 0% 8%; --nf: 0 0% 0%; --btn-text-case: uppercase; --border-btn: 1px; --tab-border: 1px; --p: 0 0% 5%; --pc: 0 0% 100%; --s: 0 2% 10%; --sc: 0 0% 100%; --a: 0 0% 15%; --ac: 0 0% 100%; --n: 0 0% 0%; --nc: 0 0% 100%; --b1: 0 0% 100%; --b2: 0 0% 95%; --b3: 0 2% 90%; --bc: 0 0% 0%; --in: 212 100% 48%; --inc: 0 0% 100%; --su: 137 72% 46%; --suc: 0 0% 0%; --wa: 5 100% 66%; --wac: 0 0% 100%; --er: 325 78% 49%; --erc: 0 0% 100%; --rounded-box: 0.25rem; --rounded-btn: 0.125rem; --rounded-badge: 0.125rem; --animation-btn: 0; --animation-input: 0; --btn-focus-scale: 1; --tab-radius: 0 } [data-theme=pastel] { color-scheme: light; --pf: 284 22% 73%; --sf: 352 70% 81%; --af: 158 55% 74%; --nf: 199 44% 54%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --bc: 146 0% 19%; --pc: 284 4% 16%; --sc: 352 7% 17%; --ac: 158 10% 16%; --nc: 200 19% 13%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --rounded-box: 1rem; --rounded-badge: 1.9rem; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 284 22% 80%; --s: 352 70% 88%; --a: 158 55% 81%; --n: 199 44% 61%; --b1: 0 0% 100%; --b2: 210 20% 98%; --b3: 216 12% 84%; --rounded-btn: 1.9rem } [data-theme=fantasy] { color-scheme: light; --pf: 296 83% 18%; --sf: 200 100% 30%; --af: 31 94% 44%; --nf: 215 28% 10%; --b2: 0 0% 93%; --b3: 0 0% 86%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --pc: 302 27% 85%; --sc: 212 51% 90%; --ac: 28 57% 12%; --nc: 218 6% 82%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 296 83% 25%; --s: 200 100% 37%; --a: 31 94% 51%; --n: 215 28% 17%; --b1: 0 0% 100%; --bc: 215 28% 17% } [data-theme=wireframe] { color-scheme: light; --pf: 0 0% 65%; --sf: 0 0% 65%; --af: 0 0% 65%; --nf: 0 0% 85%; --bc: 146 0% 19%; --pc: 145 0% 15%; --sc: 145 0% 15%; --ac: 145 0% 15%; --nc: 145 0% 18%; --inc: 263 100% 91%; --suc: 105 32% 85%; --wac: 58 21% 11%; --erc: 17 100% 90%; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; font-family: Chalkboard,comic sans ms,"sanssecondaryerif"; --p: 0 0% 72%; --s: 0 0% 72%; --a: 0 0% 72%; --n: 0 0% 92%; --b1: 0 0% 100%; --b2: 0 0% 93%; --b3: 0 0% 87%; --in: 240 100% 50%; --su: 120 100% 25%; --wa: 60 30% 50%; --er: 0 100% 50%; --rounded-box: 0.2rem; --rounded-btn: 0.2rem; --rounded-badge: 0.2rem; --tab-radius: 0.2rem } [data-theme=black] { color-scheme: dark; --pf: 0 2% 13%; --sf: 0 2% 13%; --af: 0 2% 13%; --bc: 145 0% 78%; --pc: 0 1% 82%; --sc: 0 1% 82%; --ac: 0 1% 82%; --nc: 0 0% 81%; --inc: 263 100% 91%; --suc: 105 32% 85%; --wac: 58 45% 13%; --erc: 17 100% 90%; --border-btn: 1px; --tab-border: 1px; --p: 0 2% 20%; --s: 0 2% 20%; --a: 0 2% 20%; --b1: 0 0% 0%; --b2: 0 0% 5%; --b3: 0 2% 10%; --n: 0 1% 15%; --nf: 0 2% 20%; --in: 240 100% 50%; --su: 120 100% 25%; --wa: 60 100% 50%; --er: 0 100% 50%; --rounded-box: 0; --rounded-btn: 0; --rounded-badge: 0; --animation-btn: 0; --animation-input: 0; --btn-text-case: lowercase; --btn-focus-scale: 1; --tab-radius: 0 } [data-theme=luxury] { color-scheme: dark; --pf: 0 0% 93%; --sf: 218 54% 11%; --af: 319 22% 19%; --nf: 28 100% 3%; --pc: 146 0% 19%; --sc: 227 12% 82%; --ac: 322 9% 84%; --inc: 205 27% 15%; --suc: 88 35% 12%; --wac: 52 28% 14%; --erc: 3 31% 15%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 0 0% 100%; --s: 218 54% 18%; --a: 319 22% 26%; --n: 28 100% 10%; --nc: 44 100% 82%; --b1: 240 10% 4%; --b2: 270 4% 9%; --b3: 270 2% 18%; --bc: 37 67% 58%; --in: 202 100% 70%; --su: 89 62% 52%; --wa: 54 69% 64%; --er: 0 100% 72% } [data-theme=dracula] { color-scheme: dark; --pf: 326 100% 67%; --sf: 265 89% 71%; --af: 31 100% 64%; --nf: 230 15% 23%; --b2: 231 15% 11%; --b3: 231 15% 4%; --pc: 328 26% 15%; --sc: 266 19% 16%; --ac: 30 30% 15%; --nc: 232 7% 85%; --inc: 191 20% 16%; --suc: 128 30% 14%; --wac: 64 20% 15%; --erc: 5 39% 14%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 326 100% 74%; --s: 265 89% 78%; --a: 31 100% 71%; --n: 230 15% 30%; --b1: 231 15% 18%; --bc: 60 30% 96%; --in: 191 97% 77%; --su: 135 94% 65%; --wa: 65 92% 76%; --er: 0 100% 67% } [data-theme=cmyk] { color-scheme: light; --pf: 203 83% 53%; --sf: 335 78% 53%; --af: 56 100% 53%; --nf: 0 0% 3%; --b2: 0 0% 93%; --b3: 0 0% 86%; --bc: 146 0% 19%; --pc: 207 32% 14%; --sc: 344 100% 93%; --ac: 54 41% 14%; --nc: 145 0% 80%; --inc: 194 26% 12%; --suc: 295 30% 87%; --wac: 24 46% 13%; --erc: 12 100% 91%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 203 83% 60%; --s: 335 78% 60%; --a: 56 100% 60%; --n: 0 0% 10%; --b1: 0 0% 100%; --in: 192 48% 52%; --su: 291 48% 38%; --wa: 25 85% 57%; --er: 4 81% 56% } [data-theme=autumn] { color-scheme: light; --pf: 344 96% 21%; --sf: 0 63% 51%; --af: 27 56% 56%; --nf: 22 17% 37%; --b2: 0 0% 88%; --b3: 0 0% 81%; --bc: 145 0% 18%; --pc: 2 46% 87%; --sc: 6 87% 92%; --ac: 27 25% 13%; --nc: 21 15% 88%; --inc: 188 26% 12%; --suc: 161 25% 89%; --wac: 28 55% 12%; --erc: 8 100% 91%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 344 96% 28%; --s: 0 63% 58%; --a: 27 56% 63%; --n: 22 17% 44%; --b1: 0 0% 95%; --in: 187 48% 50%; --su: 165 34% 43%; --wa: 30 84% 50%; --er: 354 79% 49% } [data-theme=business] { color-scheme: dark; --pf: 210 64% 24%; --sf: 200 13% 48%; --af: 13 80% 53%; --nf: 213 14% 9%; --b2: 0 0% 6%; --b3: 0 0% 0%; --bc: 145 0% 80%; --pc: 219 26% 86%; --sc: 200 7% 12%; --ac: 14 40% 13%; --nc: 214 3% 81%; --inc: 210 64% 91%; --suc: 141 16% 12%; --wac: 37 30% 13%; --erc: 11 59% 89%; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 210 64% 31%; --s: 200 13% 55%; --a: 13 80% 60%; --n: 213 14% 16%; --b1: 0 0% 13%; --in: 199 100% 42%; --su: 144 31% 56%; --wa: 39 64% 60%; --er: 6 56% 43%; --rounded-box: 0.25rem; --rounded-btn: .125rem; --rounded-badge: .125rem } [data-theme=acid] { color-scheme: light; --pf: 303 100% 43%; --sf: 27 100% 43%; --af: 72 98% 43%; --nf: 238 43% 10%; --b2: 0 0% 91%; --b3: 0 0% 84%; --bc: 145 0% 19%; --pc: 302 100% 93%; --sc: 25 62% 12%; --ac: 73 44% 13%; --nc: 248 11% 82%; --inc: 217 36% 14%; --suc: 145 23% 13%; --wac: 50 42% 13%; --erc: 15 100% 90%; --animation-btn: 0.25s; --animation-input: .2s; --btn-text-case: uppercase; --btn-focus-scale: 0.95; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 303 100% 50%; --s: 27 100% 50%; --a: 72 98% 50%; --n: 238 43% 17%; --b1: 0 0% 98%; --in: 210 92% 58%; --su: 149 50% 58%; --wa: 53 93% 57%; --er: 1 100% 45%; --rounded-box: 1.25rem; --rounded-btn: 1rem; --rounded-badge: 1rem } [data-theme=lemonade] { color-scheme: light; --pf: 89 96% 24%; --sf: 60 81% 48%; --af: 63 80% 81%; --nf: 238 43% 10%; --b2: 0 0% 93%; --b3: 0 0% 86%; --bc: 146 0% 19%; --pc: 89 39% 87%; --sc: 58 39% 13%; --ac: 62 8% 17%; --nc: 248 11% 82%; --inc: 192 5% 17%; --suc: 74 15% 16%; --wac: 49 21% 15%; --erc: 2 11% 16%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 89 96% 31%; --s: 60 81% 55%; --a: 63 80% 88%; --n: 238 43% 17%; --b1: 0 0% 100%; --in: 192 39% 85%; --su: 74 76% 79%; --wa: 50 87% 75%; --er: 1 70% 83% } [data-theme=night] { color-scheme: dark; --pf: 198 93% 53%; --sf: 234 89% 67%; --af: 329 86% 63%; --b2: 222 47% 4%; --b3: 0 0% 0%; --bc: 229 7% 80%; --pc: 202 34% 14%; --sc: 239 22% 15%; --ac: 332 26% 15%; --nc: 221 7% 82%; --suc: 169 31% 13%; --wac: 39 36% 14%; --erc: 354 28% 15%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 198 93% 60%; --s: 234 89% 74%; --a: 329 86% 70%; --n: 217 33% 17%; --nf: 217 30% 22%; --b1: 222 47% 11%; --in: 198 90% 48%; --inc: 0 0% 0%; --su: 172 66% 50%; --wa: 41 88% 64%; --er: 351 95% 71% } [data-theme=coffee] { color-scheme: dark; --pf: 30 67% 51%; --sf: 182 25% 13%; --af: 194 74% 18%; --nf: 0 0% 0%; --b2: 306 19% 4%; --b3: 0 0% 0%; --pc: 28 35% 13%; --sc: 182 6% 83%; --ac: 199 20% 85%; --nc: 300 1% 79%; --inc: 170 12% 14%; --suc: 92 11% 13%; --wac: 41 33% 14%; --erc: 11 25% 15%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 30 67% 58%; --s: 182 25% 20%; --a: 194 74% 25%; --n: 300 20% 6%; --b1: 306 19% 11%; --bc: 37 8% 42%; --in: 171 37% 67%; --su: 93 25% 62%; --wa: 43 100% 69%; --er: 10 95% 75% } [data-theme=winter] { color-scheme: light; --pf: 212 100% 44%; --sf: 247 47% 36%; --af: 310 49% 45%; --nf: 217 92% 3%; --pc: 231 100% 93%; --sc: 256 40% 88%; --ac: 316 56% 91%; --nc: 229 10% 80%; --inc: 192 18% 16%; --suc: 181 16% 14%; --wac: 32 9% 16%; --erc: 2 19% 15%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 212 100% 51%; --s: 247 47% 43%; --a: 310 49% 52%; --n: 217 92% 10%; --b1: 0 0% 100%; --b2: 217 100% 97%; --b3: 219 44% 92%; --bc: 214 30% 32%; --in: 192 93% 78%; --su: 182 47% 66%; --wa: 32 62% 84%; --er: 0 63% 72% } .btn{text-transform:none!important;letter-spacing:normal!important} .container{width:100%;}@media (min-width: 640px){.container{max-width:640px;}}@media (min-width: 768px){.container{max-width:768px;}}@media (min-width: 1024px){.container{max-width:1024px;}}@media (min-width: 1280px){.container{max-width:1280px;}}@media (min-width: 1536px){.container{max-width:1536px;}}:root, [data-theme] { background-color: hsl(var(--b1) / var(--un-bg-opacity, 1)); color: hsl(var(--bc) / var(--un-text-opacity, 1)) } html { -webkit-tap-highlight-color: transparent }.alert { display: grid; width: 100%; grid-auto-flow: row; align-content: flex-start; align-items: center; justify-items: center; gap: 1rem; text-align: center; border-width: 1px; --un-border-opacity: 1; border-color: hsl(var(--b2) / var(--un-border-opacity)); padding: 1rem; --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-text-opacity)); border-radius: var(--rounded-box, 1rem); --alert-bg: hsl(var(--b2)); --alert-bg-mix: hsl(var(--b1)); background-color: var(--alert-bg) } .alert { grid-auto-flow: column; grid-template-columns: auto minmax(auto,1fr); justify-items: start; text-align: left } .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-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; height: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; width: -moz-fit-content; width: fit-content; padding-left: 0.563rem; padding-right: 0.563rem; border-width: 1px; --un-border-opacity: 1; border-color: hsl(var(--b2) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--b1) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-text-opacity)); border-radius: var(--rounded-badge, 1.9rem) } .link-hover:hover { text-decoration-line: underline } .link-primary:hover { --un-text-opacity: 1; color: hsl(var(--pf) / var(--un-text-opacity)) } .link-secondary:hover { --un-text-opacity: 1; color: hsl(var(--sf) / var(--un-text-opacity)) } .link-accent:hover { --un-text-opacity: 1; color: hsl(var(--af) / var(--un-text-opacity)) } .link-neutral:hover { --un-text-opacity: 1; color: hsl(var(--nf) / var(--un-text-opacity)) } .link-success:hover { --un-text-opacity: 1; color: hsl(var(--su) / var(--un-text-opacity)) } .link-info:hover { --un-text-opacity: 1; color: hsl(var(--in) / var(--un-text-opacity)) } .link-warning:hover { --un-text-opacity: 1; color: hsl(var(--wa) / var(--un-text-opacity)) } .link-error:hover { --un-text-opacity: 1; color: hsl(var(--er) / var(--un-text-opacity)) } .link { cursor: pointer; text-decoration-line: underline } .link-hover { text-decoration-line: none } .link-primary { --un-text-opacity: 1; color: hsl(var(--p) / var(--un-text-opacity)) } .link-secondary { --un-text-opacity: 1; color: hsl(var(--s) / var(--un-text-opacity)) } .link-accent { --un-text-opacity: 1; color: hsl(var(--a) / var(--un-text-opacity)) } .link-neutral { --un-text-opacity: 1; color: hsl(var(--n) / var(--un-text-opacity)) } .link-success { --un-text-opacity: 1; color: hsl(var(--su) / var(--un-text-opacity)) } .link-info { --un-text-opacity: 1; color: hsl(var(--in) / var(--un-text-opacity)) } .link-warning { --un-text-opacity: 1; color: hsl(var(--wa) / var(--un-text-opacity)) } .link-error { --un-text-opacity: 1; color: hsl(var(--er) / var(--un-text-opacity)) } .link:focus { outline: 2px solid transparent; outline-offset: 2px } .link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px } .label a:hover { --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-text-opacity)) } .label { display: flex; -webkit-user-select: none; -moz-user-select: none; user-select: none; align-items: center; justify-content: space-between; padding-left: 0.25rem; padding-right: 0.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem } .menu li > *:not(ul):not(.menu-title):not(details):active, .menu li > *:not(ul):not(.menu-title):not(details).active, .menu li > details > summary:active { --un-bg-opacity: 1; background-color: hsl(var(--n) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--nc) / var(--un-text-opacity)) } :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover { cursor: pointer; background-color: hsl(var(--bc) / 0.1); --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-text-opacity)); outline: 2px solid transparent; outline-offset: 2px } .menu { display: flex; flex-direction: column; flex-wrap: wrap; font-size: 0.875rem; line-height: 1.25rem; padding: 0.5rem } .menu :where(li ul) { position: relative; white-space: nowrap; margin-left: 1rem; padding-left: 0.5rem } .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) { display: grid; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: 0.5rem; grid-auto-columns: minmax(auto, max-content) auto max-content; -webkit-user-select: none; -moz-user-select: none; user-select: none } .menu li.disabled { cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: hsl(var(--bc) / 0.3) } .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) { display: none } :where(.menu li) { position: relative; display: flex; flex-shrink: 0; flex-direction: column; flex-wrap: wrap; align-items: stretch } :where(.menu li) .badge { justify-self: end } :where(.menu li:empty) { background-color: hsl(var(--bc) / 0.1); margin: 0.5rem 1rem; height: 1px } .menu :where(li ul):before { position: absolute; bottom: 0.75rem; left: 0px; top: 0.75rem; width: 1px; background-color: hsl(var(--bc) / 0.1); content: "" } .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) { padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: left; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; border-radius: var(--rounded-btn, 0.5rem); text-wrap: balance } :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus, :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active):focus, :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):is(summary):not(.active):focus-visible, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active).focus, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible { cursor: pointer; background-color: hsl(var(--bc) / 0.1); --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-text-opacity)); outline: 2px solid transparent; outline-offset: 2px } .menu li > *:not(ul):not(.menu-title):not(details):active, .menu li > *:not(ul):not(.menu-title):not(details).active, .menu li > details > summary:active { --un-bg-opacity: 1; background-color: hsl(var(--n) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--nc) / var(--un-text-opacity)) } .menu :where(li > details > summary)::-webkit-details-marker { display: none } .menu :where(li > details > summary):after, .menu :where(li > .menu-dropdown-toggle):after { justify-self: end; display: block; margin-top: -0.5rem; height: 0.5rem; width: 0.5rem; transform: rotate(45deg); transition-property: transform, margin-top; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); content: ""; transform-origin: 75% 75%; box-shadow: 2px 2px; pointer-events: none } .menu :where(li > details[open] > summary):after, .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { transform: rotate(225deg); margin-top: 0 } .tab:hover { --un-text-opacity: 1 } .tab[disabled], .tab[disabled]:hover { cursor: not-allowed; color: hsl(var(--bc) / var(--un-text-opacity)); --un-text-opacity: 0.2 } .tab { position: relative; display: inline-flex; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; height: 2rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; --tab-padding: 1rem; --un-text-opacity: 0.5; --tab-color: hsl(var(--bc) / var(--un-text-opacity, 1)); --tab-bg: hsl(var(--b1) / var(--un-bg-opacity, 1)); --tab-border-color: hsl(var(--b3) / var(--un-bg-opacity, 1)); color: var(--tab-color); padding-left: var(--tab-padding, 1rem); padding-right: var(--tab-padding, 1rem) } .tab.tab-active:not(.tab-disabled):not([disabled]) { border-color: hsl(var(--bc) / var(--un-border-opacity)); --un-border-opacity: 1; --un-text-opacity: 1 } .tab:focus { outline: 2px solid transparent; outline-offset: 2px } .tab:focus-visible { outline: 2px solid currentColor; outline-offset: -3px } .tab:focus-visible.tab-lifted { border-bottom-right-radius: var(--tab-radius, 0.5rem); border-bottom-left-radius: var(--tab-radius, 0.5rem) } .table-zebra tr.hover:hover, .table-zebra tr.hover:nth-child(even):hover { --un-bg-opacity: 1; background-color: hsl(var(--b3) / var(--un-bg-opacity)) } .table-zebra tbody tr:nth-child(even) :where(.table-pin-cols tr th) { --un-bg-opacity: 1; background-color: hsl(var(--b2) / var(--un-bg-opacity)) } .table-zebra tr.active, .table-zebra tr.active:nth-child(even), .table-zebra-zebra tbody tr:nth-child(even) { --un-bg-opacity: 1; background-color: hsl(var(--b3) / var(--un-bg-opacity)) } .btn { display: inline-flex; flex-shrink: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; flex-wrap: wrap; align-items: center; justify-content: center; border-color: transparent; border-color: hsl(var(--b2) / var(--un-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-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; border-radius: var(--rounded-btn, 0.5rem); height: 3rem; padding-left: 1rem; padding-right: 1rem; min-height: 3rem; font-size: 0.875rem; line-height: 1em; gap: 0.5rem; font-weight: 600; text-decoration-line: none; text-decoration-line: none; border-width: var(--border-btn, 1px); animation: button-pop var(--animation-btn, 0.25s) ease-out; text-transform: var(--btn-text-case, uppercase); --un-border-opacity: 1; --un-bg-opacity: 1; background-color: hsl(var(--b2) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-text-opacity)); outline-color: hsl(var(--bc) / 1) } .btn:is(input[type="checkbox"]), .btn:is(input[type="radio"]) { width: auto; -webkit-appearance: none; -moz-appearance: none; appearance: none } .btn:is(input[type="checkbox"]):after, .btn:is(input[type="radio"]):after { --un-content: attr(aria-label); content: var(--un-content) } .btn:hover { --un-border-opacity: 1; border-color: hsl(var(--b3) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--b3) / var(--un-bg-opacity)) } .btn.glass:hover { --glass-opacity: 25%; --glass-border-opacity: 15% } .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover { --un-border-opacity: 1; border-color: hsl(var(--pf) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--pf) / var(--un-bg-opacity)) } .btn:active:hover, .btn:active:focus { animation: button-pop 0s ease-out; transform: scale(var(--btn-focus-scale, 0.97)) } .btn:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px } .btn.glass { --un-shadow: 0 0 #0000; --un-shadow-colored: 0 0 #0000; box-shadow: var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow); outline-color: currentColor } .btn.glass.btn-active { --glass-opacity: 25%; --glass-border-opacity: 15% } .btn.btn-disabled, .btn[disabled], .btn:disabled { --un-border-opacity: 0; background-color: hsl(var(--n) / var(--un-bg-opacity)); --un-bg-opacity: 0.2; color: hsl(var(--bc) / var(--un-text-opacity)); --un-text-opacity: 0.2 } .btn:is(input[type="checkbox"]:checked), .btn:is(input[type="radio"]:checked) { --un-border-opacity: 1; border-color: hsl(var(--p) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--p) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--pc) / var(--un-text-opacity)) } .btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible { outline-color: hsl(var(--p) / 1) } .btn-circle { height: 3rem; width: 3rem; border-radius: 9999px; padding: 0px } .btn-circle:where(.btn-xs) { height: 1.5rem; width: 1.5rem; border-radius: 9999px; padding: 0px } .btn-circle:where(.btn-sm) { height: 2rem; width: 2rem; border-radius: 9999px; padding: 0px } .btn-circle:where(.btn-md) { height: 3rem; width: 3rem; border-radius: 9999px; padding: 0px } .btn-circle:where(.btn-lg) { height: 4rem; width: 4rem; border-radius: 9999px; padding: 0px } .card { position: relative; display: flex; flex-direction: column; border-radius: var(--rounded-box, 1rem) } .card:focus { outline: 2px solid transparent; outline-offset: 2px } .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; --un-bg-opacity: 1; background-color: hsl(var(--n) / var(--un-bg-opacity)); opacity: 0.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%; -o-object-fit: cover; object-fit: cover } .card.image-full > .card-body { position: relative; z-index: 20; --un-text-opacity: 1; color: hsl(var(--nc) / var(--un-text-opacity)) } .card :where(figure:first-child) { overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-start-radius: unset; border-end-end-radius: unset } .card :where(figure:last-child) { overflow: hidden; border-start-start-radius: unset; border-start-end-radius: unset; border-end-start-radius: inherit; border-end-end-radius: inherit } .card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px } .card.bordered { border-width: 1px; --un-border-opacity: 1; border-color: hsl(var(--b2) / var(--un-border-opacity)) } .card.compact .card-body { padding: 1rem; font-size: 0.875rem; line-height: 1.25rem } .card.image-full :where(figure) { overflow: hidden; border-radius: inherit } .card-body { display: flex; display: flex; flex: 1 1 auto; flex-direction: column; flex-direction: column; padding: var(--padding-card, 2rem); gap: 0.5rem } .card-body :where(p) { flex-grow: 1 } .card-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem } .checkbox { flex-shrink: 0; --chkbg: var(--bc); --chkfg: var(--b1); height: 1.5rem; width: 1.5rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-width: 1px; border-color: hsl(var(--bc) / var(--un-border-opacity)); --un-border-opacity: 0.2; border-radius: var(--rounded-btn, 0.5rem) } .checkbox:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: hsl(var(--bc) / 1) } .checkbox:checked, .checkbox[checked="true"], .checkbox[aria-checked="true"] { --un-bg-opacity: 1; background-color: hsl(var(--bc) / var(--un-bg-opacity)); background-repeat: no-repeat; animation: checkmark var(--animation-input, 0.2s) ease-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 { --un-bg-opacity: 1; background-color: hsl(var(--bc) / var(--un-bg-opacity)); background-repeat: no-repeat; animation: checkmark var(--animation-input, 0.2s) ease-out; background-image: linear-gradient(90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient(-90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient( 0deg, hsl(var(--chkbg)) 43%, hsl(var(--chkfg)) 43%, hsl(var(--chkfg)) 57%, hsl(var(--chkbg)) 57% ) } .checkbox:disabled { cursor: not-allowed; border-color: transparent; --un-bg-opacity: 1; background-color: hsl(var(--bc) / var(--un-bg-opacity)); opacity: 0.2 } [dir="rtl"] .checkbox:checked, [dir="rtl"] .checkbox[checked="true"], [dir="rtl"] .checkbox[aria-checked="true"] { 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%) } .collapse:not(td):not(tr):not(colgroup) { visibility: visible } .collapse { position: relative; display: grid; overflow: hidden; grid-template-rows: auto 0fr; transition: grid-template-rows 0.2s; width: 100%; border-radius: var(--rounded-box, 1rem) } .collapse > input[type="checkbox"], .collapse > input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; opacity: 0 } .collapse[open], .collapse-open, .collapse:focus:not(.collapse-close) { grid-template-rows: auto 1fr } .collapse:not(.collapse-close):has(> input[type="checkbox"]:checked), .collapse:not(.collapse-close):has(> input[type="radio"]:checked) { grid-template-rows: auto 1fr } .collapse[open] > .collapse-content, .collapse-open > .collapse-content, .collapse:focus:not(.collapse-close) > .collapse-content, .collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content, .collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content { visibility: visible; min-height: -moz-fit-content; min-height: fit-content } .collapse:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: hsl(var(--bc) / 1) } .collapse:has(.collapse-title:focus-visible), .collapse:has(> input[type="checkbox"]:focus-visible), .collapse:has(> input[type="radio"]:focus-visible) { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: hsl(var(--bc) / 1) } .collapse:not(.collapse-open):not(.collapse-close) > input[type="checkbox"], .collapse:not(.collapse-open):not(.collapse-close) > input[type="radio"]:not(:checked), .collapse:not(.collapse-open):not(.collapse-close) > .collapse-title { cursor: pointer } .collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) > .collapse-title { cursor: unset } :where(.collapse > input[type="checkbox"]), :where(.collapse > input[type="radio"]) { z-index: 1 } .collapse[open] > :where(.collapse-content), .collapse-open > :where(.collapse-content), .collapse:focus:not(.collapse-close) > :where(.collapse-content), .collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content), .collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content) { padding-bottom: 1rem; transition: padding 0.2s ease-out, background-color 0.2s ease-out } .collapse[open].collapse-arrow > .collapse-title:after, .collapse-open.collapse-arrow > .collapse-title:after, .collapse-arrow:focus:not(.collapse-close) > .collapse-title:after, .collapse-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after, .collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after { --un-translate-y: -50%; --un-rotate: 225deg; transform: translate(var(--un-translate-x), var(--un-translate-y)) rotate(var(--un-rotate)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) } [dir="rtl"] .collapse[open].collapse-arrow > .collapse-title:after, [dir="rtl"] .collapse-open.collapse-arrow > .collapse-title:after, [dir="rtl"] .collapse-arrow:focus:not(.collapse-close) .collapse-title:after, [dir="rtl"] .collapse-arrow:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after { --un-rotate: 135deg } .collapse[open].collapse-plus > .collapse-title:after, .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, .collapse-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after { content: "−" } .collapse-title, .collapse > input[type="checkbox"], .collapse > input[type="radio"], .collapse-content { grid-column-start: 1; grid-row-start: 1 } .collapse-title { position: relative } .collapse-title, :where(.collapse > input[type="checkbox"]), :where(.collapse > input[type="radio"]) { width: 100%; padding: 1rem; padding-right: 3rem; min-height: 3.75rem; transition: background-color 0.2s ease-out } .collapse-content { visibility: hidden; grid-column-start: 1; grid-row-start: 2; min-height: 0px; transition: visibility 0.2s; transition: padding 0.2s ease-out, background-color 0.2s ease-out; padding-left: 1rem; padding-right: 1rem; cursor: unset } .divider { display: flex; flex-direction: row; align-items: center; align-self: stretch; margin-top: 1rem; margin-bottom: 1rem; height: 1rem; white-space: nowrap } .divider:before, .divider:after { content: ""; flex-grow: 1; height: 0.125rem; width: 100% } .divider:before { background-color: hsl(var(--bc) / var(--un-bg-opacity)); --un-bg-opacity: 0.1 } .divider:after { background-color: hsl(var(--bc) / var(--un-bg-opacity)); --un-bg-opacity: 0.1 } .divider:not(:empty) { gap: 1rem } .dropdown { position: relative; display: inline-block } .dropdown > *:not(summary):focus { outline: 2px solid transparent; outline-offset: 2px } .dropdown .dropdown-content { position: absolute } .dropdown:is(:not(details)) .dropdown-content { visibility: hidden; opacity: 0; transform-origin: top; --un-scale-x: .95; --un-scale-y: .95; transform: translate(var(--un-translate-x), var(--un-translate-y)) rotate(var(--un-rotate)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms } .dropdown.dropdown-open .dropdown-content, .dropdown:not(.dropdown-hover):focus .dropdown-content, .dropdown:focus-within .dropdown-content { visibility: visible; opacity: 1 } .dropdown.dropdown-hover:hover .dropdown-content { visibility: visible; opacity: 1 } .dropdown.dropdown-hover:hover .dropdown-content { --un-scale-x: 1; --un-scale-y: 1; transform: translate(var(--un-translate-x), var(--un-translate-y)) rotate(var(--un-rotate)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) } .dropdown:is(details) summary::-webkit-details-marker { display: none } .dropdown.dropdown-open .dropdown-content, .dropdown:focus .dropdown-content, .dropdown:focus-within .dropdown-content { --un-scale-x: 1; --un-scale-y: 1; transform: translate(var(--un-translate-x), var(--un-translate-y)) rotate(var(--un-rotate)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) } .dropdown-end .dropdown-content { right: 0px } .dropdown-end.dropdown-right .dropdown-content { bottom: 0px; top: auto } .dropdown-end.dropdown-left .dropdown-content { bottom: 0px; top: auto } .btn-primary:hover { --un-border-opacity: 1; border-color: hsl(var(--pf) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--pf) / var(--un-bg-opacity)) } .btn-primary { --un-border-opacity: 1; border-color: hsl(var(--p) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--p) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--pc) / var(--un-text-opacity)); outline-color: hsl(var(--p) / 1) } .btn-primary.btn-active { --un-border-opacity: 1; border-color: hsl(var(--pf) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--pf) / var(--un-bg-opacity)) } .btn-accent:hover { --un-border-opacity: 1; border-color: hsl(var(--af) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--af) / var(--un-bg-opacity)) } .btn-accent { --un-border-opacity: 1; border-color: hsl(var(--a) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--a) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--ac) / var(--un-text-opacity)); outline-color: hsl(var(--a) / 1) } .btn-accent.btn-active { --un-border-opacity: 1; border-color: hsl(var(--af) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--af) / var(--un-bg-opacity)) } .btn-success:hover { --un-border-opacity: 1; border-color: hsl(var(--su) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--su) / var(--un-bg-opacity)) } .btn-success { --un-border-opacity: 1; border-color: hsl(var(--su) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--su) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--suc) / var(--un-text-opacity)); outline-color: hsl(var(--su) / 1) } .btn-success.btn-active { --un-border-opacity: 1; border-color: hsl(var(--su) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--su) / var(--un-bg-opacity)) } .btn-warning:hover { --un-border-opacity: 1; border-color: hsl(var(--wa) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--wa) / var(--un-bg-opacity)) } .btn-warning { --un-border-opacity: 1; border-color: hsl(var(--wa) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--wa) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--wac) / var(--un-text-opacity)); outline-color: hsl(var(--wa) / 1) } .btn-warning.btn-active { --un-border-opacity: 1; border-color: hsl(var(--wa) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--wa) / var(--un-bg-opacity)) } .btn-error:hover { --un-border-opacity: 1; border-color: hsl(var(--er) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--er) / var(--un-bg-opacity)) } .btn-error { --un-border-opacity: 1; border-color: hsl(var(--er) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--er) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--erc) / var(--un-text-opacity)); outline-color: hsl(var(--er) / 1) } .btn-error.btn-active { --un-border-opacity: 1; border-color: hsl(var(--er) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--er) / var(--un-bg-opacity)) } .btn-ghost:hover { --un-border-opacity: 0; background-color: hsl(var(--bc) / var(--un-bg-opacity)); --un-bg-opacity: 0.2 } .btn-ghost { border-width: 1px; border-color: transparent; background-color: transparent; color: currentColor; --un-shadow: 0 0 #0000; --un-shadow-colored: 0 0 #0000; box-shadow: var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow); outline-color: currentColor } .btn-ghost.btn-active { --un-border-opacity: 0; background-color: hsl(var(--bc) / var(--un-bg-opacity)); --un-bg-opacity: 0.2 } .btn-outline:hover { --un-border-opacity: 1; border-color: hsl(var(--bc) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--bc) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--b1) / var(--un-text-opacity)) } .btn-outline.btn-primary:hover { --un-border-opacity: 1; border-color: hsl(var(--pf) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--pf) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--pc) / var(--un-text-opacity)) } .btn-outline.btn-secondary:hover { --un-border-opacity: 1; border-color: hsl(var(--sf) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--sf) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--sc) / var(--un-text-opacity)) } .btn-outline.btn-accent:hover { --un-border-opacity: 1; border-color: hsl(var(--af) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--af) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--ac) / var(--un-text-opacity)) } .btn-outline.btn-success:hover { --un-border-opacity: 1; border-color: hsl(var(--su) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--su) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--suc) / var(--un-text-opacity)) } .btn-outline.btn-info:hover { --un-border-opacity: 1; border-color: hsl(var(--in) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--in) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--inc) / var(--un-text-opacity)) } .btn-outline.btn-warning:hover { --un-border-opacity: 1; border-color: hsl(var(--wa) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--wa) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--wac) / var(--un-text-opacity)) } .btn-outline.btn-error:hover { --un-border-opacity: 1; border-color: hsl(var(--er) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--er) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--erc) / var(--un-text-opacity)) } .btn-outline { border-color: currentColor; background-color: transparent; --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-text-opacity)); --un-shadow: 0 0 #0000; --un-shadow-colored: 0 0 #0000; box-shadow: var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow) } .btn-outline.btn-active { --un-border-opacity: 1; border-color: hsl(var(--bc) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--bc) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--b1) / var(--un-text-opacity)) } .btn-outline.btn-primary { --un-text-opacity: 1; color: hsl(var(--p) / var(--un-text-opacity)) } .btn-outline.btn-primary.btn-active { --un-border-opacity: 1; border-color: hsl(var(--pf) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--pf) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--pc) / var(--un-text-opacity)) } .btn-outline.btn-secondary { --un-text-opacity: 1; color: hsl(var(--s) / var(--un-text-opacity)) } .btn-outline.btn-secondary.btn-active { --un-border-opacity: 1; border-color: hsl(var(--sf) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--sf) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--sc) / var(--un-text-opacity)) } .btn-outline.btn-accent { --un-text-opacity: 1; color: hsl(var(--a) / var(--un-text-opacity)) } .btn-outline.btn-accent.btn-active { --un-border-opacity: 1; border-color: hsl(var(--af) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--af) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--ac) / var(--un-text-opacity)) } .btn-outline.btn-success { --un-text-opacity: 1; color: hsl(var(--su) / var(--un-text-opacity)) } .btn-outline.btn-success.btn-active { --un-border-opacity: 1; border-color: hsl(var(--su) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--su) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--suc) / var(--un-text-opacity)) } .btn-outline.btn-info { --un-text-opacity: 1; color: hsl(var(--in) / var(--un-text-opacity)) } .btn-outline.btn-info.btn-active { --un-border-opacity: 1; border-color: hsl(var(--in) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--in) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--inc) / var(--un-text-opacity)) } .btn-outline.btn-warning { --un-text-opacity: 1; color: hsl(var(--wa) / var(--un-text-opacity)) } .btn-outline.btn-warning.btn-active { --un-border-opacity: 1; border-color: hsl(var(--wa) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--wa) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--wac) / var(--un-text-opacity)) } .btn-outline.btn-error { --un-text-opacity: 1; color: hsl(var(--er) / var(--un-text-opacity)) } .btn-outline.btn-error.btn-active { --un-border-opacity: 1; border-color: hsl(var(--er) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--er) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--erc) / var(--un-text-opacity)) } .footer { display: grid; width: 100%; grid-auto-flow: row; place-items: start; -moz-column-gap: 1rem; column-gap: 1rem; row-gap: 2.5rem; font-size: 0.875rem; line-height: 1.25rem } .footer > * { display: grid; place-items: start; gap: 0.5rem } .footer { grid-auto-flow: column } .form-control { display: flex; flex-direction: column } .input { flex-shrink: 1; height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: 0.875rem; font-size: 1rem; line-height: 1.25rem; line-height: 2; line-height: 1.5rem; border-width: 1px; border-color: hsl(var(--bc) / var(--un-border-opacity)); --un-border-opacity: 0; --un-bg-opacity: 1; background-color: hsl(var(--b1) / var(--un-bg-opacity)); border-radius: var(--rounded-btn, 0.5rem) } .input input:focus { outline: 2px solid transparent; outline-offset: 2px } .input[list]::-webkit-calendar-picker-indicator { line-height: 1em } .input:focus, .input:focus-within { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: hsl(var(--bc) / 0.2) } .join { display: inline-flex; align-items: stretch; border-radius: var(--rounded-btn, 0.5rem) } .join :where(.join-item) { border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 0; border-start-start-radius: 0 } .join .join-item:not(:first-child):not(:last-child), .join *:not(:first-child):not(:last-child) .join-item { border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 0; border-start-start-radius: 0 } .join .join-item:first-child:not(:last-child), .join *:first-child:not(:last-child) .join-item { border-start-end-radius: 0; border-end-end-radius: 0 } .join .dropdown .join-item:first-child:not(:last-child), .join *:first-child:not(:last-child) .dropdown .join-item { border-start-end-radius: inherit; border-end-end-radius: inherit } .join :where(.join-item:first-child:not(:last-child)), .join :where(*:first-child:not(:last-child) .join-item) { border-end-start-radius: inherit; border-start-start-radius: inherit } .join .join-item:last-child:not(:first-child), .join *:last-child:not(:first-child) .join-item { border-end-start-radius: 0; border-start-start-radius: 0 } .join :where(.join-item:last-child:not(:first-child)), .join :where(*:last-child:not(:first-child) .join-item) { border-start-end-radius: inherit; border-end-end-radius: inherit } :where(.join *) { border-radius: inherit } :where(.join *:has(.join-item)) { border-radius: inherit } .join > :where(*:not(:first-child)) { margin-top: 0px; margin-bottom: 0px; margin-left: -1px } .join.join-vertical { flex-direction: column } .join.join-vertical .join-item:first-child:not(:last-child), .join.join-vertical *:first-child:not(:last-child) .join-item { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: inherit; border-top-right-radius: inherit } .join.join-vertical .join-item:last-child:not(:first-child), .join.join-vertical *:last-child:not(:first-child) .join-item { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit } .join.join-horizontal { flex-direction: row } .join.join-horizontal .join-item:first-child:not(:last-child), .join.join-horizontal *:first-child:not(:last-child) .join-item { border-bottom-right-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: inherit; border-top-left-radius: inherit } .join.join-horizontal .join-item:last-child:not(:first-child), .join.join-horizontal *:last-child:not(:first-child) .join-item { border-bottom-left-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: inherit; border-top-right-radius: inherit } .join.join-vertical > :where(*:not(:first-child)) { margin-left: 0px; margin-right: 0px; margin-top: -1px } .join.join-horizontal > :where(*:not(:first-child)) { margin-top: 0px; margin-bottom: 0px; margin-left: -1px } .kbd { display: inline-flex; align-items: center; justify-content: center; border-width: 1px; border-color: hsl(var(--bc) / var(--un-border-opacity)); --un-border-opacity: 0.2; --un-bg-opacity: 1; background-color: hsl(var(--b2) / var(--un-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; border-radius: var(--rounded-btn, 0.5rem); border-bottom-width: 2px; min-height: 2.2em; min-width: 2.2em } .modal { pointer-events: none; position: fixed; inset: 0px; margin: 0px; display: grid; height: 100%; max-height: none; width: 100%; max-width: none; justify-items: center; padding: 0px; opacity: 0; overscroll-behavior: contain; overscroll-behavior: contain; z-index: 999; background-color: transparent; color: inherit; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-property: transform, opacity, visibility; overflow-y: hidden } :where(.modal) { align-items: center } .modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open] { pointer-events: auto; visibility: visible; opacity: 1 } :root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) { overflow: hidden } .modal:not(dialog:not(.modal-open)), .modal::backdrop { background-color: rgba(0, 0, 0, 0.3); animation: modal-pop 0.2s ease-out } .modal-open .modal-box, .modal-toggle:checked + .modal .modal-box, .modal:target .modal-box, .modal[open] .modal-box { --un-translate-y: 0px; --un-scale-x: 1; --un-scale-y: 1; transform: translate(var(--un-translate-x), var(--un-translate-y)) rotate(var(--un-rotate)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) } .modal-box { max-height: calc(100vh - 5em); grid-column-start: 1; grid-row-start: 1; width: 91.666667%; max-width: 32rem; --un-scale-x: .9; --un-scale-y: .9; transform: translate(var(--un-translate-x), var(--un-translate-y)) rotate(var(--un-rotate)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)); --un-bg-opacity: 1; background-color: hsl(var(--b1) / var(--un-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-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 200ms; border-top-left-radius: var(--rounded-box, 1rem); border-top-right-radius: var(--rounded-box, 1rem); border-bottom-left-radius: var(--rounded-box, 1rem); border-bottom-right-radius: var(--rounded-box, 1rem); box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; overflow-y: auto; overscroll-behavior: contain } .modal-action { display: flex; margin-top: 1.5rem; justify-content: flex-end } .modal-action > :not([hidden]) ~ :not([hidden]) { --un-space-x-reverse: 0; margin-right: calc(0.5rem * var(--un-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--un-space-x-reverse))) } .navbar { display: flex; align-items: center; padding: var(--navbar-padding, 0.5rem); min-height: 4rem; width: 100% } :where(.navbar > *) { display: inline-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%; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; height: 0.5rem; background-color: hsl(var(--bc) / 0.2); border-radius: var(--rounded-box, 1rem) } .progress::-moz-progress-bar { --un-bg-opacity: 1; background-color: hsl(var(--bc) / var(--un-bg-opacity)); border-radius: var(--rounded-box, 1rem) } .progress:indeterminate { --progress-color: hsl(var(--bc)); background-image: repeating-linear-gradient( 90deg, var(--progress-color) -1%, var(--progress-color) 10%, transparent 10%, transparent 90% ); background-size: 200%; background-position-x: 15%; animation: progress-loading 5s ease-in-out infinite } .progress::-webkit-progress-bar { background-color: transparent; border-radius: var(--rounded-box, 1rem) } .progress::-webkit-progress-value { --un-bg-opacity: 1; background-color: hsl(var(--bc) / var(--un-bg-opacity)); border-radius: var(--rounded-box, 1rem) } .progress:indeterminate::-moz-progress-bar { background-color: transparent; background-image: repeating-linear-gradient( 90deg, var(--progress-color) -1%, var(--progress-color) 10%, transparent 10%, transparent 90% ); background-size: 200%; background-position-x: 15%; animation: progress-loading 5s ease-in-out infinite } .select { display: inline-flex; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 3rem; padding-left: 1rem; padding-right: 2.5rem; padding-right: 2.5rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; min-height: 3rem; border-width: 1px; border-color: hsl(var(--bc) / var(--un-border-opacity)); --un-border-opacity: 0; --un-bg-opacity: 1; background-color: hsl(var(--b1) / var(--un-bg-opacity)); border-radius: var(--rounded-btn, 0.5rem); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); background-size: 4px 4px, 4px 4px; background-repeat: no-repeat } .select[multiple] { height: auto } .select:focus { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: hsl(var(--bc) / 0.2) } [dir="rtl"] .select { background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%) } .stack { display: inline-grid; place-items: center; align-items: flex-end } .stack > * { grid-column-start: 1; grid-row-start: 1; transform: translateY(10%) scale(0.9); z-index: 1; width: 100%; opacity: 0.6 } .stack > *:nth-child(2) { transform: translateY(5%) scale(0.95); z-index: 2; opacity: 0.8 } .stack > *:nth-child(1) { transform: translateY(0) scale(1); z-index: 3; opacity: 1 } .stats { display: inline-grid; --un-bg-opacity: 1; background-color: hsl(var(--b1) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-text-opacity)); border-radius: var(--rounded-box, 1rem) } :where(.stats) { grid-auto-flow: column; overflow-x: auto } :where(.stats) > :not([hidden]) ~ :not([hidden]) { --un-divide-x-reverse: 0; border-right-width: calc(1px * var(--un-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--un-divide-x-reverse))); --un-divide-y-reverse: 0; border-top-width: calc(0px * calc(1 - var(--un-divide-y-reverse))); border-bottom-width: calc(0px * var(--un-divide-y-reverse)) } .stat { display: inline-grid; width: 100%; grid-template-columns: repeat(1, 1fr); -moz-column-gap: 1rem; column-gap: 1rem; border-color: hsl(var(--bc) / var(--un-border-opacity)); --un-border-opacity: 0.1; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1rem; padding-bottom: 1rem } .stat-title { grid-column-start: 1; white-space: nowrap; color: hsl(var(--bc) / 0.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: 0.75rem; line-height: 1rem; color: hsl(var(--bc) / 0.6) } .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 } .steps .step:before { top: 0px; grid-column-start: 1; grid-row-start: 1; height: 0.5rem; width: 100%; transform: translate(var(--un-translate-x), var(--un-translate-y)) rotate(var(--un-rotate)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)); --un-bg-opacity: 1; background-color: hsl(var(--b3) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-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; --un-bg-opacity: 1; background-color: hsl(var(--b3) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-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 { --un-bg-opacity: 1; background-color: hsl(var(--n) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--nc) / var(--un-text-opacity)) } .steps .step-primary + .step-primary:before, .steps .step-primary:after { --un-bg-opacity: 1; background-color: hsl(var(--p) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--pc) / var(--un-text-opacity)) } .steps .step-secondary + .step-secondary:before, .steps .step-secondary:after { --un-bg-opacity: 1; background-color: hsl(var(--s) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--sc) / var(--un-text-opacity)) } .steps .step-accent + .step-accent:before, .steps .step-accent:after { --un-bg-opacity: 1; background-color: hsl(var(--a) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--ac) / var(--un-text-opacity)) } .steps .step-info + .step-info:before { --un-bg-opacity: 1; background-color: hsl(var(--in) / var(--un-bg-opacity)) } .steps .step-info:after { --un-bg-opacity: 1; background-color: hsl(var(--in) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--inc) / var(--un-text-opacity)) } .steps .step-success + .step-success:before { --un-bg-opacity: 1; background-color: hsl(var(--su) / var(--un-bg-opacity)) } .steps .step-success:after { --un-bg-opacity: 1; background-color: hsl(var(--su) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--suc) / var(--un-text-opacity)) } .steps .step-warning + .step-warning:before { --un-bg-opacity: 1; background-color: hsl(var(--wa) / var(--un-bg-opacity)) } .steps .step-warning:after { --un-bg-opacity: 1; background-color: hsl(var(--wa) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--wac) / var(--un-text-opacity)) } .steps .step-error + .step-error:before { --un-bg-opacity: 1; background-color: hsl(var(--er) / var(--un-bg-opacity)) } .steps .step-error:after { --un-bg-opacity: 1; background-color: hsl(var(--er) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--erc) / var(--un-text-opacity)) } .swap { position: relative; display: inline-grid; -webkit-user-select: none; -moz-user-select: none; user-select: none; place-content: center; cursor: pointer } .swap > * { grid-column-start: 1; grid-row-start: 1; transition-duration: 300ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-property: transform, opacity } .swap input { -webkit-appearance: none; -moz-appearance: none; appearance: none } .swap .swap-on, .swap .swap-indeterminate, .swap input:indeterminate ~ .swap-on { opacity: 0 } .swap input:checked ~ .swap-off, .swap-active .swap-off, .swap input:indeterminate ~ .swap-off { opacity: 0 } .swap input:checked ~ .swap-on, .swap-active .swap-on, .swap input:indeterminate ~ .swap-indeterminate { opacity: 1 } .tabs { display: flex; flex-wrap: wrap; align-items: flex-end } .textarea { flex-shrink: 1; min-height: 3rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; border-width: 1px; border-color: hsl(var(--bc) / var(--un-border-opacity)); --un-border-opacity: 0; --un-bg-opacity: 1; background-color: hsl(var(--b1) / var(--un-bg-opacity)); border-radius: var(--rounded-btn, 0.5rem) } .textarea:focus { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: hsl(var(--bc) / 0.2) } .toggle { flex-shrink: 0; --tglbg: hsl(var(--b1)); --handleoffset: 1.5rem; --handleoffsetcalculator: calc(var(--handleoffset) * -1); --togglehandleborder: 0 0; height: 1.5rem; width: 3rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-width: 1px; border-color: hsl(var(--bc) / var(--un-border-opacity)); --un-border-opacity: 0.2; background-color: hsl(var(--bc) / var(--un-bg-opacity)); --un-bg-opacity: 0.5; border-radius: var(--rounded-badge, 1.9rem); transition: background, box-shadow var(--animation-input, 0.2s) ease-out; box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset, var(--togglehandleborder) } [dir="rtl"] .toggle { --handleoffsetcalculator: calc(var(--handleoffset) * 1) } .toggle:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: hsl(var(--bc) / 0.2) } .toggle:checked, .toggle[checked="true"], .toggle[aria-checked="true"] { --handleoffsetcalculator: var(--handleoffset); --un-border-opacity: 1; --un-bg-opacity: 1 } [dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[checked="true"], [dir="rtl"] .toggle[aria-checked="true"] { --handleoffsetcalculator: calc(var(--handleoffset) * -1) } .toggle:indeterminate { --un-border-opacity: 1; --un-bg-opacity: 1; box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset } [dir="rtl"] .toggle:indeterminate { box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset } .toggle:disabled { cursor: not-allowed; --un-border-opacity: 1; border-color: hsl(var(--bc) / var(--un-border-opacity)); background-color: transparent; opacity: 0.3; --togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset, var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset } .alert-warning { border-color: hsl(var(--wa) / 0.2); --un-text-opacity: 1; color: hsl(var(--wac) / var(--un-text-opacity)); --alert-bg: hsl(var(--wa)); --alert-bg-mix: hsl(var(--b1)) } .alert-error { border-color: hsl(var(--er) / 0.2); --un-text-opacity: 1; color: hsl(var(--erc) / var(--un-text-opacity)); --alert-bg: hsl(var(--er)); --alert-bg-mix: hsl(var(--b1)) } .badge-neutral { --un-border-opacity: 1; border-color: hsl(var(--n) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--n) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--nc) / var(--un-text-opacity)) } .badge-primary { --un-border-opacity: 1; border-color: hsl(var(--p) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--p) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--pc) / var(--un-text-opacity)) } .badge-secondary { --un-border-opacity: 1; border-color: hsl(var(--s) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--s) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--sc) / var(--un-text-opacity)) } .badge-accent { --un-border-opacity: 1; border-color: hsl(var(--a) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--a) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--ac) / var(--un-text-opacity)) } .badge-info { border-color: transparent; --un-bg-opacity: 1; background-color: hsl(var(--in) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--inc) / var(--un-text-opacity)) } .badge-success { border-color: transparent; --un-bg-opacity: 1; background-color: hsl(var(--su) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--suc) / var(--un-text-opacity)) } .badge-warning { border-color: transparent; --un-bg-opacity: 1; background-color: hsl(var(--wa) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--wac) / var(--un-text-opacity)) } .badge-error { border-color: transparent; --un-bg-opacity: 1; background-color: hsl(var(--er) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--erc) / var(--un-text-opacity)) } .badge-ghost { --un-border-opacity: 1; border-color: hsl(var(--b2) / var(--un-border-opacity)); --un-bg-opacity: 1; background-color: hsl(var(--b2) / var(--un-bg-opacity)); --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-text-opacity)) } .badge-outline { border-color: currentColor; --un-border-opacity: 0.5; background-color: transparent; color: currentColor } .badge-outline.badge-neutral { --un-text-opacity: 1; color: hsl(var(--n) / var(--un-text-opacity)) } .badge-outline.badge-primary { --un-text-opacity: 1; color: hsl(var(--p) / var(--un-text-opacity)) } .badge-outline.badge-secondary { --un-text-opacity: 1; color: hsl(var(--s) / var(--un-text-opacity)) } .badge-outline.badge-accent { --un-text-opacity: 1; color: hsl(var(--a) / var(--un-text-opacity)) } .badge-outline.badge-info { --un-text-opacity: 1; color: hsl(var(--in) / var(--un-text-opacity)) } .badge-outline.badge-success { --un-text-opacity: 1; color: hsl(var(--su) / var(--un-text-opacity)) } .badge-outline.badge-warning { --un-text-opacity: 1; color: hsl(var(--wa) / var(--un-text-opacity)) } .badge-outline.badge-error { --un-text-opacity: 1; color: hsl(var(--er) / var(--un-text-opacity)) } .card-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600 } .collapse-arrow > .collapse-title:after { position: absolute; display: block; height: 0.5rem; width: 0.5rem; --un-translate-y: -100%; --un-rotate: 45deg; transform: translate(var(--un-translate-x), var(--un-translate-y)) rotate(var(--un-rotate)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 150ms; transition-duration: 0.2s; top: 50%; right: 1.4rem; content: ""; transform-origin: 75% 75%; box-shadow: 2px 2px; pointer-events: none } [dir="rtl"] .collapse-arrow > .collapse-title:after { --un-rotate: -45deg } .label-text { font-size: 0.875rem; line-height: 1.25rem; --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-text-opacity)) } .label-text-alt { font-size: 0.75rem; line-height: 1rem; --un-text-opacity: 1; color: hsl(var(--bc) / var(--un-text-opacity)) } .input-bordered { --un-border-opacity: 0.2 } .join-item:focus { isolation: isolate } .loading { pointer-events: none; display: inline-block; aspect-ratio: 1 / 1; width: 1.5rem; background-color: currentColor; -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E") } .loading-spinner { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E") } .loading-xs { width: 1rem } .loading-sm { width: 1.25rem } .modal-backdrop { z-index: -1; grid-column-start: 1; grid-row-start: 1; display: grid; align-self: stretch; justify-self: stretch; color: transparent } .select-bordered { --un-border-opacity: 0.2 } .textarea-bordered { --un-border-opacity: 0.2 } .rounded-box { border-radius: var(--rounded-box, 1rem) } .badge-xs { height: 0.75rem; font-size: 0.75rem; line-height: .75rem; padding-left: 0.313rem; padding-right: 0.313rem } .badge-sm { height: 1rem; font-size: 0.75rem; line-height: 1rem; padding-left: 0.438rem; padding-right: 0.438rem } .badge-lg { height: 1.5rem; font-size: 1rem; line-height: 1.5rem; padding-left: 0.688rem; padding-right: 0.688rem } .btn-xs { height: 1.5rem; padding-left: 0.5rem; padding-right: 0.5rem; min-height: 1.5rem; font-size: 0.75rem } .btn-sm { height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; min-height: 2rem; font-size: 0.875rem } .input-xs { height: 1.5rem; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.75rem; line-height: 1rem; line-height: 1.625 } .input-sm { height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.875rem; line-height: 2rem } .kbd-xs { padding-left: 0.25rem; padding-right: 0.25rem; font-size: 0.75rem; line-height: 1rem; min-height: 1.2em; min-width: 1.2em } .select-sm { height: 2rem; padding-left: 0.75rem; padding-right: 2rem; font-size: 0.875rem; line-height: 2rem; min-height: 2rem } [dir="rtl"] .select-sm { padding-left: 2rem; padding-right: 0.75rem } .stats-horizontal { grid-auto-flow: column } .stats-horizontal > :not([hidden]) ~ :not([hidden]) { --un-divide-x-reverse: 0; border-right-width: calc(1px * var(--un-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--un-divide-x-reverse))); --un-divide-y-reverse: 0; border-top-width: calc(0px * calc(1 - var(--un-divide-y-reverse))); border-bottom-width: calc(0px * var(--un-divide-y-reverse)) } .stats-horizontal { overflow-x: auto } .textarea-sm { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.875rem; line-height: 2rem } .menu-xs :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)), .menu-xs :where(li:not(.menu-title) > details > summary:not(.menu-title)) { border-radius: 0.25rem; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem } .menu-xs .menu-title { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem } .menu-sm :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)), .menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; border-radius: var(--rounded-btn, 0.5rem) } .menu-sm .menu-title { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem } .table-xs :not(thead):not(tfoot) tr { font-size: 0.75rem; line-height: 1rem } .table-xs :where(th, td) { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem } .table-sm :not(thead):not(tfoot) tr { font-size: 0.875rem; line-height: 1.25rem } .table-sm :where(th, td) { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem } .checkbox-xs { height: 1rem; width: 1rem } .checkbox-sm { height: 1.25rem; width: 1.25rem } @keyframes button-pop { 0% { transform: scale(var(--btn-focus-scale, 0.98)) } 40% { transform: scale(1.02) } 100% { transform: scale(1) } } @keyframes checkmark { 0% { background-position-y: 5px } 50% { background-position-y: -2px } 100% { background-position-y: 0 } } @keyframes modal-pop { 0% { opacity: 0 } } @keyframes progress-loading { 50% { background-position-x: -115% } } @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 } 100% { box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset } } @keyframes rating-pop { 0% { transform: translateY(-0.125em) } 40% { transform: translateY(-0.125em) } 100% { transform: translateY(0) } } @keyframes toast-pop { 0% { transform: scale(0.9); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }:root { color-scheme: dark; --pf: 262 80% 43%; --sf: 316 70% 43%; --af: 175 70% 34%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 262 80% 50%; --pc: 0 0% 100%; --s: 316 70% 50%; --sc: 0 0% 100%; --a: 175 70% 41%; --ac: 0 0% 100%; --n: 213 18% 20%; --nf: 212 17% 17%; --nc: 220 13% 69%; --b1: 212 18% 14%; --b2: 213 18% 12%; --b3: 213 18% 10%; --bc: 220 13% 69% } [data-theme=dark] { color-scheme: dark; --pf: 262 80% 43%; --sf: 316 70% 43%; --af: 175 70% 34%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 262 80% 50%; --pc: 0 0% 100%; --s: 316 70% 50%; --sc: 0 0% 100%; --a: 175 70% 41%; --ac: 0 0% 100%; --n: 213 18% 20%; --nf: 212 17% 17%; --nc: 220 13% 69%; --b1: 212 18% 14%; --b2: 213 18% 12%; --b3: 213 18% 10%; --bc: 220 13% 69% } [data-theme=light] { color-scheme: light; --pf: 259 94% 44%; --sf: 314 100% 40%; --af: 174 75% 39%; --nf: 214 20% 14%; --in: 198 93% 60%; --su: 158 64% 52%; --wa: 43 96% 56%; --er: 0 91% 71%; --inc: 198 100% 12%; --suc: 158 100% 10%; --wac: 43 100% 11%; --erc: 0 100% 14%; --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; --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; --p: 259 94% 51%; --pc: 259 96% 91%; --s: 314 100% 47%; --sc: 314 100% 91%; --a: 174 75% 46%; --ac: 174 75% 11%; --n: 214 20% 21%; --nc: 212 19% 87%; --b1: 0 0% 100%; --b2: 0 0% 95%; --b3: 180 2% 90%; --bc: 215 28% 17% }.pointer-events-none{pointer-events:none;}.visible{visibility:visible;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.left-0{left:0;}.left-2{left:0.5rem;}.right-2{right:0.5rem;}.right-2\.5{right:0.625rem;}.right-3{right:0.75rem;}.top-1\.5{top:0.375rem;}.top-1\/2{top:50%;}.top-2{top:0.5rem;}.top-3{top:0.75rem;}.top-full{top:100%;}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;}.z-\[50\],.z-50{z-index:50;}.grid{display:grid;}.col-span-2{grid-column:span 2/span 2;}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}.mx-1{margin-left:0.25rem;margin-right:0.25rem;}.mx-auto{margin-left:auto;margin-right:auto;}.my-0{margin-top:0;margin-bottom:0;}.my-0\.5{margin-top:0.125rem;margin-bottom:0.125rem;}.-mt-1{margin-top:-0.25rem;}.mb-0\.5{margin-bottom:0.125rem;}.mb-1{margin-bottom:0.25rem;}.mb-1\.5{margin-bottom:0.375rem;}.mb-2{margin-bottom:0.5rem;}.mb-3{margin-bottom:0.75rem;}.mb-4{margin-bottom:1rem;}.mb-5{margin-bottom:1.25rem;}.mb-6{margin-bottom:1.5rem;}.mb-8{margin-bottom:2rem;}.ml-1{margin-left:0.25rem;}.ml-2{margin-left:0.5rem;}.ml-auto{margin-left:auto;}.mr-1{margin-right:0.25rem;}.mt-0\.5{margin-top:0.125rem;}.mt-1{margin-top:0.25rem;}.mt-1\.5{margin-top:0.375rem;}.mt-2{margin-top:0.5rem;}.mt-3{margin-top:0.75rem;}.mt-4{margin-top:1rem;}.mt-6{margin-top:1.5rem;}.mt-8{margin-top:2rem;}.inline{display:inline;}.block{display:block;}.inline-block{display:inline-block;}.hidden{display:none;}.h-\[calc\(100vh-196px\)\]{height:calc(100vh - 196px);}.h-\[calc\(100vh-200px\)\]{height:calc(100vh - 200px);}.h-1{height:0.25rem;}.h-1\.5{height:0.375rem;}.h-10{height:2.5rem;}.h-11{height:2.75rem;}.h-12{height:3rem;}.h-14{height:3.5rem;}.h-2\.5{height:0.625rem;}.h-3{height:0.75rem;}.h-3\.5{height:0.875rem;}.h-4{height:1rem;}.h-48{height:12rem;}.h-5{height:1.25rem;}.h-9{height:2.25rem;}.max-h-\[70vh\]{max-height:70vh;}.max-h-48{max-height:12rem;}.max-h-56{max-height:14rem;}.max-h-64{max-height:16rem;}.max-w-\[12rem\]{max-width:12rem;}.max-w-\[8rem\]{max-width:8rem;}.max-w-\[9rem\]{max-width:9rem;}.max-w-2xl{max-width:42rem;}.max-w-3xl{max-width:48rem;}.max-w-7xl{max-width:80rem;}.max-w-lg{max-width:32rem;}.max-w-sm{max-width:24rem;}.max-w-xl{max-width:36rem;}.max-w-xs{max-width:20rem;}.min-h-\[400px\]{min-height:400px;}.min-h-\[480px\]{min-height:480px;}.min-h-0{min-height:0;}.min-h-screen{min-height:100vh;}.min-w-\[200px\]{min-width:200px;}.min-w-0{min-width:0;}.min-w-48{min-width:12rem;}.w-1{width:0.25rem;}.w-1\.5{width:0.375rem;}.w-10{width:2.5rem;}.w-11\/12{width:91.6666666667%;}.w-12{width:3rem;}.w-16{width:4rem;}.w-2\.5{width:0.625rem;}.w-20{width:5rem;}.w-24{width:6rem;}.w-3{width:0.75rem;}.w-3\.5{width:0.875rem;}.w-4{width:1rem;}.w-40{width:10rem;}.w-44{width:11rem;}.w-48{width:12rem;}.w-5{width:1.25rem;}.w-56{width:14rem;}.w-64{width:16rem;}.w-9{width:2.25rem;}.w-full{width:100%;}.w-px{width:1px;}.focus\:w-64:focus{width:16rem;}.flex{display:flex;}.flex-1{flex:1 1 0%;}.flex-shrink{flex-shrink:1;}.flex-shrink-0,.shrink-0{flex-shrink:0;}.flex-col{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.table{display:table;}.-translate-y-1\/2{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.cursor-default{cursor:default;}.cursor-pointer{cursor:pointer;}.cursor-col-resize{cursor:col-resize;}.select-none{-webkit-user-select:none;user-select:none;}.resize-y{resize:vertical;}.resize-none{resize:none;}.list-disc{list-style-type:disc;}.items-start{align-items:flex-start;}.items-end{align-items:flex-end;}.items-center{align-items:center;}.items-baseline{align-items:baseline;}.self-start{align-self:flex-start;}.self-center{align-self:center;}.justify-end{justify-content:flex-end;}.justify-center{justify-content:center;}.justify-between{justify-content:space-between;}.gap-0{gap:0;}.gap-0\.5{gap:0.125rem;}.gap-1{gap:0.25rem;}.gap-1\.5{gap:0.375rem;}.gap-2{gap:0.5rem;}.gap-3{gap:0.75rem;}.gap-4{gap:1rem;}.gap-x-2{column-gap:0.5rem;}.gap-x-6{column-gap:1.5rem;}.gap-y-1{row-gap:0.25rem;}.gap-y-1\.5{row-gap:0.375rem;}.space-y-0\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.125rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.125rem * var(--un-space-y-reverse));}.space-y-1\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.375rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.375rem * var(--un-space-y-reverse));}.space-y-1>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.25rem * var(--un-space-y-reverse));}.space-y-2\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.625rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.625rem * var(--un-space-y-reverse));}.space-y-2>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.5rem * var(--un-space-y-reverse));}.space-y-3>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}.space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}.space-y-6>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.5rem * var(--un-space-y-reverse));}.divide-y>:not([hidden])~:not([hidden]){--un-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--un-divide-y-reverse)));border-bottom-width:calc(1px * var(--un-divide-y-reverse));}.divide-base-content\/10>:not([hidden])~:not([hidden]){border-color:hsl(var(--bc) / 0.1) /* hsl(var(--bc) / ) */;}.overflow-auto{overflow:auto;}.overflow-hidden{overflow:hidden;}.overflow-x-auto{overflow-x:auto;}.overflow-y-auto{overflow-y:auto;}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.whitespace-nowrap{white-space:nowrap;}.whitespace-pre-wrap{white-space:pre-wrap;}.break-all{word-break:break-all;}.b,.border{border-width:1px;}.border-b{border-bottom-width:1px;}.border-l-2{border-left-width:2px;}.border-t{border-top-width:1px;}.border-base-300{--un-border-opacity:1;border-color:hsl(var(--b3) / var(--un-border-opacity));}.border-base-content\/10{border-color:hsl(var(--bc) / 0.1);}.border-base-content\/15{border-color:hsl(var(--bc) / 0.15);}.border-primary\/20{border-color:hsl(var(--p) / 0.2);}.border-warning\/30{border-color:hsl(var(--wa) / 0.3);}.hover\:border-base-content\/20:hover{border-color:hsl(var(--bc) / 0.2);}.hover\:border-primary\/40:hover{border-color:hsl(var(--p) / 0.4);}.rounded{border-radius:0.25rem;}.rounded-full{border-radius:9999px;}.rounded-lg{border-radius:0.5rem;}.rounded-sm{border-radius:0.125rem;}.rounded-l-lg{border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem;}.rounded-r-lg{border-top-right-radius:0.5rem;border-bottom-right-radius:0.5rem;}.border-none{border-style:none;}.bg-base-100{--un-bg-opacity:1;background-color:hsl(var(--b1) / var(--un-bg-opacity)) /* hsl(var(--b1) / ) */;}.bg-base-200{--un-bg-opacity:1;background-color:hsl(var(--b2) / var(--un-bg-opacity)) /* hsl(var(--b2) / ) */;}.bg-base-300{--un-bg-opacity:1;background-color:hsl(var(--b3) / var(--un-bg-opacity)) /* hsl(var(--b3) / ) */;}.bg-base-300\/40{background-color:hsl(var(--b3) / 0.4) /* hsl(var(--b3) / ) */;}.bg-base-content\/15{background-color:hsl(var(--bc) / 0.15) /* hsl(var(--bc) / ) */;}.bg-base-content\/20{background-color:hsl(var(--bc) / 0.2) /* hsl(var(--bc) / ) */;}.bg-current{background-color:currentColor /* currentColor */;}.bg-error{--un-bg-opacity:1;background-color:hsl(var(--er) / var(--un-bg-opacity)) /* hsl(var(--er) / ) */;}.bg-primary{--un-bg-opacity:1;background-color:hsl(var(--p) / var(--un-bg-opacity)) /* hsl(var(--p) / ) */;}.bg-primary\/10{background-color:hsl(var(--p) / 0.1) /* hsl(var(--p) / ) */;}.bg-success{--un-bg-opacity:1;background-color:hsl(var(--su) / var(--un-bg-opacity)) /* hsl(var(--su) / ) */;}.bg-transparent{background-color:transparent /* transparent */;}.bg-warning{--un-bg-opacity:1;background-color:hsl(var(--wa) / var(--un-bg-opacity)) /* hsl(var(--wa) / ) */;}.bg-warning\/10{background-color:hsl(var(--wa) / 0.1) /* hsl(var(--wa) / ) */;}.hover\:bg-base-200\/50:hover{background-color:hsl(var(--b2) / 0.5) /* hsl(var(--b2) / ) */;}.hover\:bg-base-300:hover{--un-bg-opacity:1;background-color:hsl(var(--b3) / var(--un-bg-opacity)) /* hsl(var(--b3) / ) */;}.hover\:bg-primary\/20:hover{background-color:hsl(var(--p) / 0.2) /* hsl(var(--p) / ) */;}.hover\:bg-primary\/40:hover{background-color:hsl(var(--p) / 0.4) /* hsl(var(--p) / ) */;}.object-contain{object-fit:contain;}.object-left{object-position:left;}.p-0{padding:0;}.p-1{padding:0.25rem;}.p-1\.5{padding:0.375rem;}.p-2{padding:0.5rem;}.p-3{padding:0.75rem;}.p-4{padding:1rem;}.p-5{padding:1.25rem;}.p-6{padding:1.5rem;}.px,.px-4{padding-left:1rem;padding-right:1rem;}.px-0{padding-left:0;padding-right:0;}.px-1{padding-left:0.25rem;padding-right:0.25rem;}.px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}.px-2{padding-left:0.5rem;padding-right:0.5rem;}.px-3{padding-left:0.75rem;padding-right:0.75rem;}.px-5{padding-left:1.25rem;padding-right:1.25rem;}.py-0{padding-top:0;padding-bottom:0;}.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}.py-16{padding-top:4rem;padding-bottom:4rem;}.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}.py-4{padding-top:1rem;padding-bottom:1rem;}.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}.py-8{padding-top:2rem;padding-bottom:2rem;}.pb-1{padding-bottom:0.25rem;}.pb-3{padding-bottom:0.75rem;}.pl-2{padding-left:0.5rem;}.pl-3{padding-left:0.75rem;}.pl-4{padding-left:1rem;}.pl-8{padding-left:2rem;}.pr-1{padding-right:0.25rem;}.pr-14{padding-right:3.5rem;}.pr-8{padding-right:2rem;}.pt-1{padding-top:0.25rem;}.pt-16{padding-top:4rem;}.pt-2{padding-top:0.5rem;}.pt-3{padding-top:0.75rem;}.text-center{text-align:center;}.text-left{text-align:left;}.text-right{text-align:right;}.text-wrap{text-wrap:wrap;}.text-\[10px\]{font-size:10px;}.text-\[11px\]{font-size:11px;}.text-2xl{font-size:1.5rem;line-height:2rem;}.text-base{font-size:1rem;line-height:1.5rem;}.text-lg{font-size:1.125rem;line-height:1.75rem;}.text-sm{font-size:0.875rem;line-height:1.25rem;}.text-xl{font-size:1.25rem;line-height:1.75rem;}.text-xs{font-size:0.75rem;line-height:1rem;}.text-accent{--un-text-opacity:1;color:hsl(var(--a) / var(--un-text-opacity)) /* hsl(var(--a) / ) */;}.text-base-content{--un-text-opacity:1;color:hsl(var(--bc) / var(--un-text-opacity)) /* hsl(var(--bc) / ) */;}.text-base-content\/20{color:hsl(var(--bc) / 0.2) /* hsl(var(--bc) / ) */;}.text-base-content\/25{color:hsl(var(--bc) / 0.25) /* hsl(var(--bc) / ) */;}.text-base-content\/30{color:hsl(var(--bc) / 0.3) /* hsl(var(--bc) / ) */;}.text-base-content\/35{color:hsl(var(--bc) / 0.35) /* hsl(var(--bc) / ) */;}.text-base-content\/40{color:hsl(var(--bc) / 0.4) /* hsl(var(--bc) / ) */;}.text-base-content\/50{color:hsl(var(--bc) / 0.5) /* hsl(var(--bc) / ) */;}.text-base-content\/60{color:hsl(var(--bc) / 0.6) /* hsl(var(--bc) / ) */;}.text-base-content\/70{color:hsl(var(--bc) / 0.7) /* hsl(var(--bc) / ) */;}.text-base-content\/80{color:hsl(var(--bc) / 0.8) /* hsl(var(--bc) / ) */;}.text-cyan-400{--un-text-opacity:1;color:rgb(34 211 238 / var(--un-text-opacity)) /* #22d3ee */;}.text-error{--un-text-opacity:1;color:hsl(var(--er) / var(--un-text-opacity)) /* hsl(var(--er) / ) */;}.text-error\/70{color:hsl(var(--er) / 0.7) /* hsl(var(--er) / ) */;}.text-info{--un-text-opacity:1;color:hsl(var(--in) / var(--un-text-opacity)) /* hsl(var(--in) / ) */;}.text-orange-400{--un-text-opacity:1;color:rgb(251 146 60 / var(--un-text-opacity)) /* #fb923c */;}.text-primary{--un-text-opacity:1;color:hsl(var(--p) / var(--un-text-opacity)) /* hsl(var(--p) / ) */;}.text-purple-400{--un-text-opacity:1;color:rgb(192 132 252 / var(--un-text-opacity)) /* #c084fc */;}.text-secondary{--un-text-opacity:1;color:hsl(var(--s) / var(--un-text-opacity)) /* hsl(var(--s) / ) */;}.text-success{--un-text-opacity:1;color:hsl(var(--su) / var(--un-text-opacity)) /* hsl(var(--su) / ) */;}.text-warning{--un-text-opacity:1;color:hsl(var(--wa) / var(--un-text-opacity)) /* hsl(var(--wa) / ) */;}.text-yellow-400{--un-text-opacity:1;color:rgb(250 204 21 / var(--un-text-opacity)) /* #facc15 */;}.hover\:text-base-content:hover{--un-text-opacity:1;color:hsl(var(--bc) / var(--un-text-opacity)) /* hsl(var(--bc) / ) */;}.hover\:text-base-content\/80:hover{color:hsl(var(--bc) / 0.8) /* hsl(var(--bc) / ) */;}.hover\:text-error:hover{--un-text-opacity:1;color:hsl(var(--er) / var(--un-text-opacity)) /* hsl(var(--er) / ) */;}.hover\:text-primary:hover{--un-text-opacity:1;color:hsl(var(--p) / var(--un-text-opacity)) /* hsl(var(--p) / ) */;}.hover\:text-warning:hover{--un-text-opacity:1;color:hsl(var(--wa) / var(--un-text-opacity)) /* hsl(var(--wa) / ) */;}.font-bold{font-weight:700;}.font-medium{font-weight:500;}.font-normal{font-weight:400;}.font-semibold{font-weight:600;}.leading-relaxed{line-height:1.625;}.leading-snug{line-height:1.375;}.leading-tight{line-height:1.25;}.tracking-tight{letter-spacing:-0.025em;}.tracking-wide{letter-spacing:0.025em;}.tracking-wider{letter-spacing:0.05em;}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}.uppercase{text-transform:uppercase;}.normal-case{text-transform:none;}.italic{font-style:italic;}.line-through{text-decoration-line:line-through;}.hover\:underline:hover{text-decoration-line:underline;}.underline-offset-2{text-underline-offset:2px;}.opacity-20{opacity:0.2;}.opacity-30{opacity:0.3;}.opacity-40{opacity:0.4;}.opacity-50{opacity:0.5;}.opacity-60{opacity:0.6;}.opacity-70{opacity:0.7;}.hover\:opacity-100:hover{opacity:1;}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.active-filter:active{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.backdrop-filter{-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}.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(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}.sm\:inline{display:inline;}.sm\:block{display:block;}.sm\:inline-flex{display:inline-flex;}.sm\:flex-row{flex-direction:row;}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}.md\:hidden{display:none;}.md\:flex{display:flex;}}@media (min-width: 1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}} /* Badge variant text — force black in dark mode for contrast. DaisyUI's --inc/suc/wac/erc and --pc resolve to near-black but some browser rendering paths fall back to #fff; this override is explicit and wins. */ [data-theme=dark] .badge-success, [data-theme=dark] .badge-info, [data-theme=dark] .badge-warning, [data-theme=dark] .badge-error { color: #000000; } [data-theme=dark] .badge-primary { color: #838383; } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .badge-success, :root:not([data-theme=light]) .badge-info, :root:not([data-theme=light]) .badge-warning, :root:not([data-theme=light]) .badge-error { color: #000000; } :root:not([data-theme=light]) .badge-primary { color: #838383; } }