UNPKG

151 kBCSSView Raw
1.alert {
2 display: flex;
3 width: 100%;
4 flex-direction: column;
5 align-items: center;
6 justify-content: space-between;
7 gap: 1rem
8}
9.alert > :not([hidden]) ~ :not([hidden]) {
10 --tw-space-y-reverse: 0;
11 margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
12 margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
13}
14@media (min-width: 768px) {
15 .alert {
16 flex-direction: row
17 }
18 .alert > :not([hidden]) ~ :not([hidden]) {
19 --tw-space-y-reverse: 0;
20 margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
21 margin-bottom: calc(0px * var(--tw-space-y-reverse))
22 }
23}
24 .alert > :where(*) {
25 display: flex;
26 align-items: center;
27 gap: 0.5rem
28}
29.artboard {
30 width: 100%
31}
32.avatar {
33 position: relative;
34 display: inline-flex
35}
36 .avatar > div {
37 display: block;
38 aspect-ratio: 1 / 1;
39 overflow: hidden
40}
41 .avatar img {
42 height: 100%;
43 width: 100%;
44 object-fit: cover
45}
46 .avatar.placeholder > div {
47 display: flex;
48 align-items: center;
49 justify-content: center
50}
51.badge {
52 display: inline-flex;
53 align-items: center;
54 justify-content: center;
55 transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
56 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
57 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
58 transition-duration: 200ms;
59 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
60 height: 1.25rem;
61 font-size: 0.875rem;
62 line-height: 1.25rem;
63 width: fit-content;
64 padding-left: 0.563rem;
65 padding-right: 0.563rem
66}
67.btm-nav {
68 position: fixed;
69 bottom: 0px;
70 left: 0px;
71 right: 0px;
72 display: flex;
73 width: 100%;
74 flex-direction: row;
75 align-items: center;
76 justify-content: space-around
77}
78 .btm-nav>* {
79 position: relative;
80 display: flex;
81 height: 100%;
82 flex-basis: 100%;
83 cursor: pointer;
84 flex-direction: column;
85 align-items: center;
86 justify-content: center;
87 gap: 0.25rem
88}
89.breadcrumbs {
90 max-width: 100%;
91 overflow-x: auto
92}
93 .breadcrumbs > ul {
94 display: flex;
95 align-items: center;
96 white-space: nowrap;
97 min-height: min-content
98}
99 .breadcrumbs > ul > li {
100 display: flex;
101 align-items: center
102}
103 .breadcrumbs > ul > li > a {
104 display: flex;
105 cursor: pointer;
106 align-items: center
107}
108 .breadcrumbs > ul > li > a:hover {
109 -webkit-text-decoration-line: underline;
110 text-decoration-line: underline
111}
112.btn {
113 display: inline-flex;
114 flex-shrink: 0;
115 cursor: pointer;
116 -webkit-user-select: none;
117 user-select: none;
118 flex-wrap: wrap;
119 align-items: center;
120 justify-content: center;
121 border-color: transparent;
122 text-align: center;
123 transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
124 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
125 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
126 transition-duration: 200ms;
127 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
128 border-radius: var(--rounded-btn, 0.5rem);
129 height: 3rem;
130 padding-left: 1rem;
131 padding-right: 1rem;
132 font-size: 0.875rem;
133 line-height: 1.25rem;
134 min-height: 3rem;
135 line-height: 1em;
136}
137
138 /* disabled */
139
140 .btn-disabled,
141 .btn[disabled] {
142 pointer-events: none;
143}
144
145 /* shapes */
146
147 .btn-square {
148 height: 3rem;
149 width: 3rem;
150 padding: 0px;
151}
152
153 .btn-circle {
154 height: 3rem;
155 width: 3rem;
156 border-radius: 9999px;
157 padding: 0px;
158}
159
160 /* loading */
161
162 .btn.loading,
163 .btn.loading:hover {
164 pointer-events: none;
165}
166
167 .btn.loading:before {
168 margin-right: 0.5rem;
169 height: 1rem;
170 width: 1rem;
171 border-radius: 9999px;
172 border-width: 2px;
173 animation: spin 2s linear infinite;
174 content: "";
175 border-top-color: transparent;
176 border-left-color: transparent;
177 border-bottom-color: currentColor;
178 border-right-color: currentColor;
179}
180@media (prefers-reduced-motion: reduce) {
181 .btn.loading:before {
182 animation: spin 10s linear infinite;
183 }
184}
185@keyframes spin {
186 from {
187 transform: rotate(0deg);
188 }
189 to {
190 transform: rotate(360deg);
191 }
192}
193/* group */
194.btn-group {
195 display: flex;
196 flex-wrap: wrap;
197}
198.btn-group > input[type="radio"].btn {
199 appearance: none;
200}
201.btn-group > input[type="radio"].btn:before {
202 content: attr(data-title);
203 }
204.btn-group-vertical {
205 flex-direction: column;
206 flex-wrap: nowrap;
207}
208.card {
209 position: relative;
210 display: flex;
211 flex-direction: column;
212 overflow: hidden
213}
214 .card:focus {
215 outline: 2px solid transparent;
216 outline-offset: 2px
217}
218 .card-body {
219 display: flex;
220 flex: 1 1 auto;
221 flex-direction: column
222}
223 .card-body :where(p) {
224 flex-grow: 1
225}
226 .card-actions {
227 display: flex;
228 flex-wrap: wrap;
229 align-items: flex-start;
230 gap: 0.5rem
231}
232 .card figure {
233 display: flex;
234 align-items: center;
235 justify-content: center
236}
237 .card.image-full {
238 display: grid
239}
240 .card.image-full:before {
241 position: relative;
242 content: ""
243}
244 .card.image-full:before,
245 .card.image-full > * {
246 grid-column-start: 1;
247 grid-row-start: 1
248}
249 .card.image-full > figure img {
250 height: 100%;
251 object-fit: cover
252}
253 .card.image-full > .card-body {
254 position: relative
255}
256.carousel {
257 display: flex;
258 overflow-x: scroll;
259 scroll-snap-type: x mandatory;
260 scroll-behavior: smooth;
261}
262 .carousel-vertical {
263 flex-direction: column;
264 overflow-y: scroll;
265 scroll-snap-type: y mandatory;
266}
267 .carousel-item {
268 box-sizing: content-box;
269 display: flex;
270 flex: none;
271 scroll-snap-align: start;
272}
273 .carousel-center .carousel-item {
274 scroll-snap-align: center;
275 }
276 .carousel-end .carousel-item {
277 scroll-snap-align: end;
278 }
279.checkbox {
280 flex-shrink: 0
281}
282.collapse {
283 position: relative;
284 display: grid;
285 overflow: hidden;
286}
287.collapse-title,
288.collapse > input[type="checkbox"],
289.collapse-content {
290 grid-column-start: 1;
291 grid-row-start: 1;
292}
293.collapse > input[type="checkbox"] {
294 appearance: none;
295 opacity: 0;
296}
297.collapse-content {
298 grid-row-start: 2;
299 overflow: hidden;
300 max-height: 0px;
301}
302.collapse-open .collapse-content,
303.collapse:focus:not(.collapse-close) .collapse-content,
304.collapse:not(.collapse-close)
305 input[type="checkbox"]:checked
306 ~ .collapse-content {
307 max-height: 9000px;
308}
309:root .countdown {
310 line-height: 1em;
311}
312.countdown {
313 display: inline-flex;
314}
315.countdown > * {
316 height: 1em;
317 display: inline-block;
318 overflow-y: hidden;
319 }
320.countdown > *:before {
321 position: relative;
322 content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
323 white-space: pre;
324 top: calc(var(--value) * -1em);
325 }
326.divider {
327 display: flex;
328 flex-direction: row;
329 align-items: center;
330 align-self: stretch;
331}
332 .divider:before,
333 .divider:after {
334 content: "";
335 flex-grow: 1;
336 height: 0.125rem;
337 width: 100%;
338 }
339.drawer {
340
341 display: grid;
342
343 width: 100%;
344
345 overflow: hidden;
346
347 height: 100vh;
348 height: 100dvh;
349}
350
351 .drawer.drawer-end {
352 direction: rtl;
353 }
354
355 .drawer.drawer-end > * {
356 direction: ltr;
357 }
358
359 .drawer.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
360
361 --tw-translate-x: 100%;
362
363 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
364
365 justify-self: end;
366}
367
368 .drawer.drawer-end > .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
369
370 --tw-translate-x: 0px;
371
372 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
373}
374:where(.drawer-toggle ~ .drawer-content) {
375 height: inherit;
376}
377.drawer-toggle {
378
379 position: absolute;
380
381 height: 0px;
382
383 width: 0px;
384
385 appearance: none;
386
387 opacity: 0;
388}
389.drawer-toggle ~ .drawer-content {
390
391 z-index: 0;
392
393 grid-column-start: 1;
394
395 grid-row-start: 1;
396
397 overflow-y: auto;
398}
399.drawer-toggle ~ .drawer-side {
400
401 grid-column-start: 1;
402
403 grid-row-start: 1;
404
405 display: grid;
406
407 max-height: 100vh;
408}
409.drawer-toggle ~ .drawer-side > .drawer-overlay {
410
411 visibility: hidden;
412
413 grid-column-start: 1;
414
415 grid-row-start: 1;
416
417 opacity: 0;
418}
419.drawer-toggle ~ .drawer-side > .drawer-overlay + * {
420
421 z-index: 10;
422
423 grid-column-start: 1;
424
425 grid-row-start: 1;
426
427 --tw-translate-x: -100%;
428
429 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
430}
431.drawer-toggle:checked ~ .drawer-side {
432
433 overflow-y: auto;
434}
435.drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
436
437 visibility: visible;
438}
439.drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
440
441 --tw-translate-x: 0px;
442
443 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
444}
445[dir="rtl"] .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
446
447 --tw-translate-x: 100%;
448
449 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
450}
451[dir="rtl"] .drawer-toggle:checked ~ .drawer-side > .drawer-overlay + * {
452
453 --tw-translate-x: 0px;
454
455 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
456}
457@media (min-width: 1024px) {
458 .drawer-mobile {
459 grid-auto-columns: max-content auto;
460 }
461 .drawer-mobile > .drawer-toggle ~ .drawer-content {
462
463 height: auto;
464 }
465 @media (min-width: 1024px) {
466
467 .drawer-mobile > .drawer-toggle ~ .drawer-content {
468
469 grid-column-start: 2;
470 }
471 }
472 .drawer-mobile > .drawer-toggle ~ .drawer-side {
473
474 overflow-y: auto;
475 }
476 @media (min-width: 1024px) {
477
478 .drawer-mobile > .drawer-toggle ~ .drawer-side > .drawer-overlay {
479
480 visibility: visible;
481 }
482
483 .drawer-mobile > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
484
485 --tw-translate-x: 0px;
486
487 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
488 }
489 }
490 .drawer-mobile.drawer-end {
491 grid-auto-columns: auto max-content;
492 direction: ltr;
493 }
494 .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-content {
495
496 height: auto;
497 }
498 @media (min-width: 1024px) {
499
500 .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-content {
501
502 grid-column-start: 1;
503 }
504 }
505 .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side {
506
507 overflow-y: auto;
508 }
509 @media (min-width: 1024px) {
510
511 .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side {
512
513 grid-column-start: 2;
514 }
515
516 .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay {
517
518 visibility: visible;
519 }
520
521 .drawer-mobile.drawer-end > .drawer-toggle ~ .drawer-side > .drawer-overlay + * {
522
523 --tw-translate-x: 0px;
524
525 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
526 }
527 }
528}
529.dropdown {
530 position: relative;
531 display: inline-block
532}
533.dropdown > *:focus {
534 outline: 2px solid transparent;
535 outline-offset: 2px
536}
537.dropdown .dropdown-content {
538 visibility: hidden;
539 position: absolute;
540 z-index: 50;
541 opacity: 0
542}
543.dropdown-end .dropdown-content {
544 right: 0px
545}
546.dropdown-left .dropdown-content {
547 top: 0px;
548 right: 100%;
549 bottom: auto
550}
551.dropdown-right .dropdown-content {
552 left: 100%;
553 top: 0px;
554 bottom: auto
555}
556.dropdown-top .dropdown-content {
557 bottom: 100%;
558 top: auto
559}
560.dropdown-end.dropdown-right .dropdown-content {
561 bottom: 0px;
562 top: auto
563}
564.dropdown-end.dropdown-left .dropdown-content {
565 bottom: 0px;
566 top: auto
567}
568.dropdown.dropdown-open .dropdown-content,
569.dropdown.dropdown-hover:hover .dropdown-content,
570.dropdown:not(.dropdown-hover):focus .dropdown-content,
571.dropdown:not(.dropdown-hover):focus-within .dropdown-content {
572 visibility: visible;
573 opacity: 1
574}
575.footer {
576 display: grid;
577 width: 100%;
578 grid-auto-flow: row;
579 place-items: start;
580}
581 .footer > * {
582 display: grid;
583 place-items: start;
584}
585 .footer-center {
586 place-items: center;
587 text-align: center;
588}
589 .footer-center > * {
590 place-items: center;
591}
592@media (min-width: 48rem) {
593 .footer {
594 grid-auto-flow: column;
595 }
596 .footer-center {
597 grid-auto-flow: row dense;
598 }
599}
600.form-control {
601 display: flex;
602 flex-direction: column
603}
604.label {
605 display: flex;
606 -webkit-user-select: none;
607 user-select: none;
608 align-items: center;
609 justify-content: space-between
610}
611.hero {
612 display: grid;
613 width: 100%;
614 place-items: center;
615 background-size: cover;
616 background-position: center
617}
618 .hero > * {
619 grid-column-start: 1;
620 grid-row-start: 1
621}
622 .hero-overlay {
623 grid-column-start: 1;
624 grid-row-start: 1;
625 height: 100%;
626 width: 100%
627}
628 .hero-content {
629 z-index: 0;
630 display: flex;
631 align-items: center;
632 justify-content: center
633}
634.indicator {
635 position: relative;
636 display: inline-flex;
637 width: max-content;
638}
639 .indicator :where(.indicator-item) {
640 z-index: 1;
641 position: absolute;
642 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
643 }
644.input {
645 flex-shrink: 1;
646 transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
647 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
648 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
649 transition-duration: 200ms;
650 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
651 height: 3rem;
652 padding-left: 1rem;
653 padding-right: 1rem;
654 font-size: 0.875rem;
655 line-height: 1.25rem;
656 line-height: 2;
657}
658.input-group {
659 display: flex;
660 width: 100%;
661 align-items: stretch;
662}
663.input-group > .input {
664 isolation: isolate;
665}
666.input-group > *,
667 .input-group > .input {
668 border-radius: 0px;
669}
670.input-group-md {
671 font-size: 0.875rem;
672 line-height: 1.25rem;
673 line-height: 2;
674}
675.input-group-lg {
676 font-size: 1.125rem;
677 line-height: 1.75rem;
678 line-height: 2;
679}
680.input-group-sm {
681 font-size: 0.875rem;
682 line-height: 2rem;
683}
684.input-group-xs {
685 font-size: 0.75rem;
686 line-height: 1rem;
687 line-height: 1.625;
688}
689.input-group :where(span) {
690 display: flex;
691 align-items: center;
692 --tw-bg-opacity: 1;
693 background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
694 padding-left: 1rem;
695 padding-right: 1rem;
696}
697.input-group :first-child {
698 border-top-left-radius: var(--rounded-btn, 0.5rem);
699 border-top-right-radius: 0;
700 border-bottom-left-radius: var(--rounded-btn, 0.5rem);
701 border-bottom-right-radius: 0;
702 }
703.input-group :last-child {
704 border-top-left-radius: 0;
705 border-top-right-radius: var(--rounded-btn, 0.5rem);
706 border-bottom-left-radius: 0;
707 border-bottom-right-radius: var(--rounded-btn, 0.5rem);
708 }
709.input-group-vertical {
710 flex-direction: column;
711}
712.input-group-vertical :first-child {
713 border-top-left-radius: var(--rounded-btn, 0.5rem);
714 border-top-right-radius: var(--rounded-btn, 0.5rem);
715 border-bottom-left-radius: 0;
716 border-bottom-right-radius: 0;
717 }
718.input-group-vertical :last-child {
719 border-top-left-radius: 0;
720 border-top-right-radius: 0;
721 border-bottom-left-radius: var(--rounded-btn, 0.5rem);
722 border-bottom-right-radius: var(--rounded-btn, 0.5rem);
723 }
724.kbd {
725 display: inline-flex;
726 align-items: center;
727 justify-content: center
728}
729.link {
730 cursor: pointer;
731 -webkit-text-decoration-line: underline;
732 text-decoration-line: underline
733}
734 .link-hover {
735 -webkit-text-decoration-line: none;
736 text-decoration-line: none
737}
738 .link-hover:hover {
739 -webkit-text-decoration-line: underline;
740 text-decoration-line: underline
741}
742.mask {
743 -webkit-mask-size: contain;
744 mask-size: contain;
745 -webkit-mask-repeat: no-repeat;
746 mask-repeat: no-repeat;
747 -webkit-mask-position: center;
748 mask-position: center;
749}
750.mask-half-1 {
751 -webkit-mask-size: 200%;
752 mask-size: 200%;
753 -webkit-mask-position: left;
754 mask-position: left;
755}
756.mask-half-2 {
757 -webkit-mask-size: 200%;
758 mask-size: 200%;
759 -webkit-mask-position: right;
760 mask-position: right;
761}
762.menu {
763 display: flex;
764 flex-direction: column
765}
766 .menu.horizontal {
767 display: inline-flex;
768 flex-direction: row
769}
770 .menu.horizontal :where(li) {
771 flex-direction: row
772}
773.menu :where(li) {
774 position: relative;
775 display: flex;
776 flex-direction: column;
777 flex-wrap: wrap;
778 align-items: stretch
779}
780.menu :where(li:not(.menu-title)) > :where(*:not(ul)) {
781 display: flex
782}
783.menu :where(li:not(.disabled):not(.menu-title)) > :where(*:not(ul)) {
784 cursor: pointer;
785 -webkit-user-select: none;
786 user-select: none;
787 align-items: center;
788 outline: 2px solid transparent;
789 outline-offset: 2px
790}
791.menu > :where(li > *:not(ul):focus) {
792 outline: 2px solid transparent;
793 outline-offset: 2px
794}
795.menu > :where(li.disabled > *:not(ul):focus) {
796 cursor: auto
797}
798.menu > :where(li) :where(ul) {
799 display: flex;
800 flex-direction: column;
801 align-items: stretch
802}
803.menu > :where(li) > :where(ul) {
804 position: absolute;
805 display: none;
806 top: initial;
807 left: 100%
808}
809.menu > :where(li:hover) > :where(ul) {
810 display: flex
811}
812.menu > :where(li:focus) > :where(ul) {
813 display: flex
814}
815.mockup-code {
816 position: relative;
817 overflow: hidden;
818 overflow-x: auto;
819}
820 .mockup-code pre[data-prefix]:before {
821 content: attr(data-prefix);
822 display: inline-block;
823 text-align: right;
824 }
825 .mockup-window {
826 position: relative;
827 overflow: hidden;
828 overflow-x: auto;
829}
830 .mockup-window pre[data-prefix]:before {
831 content: attr(data-prefix);
832 display: inline-block;
833 text-align: right;
834 }
835.modal {
836 pointer-events: none;
837 visibility: hidden;
838 position: fixed;
839 top: 0px;
840 right: 0px;
841 bottom: 0px;
842 left: 0px;
843 display: flex;
844 justify-content: center;
845 opacity: 0;
846 z-index: 999;
847}
848:where(.modal) {
849 align-items: center;
850}
851.modal-box {
852 max-height: calc(100vh - 5em);
853}
854.modal-open,
855.modal:target,
856.modal-toggle:checked + .modal {
857 pointer-events: auto;
858 visibility: visible;
859 opacity: 1;
860}
861.modal-action {
862 display: flex;
863}
864.modal-toggle {
865 position: fixed;
866 height: 0px;
867 width: 0px;
868 appearance: none;
869 opacity: 0;
870}
871.navbar {
872 display: flex;
873 align-items: center;
874}
875:where(.navbar > *) {
876 display: inline-flex;
877 align-items: center;
878}
879.navbar-start {
880 width: 50%;
881 justify-content: flex-start;
882}
883.navbar-center {
884 flex-shrink: 0;
885}
886.navbar-end {
887 width: 50%;
888 justify-content: flex-end;
889}
890.progress {
891 position: relative;
892 width: 100%;
893 appearance: none;
894 overflow: hidden
895}
896.radial-progress {
897 position: relative;
898 display: inline-grid;
899 height: var(--size);
900 width: var(--size);
901 place-content: center;
902 border-radius: 9999px;
903 background-color: transparent;
904 vertical-align: middle;
905 box-sizing: content-box;
906}
907.radial-progress::-moz-progress-bar {
908 appearance: none;
909 background-color: transparent;
910}
911.radial-progress::-webkit-progress-value {
912 appearance: none;
913 background-color: transparent;
914}
915.radial-progress::-webkit-progress-bar {
916 appearance: none;
917 background-color: transparent;
918}
919.radial-progress:before,
920.radial-progress:after {
921 position: absolute;
922 border-radius: 9999px;
923 content: "";
924}
925.radial-progress:before {
926 top: 0px;
927 right: 0px;
928 bottom: 0px;
929 left: 0px;
930 background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);
931 -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)));
932 mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)));
933}
934.radial-progress:after {
935 inset: calc(50% - var(--thickness) / 2);
936 transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
937}
938.radio {
939 flex-shrink: 0
940}
941.range {
942 height: 1.5rem;
943 width: 100%;
944 cursor: pointer;
945}
946 .range:focus {
947 outline: none;
948 }
949.rating {
950 position: relative;
951 display: inline-flex
952}
953 .rating :where(input) {
954 cursor: pointer
955}
956.select {
957 display: inline-flex;
958 flex-shrink: 0;
959 cursor: pointer;
960 -webkit-user-select: none;
961 user-select: none;
962 appearance: none;
963 height: 3rem;
964 padding-left: 1rem;
965 padding-right: 2.5rem;
966 font-size: 0.875rem;
967 line-height: 1.25rem;
968 line-height: 2;
969 min-height: 3rem
970
971 /* disabled */
972 /* &-disabled,
973 &[disabled] {
974 @apply pointer-events-none;
975 } */
976}
977 /* multiple */
978 .select[multiple] {
979 height: auto
980}
981.stack {
982 display: inline-grid;
983}
984 .stack > * {
985 grid-column-start: 1;
986 grid-row-start: 1;
987 transform: translateY(1rem) scale(0.9);
988 z-index: 1;
989}
990 .stack > *:nth-child(2) {
991 transform: translateY(0.5rem) scale(0.95);
992 z-index: 2;
993 }
994 .stack > *:nth-child(1) {
995 transform: translateY(0) scale(1);
996 z-index: 3;
997 }
998.stats {
999 display: inline-grid
1000}
1001:where(.stats) {
1002 grid-auto-flow: column
1003}
1004.stat {
1005 display: inline-grid;
1006 width: 100%;
1007 grid-template-columns: repeat(1, 1fr)
1008}
1009.stat-figure {
1010 grid-column-start: 2;
1011 grid-row: span 3 / span 3;
1012 grid-row-start: 1;
1013 place-self: center;
1014 justify-self: end
1015}
1016.stat-title {
1017 grid-column-start: 1;
1018 white-space: nowrap
1019}
1020.stat-value {
1021 grid-column-start: 1;
1022 white-space: nowrap
1023}
1024.stat-desc {
1025 grid-column-start: 1;
1026 white-space: nowrap
1027}
1028.stat-actions {
1029 grid-column-start: 1;
1030 white-space: nowrap
1031}
1032/* .stats.grid-flow-row {
1033 @apply auto-rows-fr;
1034} */
1035.steps {
1036 display: inline-grid;
1037 grid-auto-flow: column;
1038 overflow: hidden;
1039 overflow-x: auto;
1040 counter-reset: step;
1041 grid-auto-columns: 1fr
1042}
1043 .steps .step {
1044 display: grid;
1045 grid-template-columns: repeat(1, minmax(0, 1fr));
1046 grid-template-rows: repeat(2, minmax(0, 1fr));
1047 place-items: center;
1048 text-align: center
1049}
1050.swap {
1051
1052 position: relative;
1053
1054 display: inline-grid;
1055
1056 -webkit-user-select: none;
1057
1058 user-select: none;
1059
1060 place-content: center
1061}
1062
1063.swap > * {
1064
1065 grid-column-start: 1;
1066
1067 grid-row-start: 1
1068}
1069
1070.swap input {
1071
1072 appearance: none
1073}
1074
1075.swap .swap-on,
1076.swap .swap-indeterminate,
1077.swap input:indeterminate ~ .swap-on {
1078
1079 opacity: 0
1080}
1081
1082.swap input:checked ~ .swap-off,
1083.swap.swap-active .swap-off,
1084.swap input:indeterminate ~ .swap-off {
1085
1086 opacity: 0
1087}
1088
1089.swap input:checked ~ .swap-on,
1090.swap-active .swap-on,
1091.swap input:indeterminate ~ .swap-indeterminate {
1092
1093 opacity: 1
1094}
1095.tabs {
1096 display: flex;
1097 flex-wrap: wrap;
1098 align-items: flex-end
1099}
1100.tab {
1101 position: relative;
1102 display: inline-flex;
1103 cursor: pointer;
1104 -webkit-user-select: none;
1105 user-select: none;
1106 flex-wrap: wrap;
1107 align-items: center;
1108 justify-content: center;
1109 text-align: center;
1110 height: 2rem;
1111 font-size: 0.875rem;
1112 line-height: 1.25rem;
1113 line-height: 2;
1114 --tab-padding: 1rem
1115}
1116.table {
1117 position: relative
1118}
1119 .table th:first-child {
1120 position: sticky;
1121 left: 0px;
1122 z-index: 11;
1123 /* because safari */
1124 position: -webkit-sticky
1125}
1126.textarea {
1127 flex-shrink: 1;
1128 transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1129 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1130 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1131 transition-duration: 200ms;
1132 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1133 padding-left: 1rem;
1134 padding-right: 1rem;
1135 padding-top: 0.5rem;
1136 padding-bottom: 0.5rem;
1137 font-size: 0.875rem;
1138 line-height: 1.25rem;
1139 line-height: 2;
1140 min-height: 3rem
1141}
1142.toast {
1143 position: fixed;
1144 display: flex;
1145 min-width: fit-content;
1146 flex-direction: column
1147}
1148.toggle {
1149 flex-shrink: 0
1150}
1151.tooltip {
1152 position: relative;
1153 display: inline-block;
1154 --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px));
1155}
1156.tooltip:before {
1157 position: absolute;
1158 pointer-events: none;
1159 content: attr(data-tip);
1160 transform: translateX(-50%);
1161 top: auto;
1162 left: 50%;
1163 right: auto;
1164 bottom: var(--tooltip-offset);
1165}
1166.tooltip-bottom:before {
1167 transform: translateX(-50%);
1168 top: var(--tooltip-offset);
1169 left: 50%;
1170 right: auto;
1171 bottom: auto;
1172 }
1173.tooltip-left:before {
1174 transform: translateY(-50%);
1175 top: 50%;
1176 left: auto;
1177 right: var(--tooltip-offset);
1178 bottom: auto;
1179 }
1180.tooltip-right:before {
1181 transform: translateY(-50%);
1182 top: 50%;
1183 left: var(--tooltip-offset);
1184 right: auto;
1185 bottom: auto;
1186 }
1187.alert {
1188 --tw-bg-opacity: 1;
1189 background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
1190 padding: 1rem;
1191 border-radius: var(--rounded-box, 1rem)
1192}
1193 .alert-info {
1194 --tw-bg-opacity: 1;
1195 background-color: hsl(var(--in) / var(--tw-bg-opacity));
1196 --tw-text-opacity: 1;
1197 color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity))
1198}
1199 .alert-success {
1200 --tw-bg-opacity: 1;
1201 background-color: hsl(var(--su) / var(--tw-bg-opacity));
1202 --tw-text-opacity: 1;
1203 color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity))
1204}
1205 .alert-warning {
1206 --tw-bg-opacity: 1;
1207 background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1208 --tw-text-opacity: 1;
1209 color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity))
1210}
1211 .alert-error {
1212 --tw-bg-opacity: 1;
1213 background-color: hsl(var(--er) / var(--tw-bg-opacity));
1214 --tw-text-opacity: 1;
1215 color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity))
1216}
1217.avatar-group {
1218 display: flex;
1219 overflow: hidden
1220}
1221 .avatar-group .avatar {
1222 overflow: hidden;
1223 border-radius: 9999px;
1224 border-width: 4px;
1225 --tw-border-opacity: 1;
1226 border-color: hsl(var(--b1) / var(--tw-border-opacity))
1227}
1228.badge {
1229 border-width: 1px;
1230 --tw-border-opacity: 1;
1231 border-color: hsl(var(--n) / var(--tw-border-opacity));
1232 --tw-bg-opacity: 1;
1233 background-color: hsl(var(--n) / var(--tw-bg-opacity));
1234 --tw-text-opacity: 1;
1235 color: hsl(var(--nc) / var(--tw-text-opacity));
1236 border-radius: var(--rounded-badge, 1.9rem)
1237}
1238 .badge-primary {
1239 --tw-border-opacity: 1;
1240 border-color: hsl(var(--p) / var(--tw-border-opacity));
1241 --tw-bg-opacity: 1;
1242 background-color: hsl(var(--p) / var(--tw-bg-opacity));
1243 --tw-text-opacity: 1;
1244 color: hsl(var(--pc) / var(--tw-text-opacity))
1245}
1246 .badge-secondary {
1247 --tw-border-opacity: 1;
1248 border-color: hsl(var(--s) / var(--tw-border-opacity));
1249 --tw-bg-opacity: 1;
1250 background-color: hsl(var(--s) / var(--tw-bg-opacity));
1251 --tw-text-opacity: 1;
1252 color: hsl(var(--sc) / var(--tw-text-opacity))
1253}
1254 .badge-accent {
1255 --tw-border-opacity: 1;
1256 border-color: hsl(var(--a) / var(--tw-border-opacity));
1257 --tw-bg-opacity: 1;
1258 background-color: hsl(var(--a) / var(--tw-bg-opacity));
1259 --tw-text-opacity: 1;
1260 color: hsl(var(--ac) / var(--tw-text-opacity))
1261}
1262 .badge-info {
1263 border-color: transparent;
1264 --tw-bg-opacity: 1;
1265 background-color: hsl(var(--in) / var(--tw-bg-opacity));
1266 --tw-text-opacity: 1;
1267 color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity))
1268}
1269 .badge-success {
1270 border-color: transparent;
1271 --tw-bg-opacity: 1;
1272 background-color: hsl(var(--su) / var(--tw-bg-opacity));
1273 --tw-text-opacity: 1;
1274 color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity))
1275}
1276 .badge-warning {
1277 border-color: transparent;
1278 --tw-bg-opacity: 1;
1279 background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1280 --tw-text-opacity: 1;
1281 color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity))
1282}
1283 .badge-error {
1284 border-color: transparent;
1285 --tw-bg-opacity: 1;
1286 background-color: hsl(var(--er) / var(--tw-bg-opacity));
1287 --tw-text-opacity: 1;
1288 color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity))
1289}
1290 .badge-ghost {
1291 --tw-border-opacity: 1;
1292 border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
1293 --tw-bg-opacity: 1;
1294 background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
1295 --tw-text-opacity: 1;
1296 color: hsl(var(--bc) / var(--tw-text-opacity))
1297}
1298 .badge-outline {
1299 border-color: currentColor;
1300 --tw-border-opacity: 0.5;
1301 background-color: transparent;
1302 color: currentColor
1303}
1304 .badge-outline.badge-primary {
1305 --tw-text-opacity: 1;
1306 color: hsl(var(--p) / var(--tw-text-opacity))
1307}
1308 .badge-outline.badge-secondary {
1309 --tw-text-opacity: 1;
1310 color: hsl(var(--s) / var(--tw-text-opacity))
1311}
1312 .badge-outline.badge-accent {
1313 --tw-text-opacity: 1;
1314 color: hsl(var(--a) / var(--tw-text-opacity))
1315}
1316 .badge-outline.badge-info {
1317 --tw-text-opacity: 1;
1318 color: hsl(var(--in) / var(--tw-text-opacity))
1319}
1320 .badge-outline.badge-success {
1321 --tw-text-opacity: 1;
1322 color: hsl(var(--su) / var(--tw-text-opacity))
1323}
1324 .badge-outline.badge-warning {
1325 --tw-text-opacity: 1;
1326 color: hsl(var(--wa) / var(--tw-text-opacity))
1327}
1328 .badge-outline.badge-error {
1329 --tw-text-opacity: 1;
1330 color: hsl(var(--er) / var(--tw-text-opacity))
1331}
1332
1333.btn-outline .badge {
1334 --tw-border-opacity: 1;
1335 border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
1336 --tw-text-opacity: 1;
1337 color: hsl(var(--nc) / var(--tw-text-opacity))
1338}
1339
1340.btn-outline.btn-primary .badge {
1341 --tw-border-opacity: 1;
1342 border-color: hsl(var(--p) / var(--tw-border-opacity));
1343 --tw-bg-opacity: 1;
1344 background-color: hsl(var(--p) / var(--tw-bg-opacity));
1345 --tw-text-opacity: 1;
1346 color: hsl(var(--pc) / var(--tw-text-opacity))
1347}
1348
1349.btn-outline.btn-secondary .badge {
1350 --tw-border-opacity: 1;
1351 border-color: hsl(var(--s) / var(--tw-border-opacity));
1352 --tw-bg-opacity: 1;
1353 background-color: hsl(var(--s) / var(--tw-bg-opacity));
1354 --tw-text-opacity: 1;
1355 color: hsl(var(--sc) / var(--tw-text-opacity))
1356}
1357
1358.btn-outline.btn-accent .badge {
1359 --tw-border-opacity: 1;
1360 border-color: hsl(var(--a) / var(--tw-border-opacity));
1361 --tw-bg-opacity: 1;
1362 background-color: hsl(var(--a) / var(--tw-bg-opacity));
1363 --tw-text-opacity: 1;
1364 color: hsl(var(--ac) / var(--tw-text-opacity))
1365}
1366
1367.btn-outline .badge.outline {
1368 --tw-border-opacity: 1;
1369 border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
1370 background-color: transparent
1371}
1372
1373.btn-outline.btn-primary .badge-outline {
1374 --tw-border-opacity: 1;
1375 border-color: hsl(var(--p) / var(--tw-border-opacity));
1376 background-color: transparent;
1377 --tw-text-opacity: 1;
1378 color: hsl(var(--p) / var(--tw-text-opacity))
1379}
1380
1381.btn-outline.btn-secondary .badge-outline {
1382 --tw-border-opacity: 1;
1383 border-color: hsl(var(--s) / var(--tw-border-opacity));
1384 background-color: transparent;
1385 --tw-text-opacity: 1;
1386 color: hsl(var(--s) / var(--tw-text-opacity))
1387}
1388
1389.btn-outline.btn-accent .badge-outline {
1390 --tw-border-opacity: 1;
1391 border-color: hsl(var(--a) / var(--tw-border-opacity));
1392 background-color: transparent;
1393 --tw-text-opacity: 1;
1394 color: hsl(var(--a) / var(--tw-text-opacity))
1395}
1396
1397.btn-outline.btn-info .badge-outline {
1398 --tw-border-opacity: 1;
1399 border-color: hsl(var(--in) / var(--tw-border-opacity));
1400 background-color: transparent;
1401 --tw-text-opacity: 1;
1402 color: hsl(var(--in) / var(--tw-text-opacity))
1403}
1404
1405.btn-outline.btn-success .badge-outline {
1406 --tw-border-opacity: 1;
1407 border-color: hsl(var(--su) / var(--tw-border-opacity));
1408 background-color: transparent;
1409 --tw-text-opacity: 1;
1410 color: hsl(var(--su) / var(--tw-text-opacity))
1411}
1412
1413.btn-outline.btn-warning .badge-outline {
1414 --tw-border-opacity: 1;
1415 border-color: hsl(var(--wa) / var(--tw-border-opacity));
1416 background-color: transparent;
1417 --tw-text-opacity: 1;
1418 color: hsl(var(--wa) / var(--tw-text-opacity))
1419}
1420
1421.btn-outline.btn-error .badge-outline {
1422 --tw-border-opacity: 1;
1423 border-color: hsl(var(--er) / var(--tw-border-opacity));
1424 background-color: transparent;
1425 --tw-text-opacity: 1;
1426 color: hsl(var(--er) / var(--tw-text-opacity))
1427}
1428
1429.btn-outline:hover .badge {
1430 --tw-border-opacity: 1;
1431 border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
1432 --tw-bg-opacity: 1;
1433 background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
1434 --tw-text-opacity: 1;
1435 color: hsl(var(--bc) / var(--tw-text-opacity))
1436}
1437
1438.btn-outline:hover .badge.outline {
1439 --tw-border-opacity: 1;
1440 border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
1441 --tw-text-opacity: 1;
1442 color: hsl(var(--nc) / var(--tw-text-opacity))
1443}
1444
1445.btn-outline.btn-primary:hover .badge {
1446 --tw-border-opacity: 1;
1447 border-color: hsl(var(--pc) / var(--tw-border-opacity));
1448 --tw-bg-opacity: 1;
1449 background-color: hsl(var(--pc) / var(--tw-bg-opacity));
1450 --tw-text-opacity: 1;
1451 color: hsl(var(--p) / var(--tw-text-opacity))
1452}
1453
1454.btn-outline.btn-primary:hover .badge.outline {
1455 --tw-border-opacity: 1;
1456 border-color: hsl(var(--pc) / var(--tw-border-opacity));
1457 --tw-bg-opacity: 1;
1458 background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity));
1459 --tw-text-opacity: 1;
1460 color: hsl(var(--pc) / var(--tw-text-opacity))
1461}
1462
1463.btn-outline.btn-secondary:hover .badge {
1464 --tw-border-opacity: 1;
1465 border-color: hsl(var(--sc) / var(--tw-border-opacity));
1466 --tw-bg-opacity: 1;
1467 background-color: hsl(var(--sc) / var(--tw-bg-opacity));
1468 --tw-text-opacity: 1;
1469 color: hsl(var(--s) / var(--tw-text-opacity))
1470}
1471
1472.btn-outline.btn-secondary:hover .badge.outline {
1473 --tw-border-opacity: 1;
1474 border-color: hsl(var(--sc) / var(--tw-border-opacity));
1475 --tw-bg-opacity: 1;
1476 background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity));
1477 --tw-text-opacity: 1;
1478 color: hsl(var(--sc) / var(--tw-text-opacity))
1479}
1480
1481.btn-outline.btn-accent:hover .badge {
1482 --tw-border-opacity: 1;
1483 border-color: hsl(var(--ac) / var(--tw-border-opacity));
1484 --tw-bg-opacity: 1;
1485 background-color: hsl(var(--ac) / var(--tw-bg-opacity));
1486 --tw-text-opacity: 1;
1487 color: hsl(var(--a) / var(--tw-text-opacity))
1488}
1489
1490.btn-outline.btn-accent:hover .badge.outline {
1491 --tw-border-opacity: 1;
1492 border-color: hsl(var(--ac) / var(--tw-border-opacity));
1493 --tw-bg-opacity: 1;
1494 background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
1495 --tw-text-opacity: 1;
1496 color: hsl(var(--ac) / var(--tw-text-opacity))
1497}
1498.btm-nav {
1499 height: 4rem;
1500 --tw-bg-opacity: 1;
1501 background-color: hsl(var(--b1) / var(--tw-bg-opacity));
1502 color: currentColor
1503}
1504 .btm-nav>* {
1505 border-color: currentColor
1506}
1507 /* active */
1508 .btm-nav>*:where(.active) {
1509 border-top-width: 2px;
1510 --tw-bg-opacity: 1;
1511 background-color: hsl(var(--b1) / var(--tw-bg-opacity))
1512}
1513 /* disabled */
1514 .btm-nav>*.disabled,
1515 .btm-nav>*.disabled:hover,
1516 .btm-nav>*[disabled],
1517 .btm-nav>*[disabled]:hover {
1518 pointer-events: none;
1519 --tw-border-opacity: 0;
1520 background-color: hsl(var(--n) / var(--tw-bg-opacity));
1521 --tw-bg-opacity: 0.1;
1522 color: hsl(var(--bc) / var(--tw-text-opacity));
1523 --tw-text-opacity: 0.2
1524}
1525 .btm-nav>* .label {
1526 font-size: 1rem;
1527 line-height: 1.5rem
1528}
1529
1530
1531.breadcrumbs {
1532 padding-top: 0.5rem;
1533 padding-bottom: 0.5rem;
1534}
1535 .breadcrumbs > ul > li > a:focus {
1536 outline: 2px solid transparent;
1537 outline-offset: 2px;
1538}
1539 .breadcrumbs > ul > li > a:focus-visible {
1540 outline: 2px solid currentColor;
1541 outline-offset: 2px;
1542 }
1543 .breadcrumbs > ul > li + *:before {
1544 content: "";
1545 margin-left: 0.5rem;
1546 margin-right: 0.75rem;
1547 display: block;
1548 height: 0.375rem;
1549 width: 0.375rem;
1550 --tw-rotate: 45deg;
1551 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1552 opacity: 0.4;
1553 border-top: 1px solid;
1554 border-right: 1px solid;
1555 background-color: transparent;
1556 }
1557
1558[dir="rtl"] .breadcrumbs>ul>li+*:before {
1559 --tw-rotate: -45deg;
1560}.btn {
1561 font-weight: 600;
1562 text-transform: uppercase;
1563 -webkit-text-decoration-line: none;
1564 text-decoration-line: none;
1565 border-width: var(--border-btn, 1px);
1566 animation: button-pop var(--animation-btn, 0.25s) ease-out;
1567 text-transform: var(--btn-text-case, uppercase);
1568}
1569 .btn:active:hover,
1570 .btn:active:focus {
1571 animation: none;
1572 transform: scale(var(--btn-focus-scale, 0.95));
1573 }
1574 /* default btn */
1575 .btn {
1576 --tw-border-opacity: 1;
1577 border-color: hsl(var(--n) / var(--tw-border-opacity));
1578 --tw-bg-opacity: 1;
1579 background-color: hsl(var(--n) / var(--tw-bg-opacity));
1580 --tw-text-opacity: 1;
1581 color: hsl(var(--nc) / var(--tw-text-opacity));
1582}
1583 .btn:hover,
1584 .btn-active {
1585 --tw-border-opacity: 1;
1586 border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
1587 --tw-bg-opacity: 1;
1588 background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
1589}
1590 .btn:focus-visible {
1591 outline: 2px solid hsl(var(--nf));
1592 outline-offset: 2px;
1593 }
1594 /* brand colors */
1595 .btn-primary {
1596 --tw-border-opacity: 1;
1597 border-color: hsl(var(--p) / var(--tw-border-opacity));
1598 --tw-bg-opacity: 1;
1599 background-color: hsl(var(--p) / var(--tw-bg-opacity));
1600 --tw-text-opacity: 1;
1601 color: hsl(var(--pc) / var(--tw-text-opacity));
1602}
1603 .btn-primary:hover,
1604 .btn-primary.btn-active {
1605 --tw-border-opacity: 1;
1606 border-color: hsl(var(--pf, var(--p)) / var(--tw-border-opacity));
1607 --tw-bg-opacity: 1;
1608 background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity));
1609}
1610 .btn-primary:focus-visible {
1611 outline: 2px solid hsl(var(--p));
1612 }
1613 .btn-secondary {
1614 --tw-border-opacity: 1;
1615 border-color: hsl(var(--s) / var(--tw-border-opacity));
1616 --tw-bg-opacity: 1;
1617 background-color: hsl(var(--s) / var(--tw-bg-opacity));
1618 --tw-text-opacity: 1;
1619 color: hsl(var(--sc) / var(--tw-text-opacity));
1620}
1621 .btn-secondary:hover,
1622 .btn-secondary.btn-active {
1623 --tw-border-opacity: 1;
1624 border-color: hsl(var(--sf, var(--s)) / var(--tw-border-opacity));
1625 --tw-bg-opacity: 1;
1626 background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity));
1627}
1628 .btn-secondary:focus-visible {
1629 outline: 2px solid hsl(var(--s));
1630 }
1631 .btn-accent {
1632 --tw-border-opacity: 1;
1633 border-color: hsl(var(--a) / var(--tw-border-opacity));
1634 --tw-bg-opacity: 1;
1635 background-color: hsl(var(--a) / var(--tw-bg-opacity));
1636 --tw-text-opacity: 1;
1637 color: hsl(var(--ac) / var(--tw-text-opacity));
1638}
1639 .btn-accent:hover,
1640 .btn-accent.btn-active {
1641 --tw-border-opacity: 1;
1642 border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity));
1643 --tw-bg-opacity: 1;
1644 background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
1645}
1646 .btn-accent:focus-visible {
1647 outline: 2px solid hsl(var(--a));
1648 }
1649 /* btn with state colors */
1650 .btn-info {
1651 --tw-border-opacity: 1;
1652 border-color: hsl(var(--in) / var(--tw-border-opacity));
1653 --tw-bg-opacity: 1;
1654 background-color: hsl(var(--in) / var(--tw-bg-opacity));
1655 --tw-text-opacity: 1;
1656 color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
1657}
1658 .btn-info:hover,
1659 .btn-info.btn-active {
1660 --tw-border-opacity: 1;
1661 border-color: hsl(var(--in) / var(--tw-border-opacity));
1662 --tw-bg-opacity: 1;
1663 background-color: hsl(var(--in) / var(--tw-bg-opacity));
1664}
1665 .btn-info:focus-visible {
1666 outline: 2px solid hsl(var(--in));
1667 }
1668 .btn-success {
1669 --tw-border-opacity: 1;
1670 border-color: hsl(var(--su) / var(--tw-border-opacity));
1671 --tw-bg-opacity: 1;
1672 background-color: hsl(var(--su) / var(--tw-bg-opacity));
1673 --tw-text-opacity: 1;
1674 color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
1675}
1676 .btn-success:hover,
1677 .btn-success.btn-active {
1678 --tw-border-opacity: 1;
1679 border-color: hsl(var(--su) / var(--tw-border-opacity));
1680 --tw-bg-opacity: 1;
1681 background-color: hsl(var(--su) / var(--tw-bg-opacity));
1682}
1683 .btn-success:focus-visible {
1684 outline: 2px solid hsl(var(--su));
1685 }
1686 .btn-warning {
1687 --tw-border-opacity: 1;
1688 border-color: hsl(var(--wa) / var(--tw-border-opacity));
1689 --tw-bg-opacity: 1;
1690 background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1691 --tw-text-opacity: 1;
1692 color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
1693}
1694 .btn-warning:hover,
1695 .btn-warning.btn-active {
1696 --tw-border-opacity: 1;
1697 border-color: hsl(var(--wa) / var(--tw-border-opacity));
1698 --tw-bg-opacity: 1;
1699 background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1700}
1701 .btn-warning:focus-visible {
1702 outline: 2px solid hsl(var(--wa));
1703 }
1704 .btn-error {
1705 --tw-border-opacity: 1;
1706 border-color: hsl(var(--er) / var(--tw-border-opacity));
1707 --tw-bg-opacity: 1;
1708 background-color: hsl(var(--er) / var(--tw-bg-opacity));
1709 --tw-text-opacity: 1;
1710 color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
1711}
1712 .btn-error:hover,
1713 .btn-error.btn-active {
1714 --tw-border-opacity: 1;
1715 border-color: hsl(var(--er) / var(--tw-border-opacity));
1716 --tw-bg-opacity: 1;
1717 background-color: hsl(var(--er) / var(--tw-bg-opacity));
1718}
1719 .btn-error:focus-visible {
1720 outline: 2px solid hsl(var(--er));
1721 }
1722 /* glass */
1723 .btn.glass:hover,
1724 .btn.glass.btn-active {
1725 --glass-opacity: 25%;
1726 --glass-border-opacity: 15%;
1727 }
1728 .btn.glass:focus-visible {
1729 outline: 2px solid currentColor;
1730 }
1731 /* btn variants */
1732 .btn-ghost {
1733 border-width: 1px;
1734 border-color: transparent;
1735 background-color: transparent;
1736 color: currentColor;
1737}
1738 .btn-ghost:hover,
1739 .btn-ghost.btn-active {
1740 --tw-border-opacity: 0;
1741 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
1742 --tw-bg-opacity: 0.2;
1743}
1744 .btn-ghost:focus-visible {
1745 outline: 2px solid currentColor;
1746 }
1747 .btn-link {
1748 border-color: transparent;
1749 background-color: transparent;
1750 --tw-text-opacity: 1;
1751 color: hsl(var(--p) / var(--tw-text-opacity));
1752}
1753 .btn-link:hover,
1754 .btn-link.btn-active {
1755 border-color: transparent;
1756 background-color: transparent;
1757 -webkit-text-decoration-line: underline;
1758 text-decoration-line: underline;
1759}
1760 .btn-link:focus-visible {
1761 outline: 2px solid currentColor;
1762 }
1763 /* outline */
1764 .btn-outline {
1765 border-color: currentColor;
1766 background-color: transparent;
1767 --tw-text-opacity: 1;
1768 color: hsl(var(--bc) / var(--tw-text-opacity));
1769}
1770 .btn-outline:hover {
1771 --tw-border-opacity: 1;
1772 border-color: hsl(var(--bc) / var(--tw-border-opacity));
1773 --tw-bg-opacity: 1;
1774 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
1775 --tw-text-opacity: 1;
1776 color: hsl(var(--b1) / var(--tw-text-opacity));
1777}
1778 .btn-outline.btn-primary {
1779 --tw-text-opacity: 1;
1780 color: hsl(var(--p) / var(--tw-text-opacity));
1781}
1782 .btn-outline.btn-primary:hover {
1783 --tw-border-opacity: 1;
1784 border-color: hsl(var(--pf, var(--p)) / var(--tw-border-opacity));
1785 --tw-bg-opacity: 1;
1786 background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity));
1787 --tw-text-opacity: 1;
1788 color: hsl(var(--pc) / var(--tw-text-opacity));
1789}
1790 .btn-outline.btn-secondary {
1791 --tw-text-opacity: 1;
1792 color: hsl(var(--s) / var(--tw-text-opacity));
1793}
1794 .btn-outline.btn-secondary:hover {
1795 --tw-border-opacity: 1;
1796 border-color: hsl(var(--sf, var(--s)) / var(--tw-border-opacity));
1797 --tw-bg-opacity: 1;
1798 background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity));
1799 --tw-text-opacity: 1;
1800 color: hsl(var(--sc) / var(--tw-text-opacity));
1801}
1802 .btn-outline.btn-accent {
1803 --tw-text-opacity: 1;
1804 color: hsl(var(--a) / var(--tw-text-opacity));
1805}
1806 .btn-outline.btn-accent:hover {
1807 --tw-border-opacity: 1;
1808 border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity));
1809 --tw-bg-opacity: 1;
1810 background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
1811 --tw-text-opacity: 1;
1812 color: hsl(var(--ac) / var(--tw-text-opacity));
1813}
1814 .btn-outline.btn-success {
1815 --tw-text-opacity: 1;
1816 color: hsl(var(--su) / var(--tw-text-opacity));
1817}
1818 .btn-outline.btn-success:hover {
1819 --tw-border-opacity: 1;
1820 border-color: hsl(var(--su) / var(--tw-border-opacity));
1821 --tw-bg-opacity: 1;
1822 background-color: hsl(var(--su) / var(--tw-bg-opacity));
1823 --tw-text-opacity: 1;
1824 color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
1825}
1826 .btn-outline.btn-info {
1827 --tw-text-opacity: 1;
1828 color: hsl(var(--in) / var(--tw-text-opacity));
1829}
1830 .btn-outline.btn-info:hover {
1831 --tw-border-opacity: 1;
1832 border-color: hsl(var(--in) / var(--tw-border-opacity));
1833 --tw-bg-opacity: 1;
1834 background-color: hsl(var(--in) / var(--tw-bg-opacity));
1835 --tw-text-opacity: 1;
1836 color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
1837}
1838 .btn-outline.btn-warning {
1839 --tw-text-opacity: 1;
1840 color: hsl(var(--wa) / var(--tw-text-opacity));
1841}
1842 .btn-outline.btn-warning:hover {
1843 --tw-border-opacity: 1;
1844 border-color: hsl(var(--wa) / var(--tw-border-opacity));
1845 --tw-bg-opacity: 1;
1846 background-color: hsl(var(--wa) / var(--tw-bg-opacity));
1847 --tw-text-opacity: 1;
1848 color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
1849}
1850 .btn-outline.btn-error {
1851 --tw-text-opacity: 1;
1852 color: hsl(var(--er) / var(--tw-text-opacity));
1853}
1854 .btn-outline.btn-error:hover {
1855 --tw-border-opacity: 1;
1856 border-color: hsl(var(--er) / var(--tw-border-opacity));
1857 --tw-bg-opacity: 1;
1858 background-color: hsl(var(--er) / var(--tw-bg-opacity));
1859 --tw-text-opacity: 1;
1860 color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
1861}
1862 /* disabled */
1863 .btn-disabled,
1864 .btn-disabled:hover,
1865 .btn[disabled],
1866 .btn[disabled]:hover {
1867 --tw-border-opacity: 0;
1868 background-color: hsl(var(--n) / var(--tw-bg-opacity));
1869 --tw-bg-opacity: 0.2;
1870 color: hsl(var(--bc) / var(--tw-text-opacity));
1871 --tw-text-opacity: 0.2;
1872}
1873 /* loading */
1874 .btn.loading.btn-square:before,
1875 .btn.loading.btn-circle:before {
1876 margin-right: 0px;
1877}
1878 .btn.loading.btn-xl:before,
1879 .btn.loading.btn-lg:before {
1880 height: 1.25rem;
1881 width: 1.25rem;
1882}
1883 .btn.loading.btn-sm:before,
1884 .btn.loading.btn-xs:before {
1885 height: 0.75rem;
1886 width: 0.75rem;
1887}
1888/* group */
1889.btn-group > input[type="radio"]:checked.btn,
1890 .btn-group > .btn-active {
1891 --tw-border-opacity: 1;
1892 border-color: hsl(var(--p) / var(--tw-border-opacity));
1893 --tw-bg-opacity: 1;
1894 background-color: hsl(var(--p) / var(--tw-bg-opacity));
1895 --tw-text-opacity: 1;
1896 color: hsl(var(--pc) / var(--tw-text-opacity));
1897}
1898.btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
1899 outline: 2px solid hsl(var(--p));
1900 }
1901.btn-group:not(.btn-group-vertical) > .btn:not(:first-of-type) {
1902 margin-left: -1px;
1903 border-top-left-radius: 0px;
1904 border-bottom-left-radius: 0px;
1905}
1906.btn-group:not(.btn-group-vertical) > .btn:not(:last-of-type) {
1907 border-top-right-radius: 0px;
1908 border-bottom-right-radius: 0px;
1909}
1910.btn-group-vertical > .btn:not(:first-of-type) {
1911 margin-top: -1px;
1912 border-top-left-radius: 0px;
1913 border-top-right-radius: 0px;
1914}
1915.btn-group-vertical > .btn:not(:last-of-type) {
1916 border-bottom-right-radius: 0px;
1917 border-bottom-left-radius: 0px;
1918}
1919@keyframes button-pop {
1920 0% {
1921 transform: scale(var(--btn-focus-scale, 0.95));
1922 }
1923 40% {
1924 transform: scale(1.02);
1925 }
1926 100% {
1927 transform: scale(1);
1928 }
1929}
1930.card {
1931 border-radius: var(--rounded-box, 1rem);
1932}
1933 .card:focus-visible {
1934 outline: 2px solid currentColor;
1935 outline-offset: 2px;
1936 }
1937 .card.bordered {
1938 border-width: 1px;
1939 --tw-border-opacity: 1;
1940 border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
1941}
1942 .card-bordered {
1943 border-width: 1px;
1944 --tw-border-opacity: 1;
1945 border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
1946}
1947 .card.compact .card-body {
1948 padding: 1rem;
1949 font-size: 0.875rem;
1950 line-height: 1.25rem;
1951}
1952 .card-body {
1953 padding: var(--padding-card, 2rem);
1954 display: flex;
1955 flex-direction: column;
1956 gap: 0.5rem;
1957 }
1958 .card-title {
1959 display: flex;
1960 align-items: center;
1961 gap: 0.5rem;
1962 font-size: 1.25rem;
1963 line-height: 1.75rem;
1964 font-weight: 600;
1965}
1966 .card.image-full:before {
1967 z-index: 10;
1968 --tw-bg-opacity: 1;
1969 background-color: hsl(var(--n) / var(--tw-bg-opacity));
1970 opacity: 0.75;
1971 border-radius: var(--rounded-box, 1rem);
1972}
1973 .card.image-full > .card-body {
1974 z-index: 20;
1975 --tw-text-opacity: 1;
1976 color: hsl(var(--nc) / var(--tw-text-opacity));
1977}
1978.carousel {
1979 -ms-overflow-style: none;
1980 scrollbar-width: none;
1981}
1982 .carousel::-webkit-scrollbar {
1983 display: none;
1984}
1985.checkbox {
1986 --chkbg: var(--bc);
1987 --chkfg: var(--b1);
1988 height: 1.5rem;
1989 width: 1.5rem;
1990 cursor: pointer;
1991 appearance: none;
1992 border-width: 1px;
1993 border-color: hsl(var(--bc) / var(--tw-border-opacity));
1994 --tw-border-opacity: 0.2;
1995 border-radius: var(--rounded-btn, 0.5rem);
1996}
1997 .checkbox:focus-visible {
1998 outline: 2px solid hsl(var(--bc));
1999 outline-offset: 2px;
2000 }
2001 .checkbox:checked,
2002 .checkbox[checked="true"],
2003 .checkbox[aria-checked=true] {
2004 --tw-bg-opacity: 1;
2005 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2006 background-repeat: no-repeat;
2007 animation: checkmark var(--animation-input, 0.2s) ease-in-out;
2008 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%);
2009}
2010 .checkbox:indeterminate {
2011 --tw-bg-opacity: 1;
2012 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2013 background-repeat: no-repeat;
2014 animation: checkmark var(--animation-input, 0.2s) ease-in-out;
2015 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%);
2016}
2017 .checkbox-primary {
2018 --chkbg: var(--p);
2019 --chkfg: var(--pc);
2020 --tw-border-opacity: 1;
2021 border-color: hsl(var(--p) / var(--tw-border-opacity));
2022 }
2023 .checkbox-primary:hover {
2024 --tw-border-opacity: 1;
2025 border-color: hsl(var(--p) / var(--tw-border-opacity));
2026}
2027 .checkbox-primary:focus-visible {
2028 outline: 2px solid hsl(var(--p));
2029 }
2030 .checkbox-primary:checked,
2031 .checkbox-primary[checked="true"],
2032 .checkbox-primary[aria-checked=true] {
2033 --tw-border-opacity: 1;
2034 border-color: hsl(var(--p) / var(--tw-border-opacity));
2035 --tw-bg-opacity: 1;
2036 background-color: hsl(var(--p) / var(--tw-bg-opacity));
2037 --tw-text-opacity: 1;
2038 color: hsl(var(--pc) / var(--tw-text-opacity));
2039}
2040 .checkbox-secondary {
2041 --chkbg: var(--s);
2042 --chkfg: var(--sc);
2043 --tw-border-opacity: 1;
2044 border-color: hsl(var(--s) / var(--tw-border-opacity));
2045 }
2046 .checkbox-secondary:hover {
2047 --tw-border-opacity: 1;
2048 border-color: hsl(var(--s) / var(--tw-border-opacity));
2049}
2050 .checkbox-secondary:focus-visible {
2051 outline: 2px solid hsl(var(--s));
2052 }
2053 .checkbox-secondary:checked,
2054 .checkbox-secondary[checked="true"],
2055 .checkbox-secondary[aria-checked=true] {
2056 --tw-border-opacity: 1;
2057 border-color: hsl(var(--s) / var(--tw-border-opacity));
2058 --tw-bg-opacity: 1;
2059 background-color: hsl(var(--s) / var(--tw-bg-opacity));
2060 --tw-text-opacity: 1;
2061 color: hsl(var(--sc) / var(--tw-text-opacity));
2062}
2063 .checkbox-accent {
2064 --chkbg: var(--a);
2065 --chkfg: var(--ac);
2066 --tw-border-opacity: 1;
2067 border-color: hsl(var(--a) / var(--tw-border-opacity));
2068 }
2069 .checkbox-accent:hover {
2070 --tw-border-opacity: 1;
2071 border-color: hsl(var(--a) / var(--tw-border-opacity));
2072}
2073 .checkbox-accent:focus-visible {
2074 outline: 2px solid hsl(var(--a));
2075 }
2076 .checkbox-accent:checked,
2077 .checkbox-accent[checked="true"],
2078 .checkbox-accent[aria-checked=true] {
2079 --tw-border-opacity: 1;
2080 border-color: hsl(var(--a) / var(--tw-border-opacity));
2081 --tw-bg-opacity: 1;
2082 background-color: hsl(var(--a) / var(--tw-bg-opacity));
2083 --tw-text-opacity: 1;
2084 color: hsl(var(--ac) / var(--tw-text-opacity));
2085}
2086 .checkbox:disabled {
2087 cursor: not-allowed;
2088 border-color: transparent;
2089 --tw-bg-opacity: 1;
2090 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2091 opacity: 0.2;
2092}
2093
2094@keyframes checkmark {
2095 0% {
2096 background-position-y: 5px;
2097 }
2098 50% {
2099 background-position-y: -2px;
2100 }
2101 100% {
2102 background-position-y: 0;
2103 }
2104}
2105
2106/* backward comptability */
2107
2108.checkbox-mark {
2109 display: none;
2110}
2111
2112body[dir="rtl"] .checkbox {
2113 --chkbg: var(--bc);
2114 --chkfg: var(--b1);
2115 }
2116
2117body[dir="rtl"] .checkbox:checked,
2118 body[dir="rtl"] .checkbox[checked="true"],
2119 body[dir="rtl"] .checkbox[aria-checked=true] {
2120 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%);
2121 }
2122.collapse:focus-visible {
2123 outline: 2px solid hsl(var(--nf));
2124 outline-offset: 2px;
2125}
2126.collapse-arrow .collapse-title:after {
2127 position: absolute;
2128 display: block;
2129 height: 0.5rem;
2130 width: 0.5rem;
2131 transition-property: all;
2132 transition-duration: 150ms;
2133 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2134 transition-duration: 0.2s;
2135 top: 1.4rem;
2136 right: 1.4rem;
2137 content: "";
2138 transform-origin: 75% 75%;
2139 transform: rotate(45deg);
2140 box-shadow: 2px 2px;
2141 pointer-events: none;
2142}
2143.collapse-plus .collapse-title:after {
2144 position: absolute;
2145 display: block;
2146 height: 0.5rem;
2147 width: 0.5rem;
2148 transition-property: all;
2149 transition-duration: 300ms;
2150 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2151 top: 0.9rem;
2152 right: 1.4rem;
2153 content: "+";
2154 pointer-events: none;
2155}
2156.collapse:not(.collapse-open):not(.collapse-close) input[type="checkbox"],
2157.collapse:not(.collapse-open):not(.collapse-close) .collapse-title {
2158 cursor: pointer;
2159}
2160.collapse:focus:not(.collapse-open):not(.collapse-close) .collapse-title {
2161 cursor: unset;
2162}
2163.collapse-title,
2164.collapse > input[type="checkbox"] {
2165 width: 100%;
2166 padding: 1rem;
2167 padding-right: 3rem;
2168 min-height: 3.75rem;
2169 transition: background-color 0.2s ease-in-out;
2170}
2171/*
2172.collapse-open :where(.collapse-title),
2173.collapse:focus:not(.collapse-close) :where(.collapse-title),
2174.collapse:not(.collapse-close) :where(input[type="checkbox"]:checked ~ .collapse-title) {
2175 @apply bg-base-content bg-opacity-10;
2176} */
2177.collapse-content {
2178 padding-left: 1rem;
2179 padding-right: 1rem;
2180 cursor: unset;
2181 transition: padding 0.2s ease-in-out, background-color 0.2s ease-in-out;
2182}
2183.collapse-open :where(.collapse-content),
2184.collapse:focus:not(.collapse-close) :where(.collapse-content),
2185.collapse:not(.collapse-close) :where(input[type="checkbox"]:checked ~ .collapse-content) {
2186 padding-bottom: 1rem;
2187 transition: padding 0.2s ease-in-out, background-color 0.2s ease-in-out;
2188}
2189.collapse-open.collapse-arrow .collapse-title:after,
2190.collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
2191.collapse-arrow:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after {
2192 transform: rotate(225deg);
2193}
2194.collapse-open.collapse-plus .collapse-title:after,
2195.collapse-plus:focus:not(.collapse-close) .collapse-title:after,
2196.collapse-plus:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-title:after {
2197 content: "−";
2198}
2199.countdown > *:before {
2200 text-align: center;
2201 transition: all 1s cubic-bezier(1, 0, 0, 1);
2202 }
2203.divider {
2204 margin-top: 1rem;
2205 margin-bottom: 1rem;
2206 height: 1rem;
2207 white-space: nowrap
2208}
2209 .divider:before {
2210 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2211 --tw-bg-opacity: 0.1
2212}
2213 .divider:after {
2214 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2215 --tw-bg-opacity: 0.1
2216}
2217 .divider:not(:empty) {
2218 gap: 1rem
2219}
2220.drawer.drawer-end > .drawer-toggle:checked ~ .drawer-content {
2221 --tw-translate-x: -0.5rem;
2222 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2223}
2224.drawer-toggle ~ .drawer-content {
2225 transition-property: all;
2226 transition-duration: 300ms;
2227 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2228}
2229.drawer-toggle ~ .drawer-side > .drawer-overlay {
2230 cursor: pointer;
2231 --tw-bg-opacity: 1;
2232 background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
2233 transition-property: all;
2234 transition-duration: 300ms;
2235 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2236}
2237.drawer-toggle ~ .drawer-side > .drawer-overlay + * {
2238 transition-property: all;
2239 transition-duration: 300ms;
2240 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2241}
2242.drawer-toggle:checked ~ .drawer-content {
2243 --tw-translate-x: 0.5rem;
2244 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2245}
2246.drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
2247 opacity: 0.999999; /* 1 causes a bug on chrome 🤷‍♂️ */ --tw-bg-opacity: 0.4;
2248 }
2249.drawer-toggle:focus-visible ~ .drawer-content .drawer-button {
2250 outline: 2px solid hsl(var(--nf));
2251 outline-offset: 2px;
2252 }
2253.drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-primary {
2254 outline: 2px solid hsl(var(--p));
2255 }
2256.drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-secondary {
2257 outline: 2px solid hsl(var(--s));
2258 }
2259.drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-accent {
2260 outline: 2px solid hsl(var(--a));
2261 }
2262.drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-info {
2263 outline: 2px solid hsl(var(--in));
2264 }
2265.drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-success {
2266 outline: 2px solid hsl(var(--su));
2267 }
2268.drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-warning {
2269 outline: 2px solid hsl(var(--wa));
2270 }
2271.drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-error {
2272 outline: 2px solid hsl(var(--er));
2273 }
2274.drawer-toggle:focus-visible ~ .drawer-content .drawer-button.glass {
2275 outline: 2px solid currentColor;
2276 }
2277.drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-ghost {
2278 outline: 2px solid currentColor;
2279 }
2280.drawer-toggle:focus-visible ~ .drawer-content .drawer-button.btn-link {
2281 outline: 2px solid currentColor;
2282 }
2283@media (min-width: 1024px) {
2284 .drawer-mobile > .drawer-toggle:checked ~ .drawer-content {
2285 --tw-translate-x: 0px;
2286 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2287 }
2288}
2289.dropdown .dropdown-content {
2290 transform-origin: top;
2291 --tw-scale-x: .95;
2292 --tw-scale-y: .95;
2293 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2294 transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
2295 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2296 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
2297 transition-duration: 200ms;
2298 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
2299}
2300.dropdown-top .dropdown-content {
2301 transform-origin: bottom
2302}
2303.dropdown-left .dropdown-content {
2304 transform-origin: right
2305}
2306.dropdown-right .dropdown-content {
2307 transform-origin: left
2308}
2309.dropdown.dropdown-open .dropdown-content,
2310.dropdown.dropdown-hover:hover .dropdown-content,
2311.dropdown:focus .dropdown-content,
2312.dropdown:focus-within .dropdown-content {
2313 --tw-scale-x: 1;
2314 --tw-scale-y: 1;
2315 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
2316}
2317.footer {
2318 row-gap: 2.5rem;
2319 column-gap: 1rem;
2320 font-size: 0.875rem;
2321 line-height: 1.25rem
2322}
2323 .footer > * {
2324 gap: 0.5rem
2325}
2326 .footer-title {
2327 margin-bottom: 0.5rem;
2328 font-weight: 700;
2329 text-transform: uppercase;
2330 opacity: 0.5
2331}
2332.label {
2333 padding-left: 0.25rem;
2334 padding-right: 0.25rem;
2335 padding-top: 0.5rem;
2336 padding-bottom: 0.5rem
2337}
2338 .label-text {
2339 font-size: 0.875rem;
2340 line-height: 1.25rem;
2341 --tw-text-opacity: 1;
2342 color: hsl(var(--bc) / var(--tw-text-opacity))
2343}
2344 .label-text-alt {
2345 font-size: 0.75rem;
2346 line-height: 1rem;
2347 --tw-text-opacity: 1;
2348 color: hsl(var(--bc) / var(--tw-text-opacity))
2349}
2350 .label a:hover {
2351 --tw-text-opacity: 1;
2352 color: hsl(var(--bc) / var(--tw-text-opacity))
2353}
2354.hero-overlay {
2355 background-color: hsl(var(--n) / var(--tw-bg-opacity));
2356 --tw-bg-opacity: 0.5
2357}
2358 .hero-content {
2359 max-width: 80rem;
2360 gap: 1rem;
2361 padding: 1rem
2362}
2363.input {
2364 border-width: 1px;
2365 border-color: hsl(var(--bc) / var(--tw-border-opacity));
2366 --tw-border-opacity: 0;
2367 --tw-bg-opacity: 1;
2368 background-color: hsl(var(--b1) / var(--tw-bg-opacity));
2369 border-radius: var(--rounded-btn, 0.5rem);
2370 /* &::-webkit-calendar-picker-indicator {
2371 display: none;
2372 } */
2373}
2374 .input[list]::-webkit-calendar-picker-indicator {
2375 line-height: 1em;
2376 }
2377 .input-bordered {
2378 --tw-border-opacity: 0.2;
2379}
2380 .input:focus {
2381 outline: 2px solid hsla(var(--bc) / 0.2);
2382 outline-offset: 2px;
2383 }
2384 .input-ghost {
2385 --tw-bg-opacity: 0.05;
2386}
2387 .input-ghost:focus {
2388 --tw-bg-opacity: 1;
2389 --tw-text-opacity: 1;
2390 color: hsl(var(--bc) / var(--tw-text-opacity));
2391 box-shadow: none;
2392}
2393 .input-primary {
2394 --tw-border-opacity: 1;
2395 border-color: hsl(var(--p) / var(--tw-border-opacity));
2396}
2397 .input-primary:focus {
2398 outline: 2px solid hsl(var(--p));
2399 }
2400 .input-secondary {
2401 --tw-border-opacity: 1;
2402 border-color: hsl(var(--s) / var(--tw-border-opacity));
2403}
2404 .input-secondary:focus {
2405 outline: 2px solid hsl(var(--s));
2406 }
2407 .input-accent {
2408 --tw-border-opacity: 1;
2409 border-color: hsl(var(--a) / var(--tw-border-opacity));
2410}
2411 .input-accent:focus {
2412 outline: 2px solid hsl(var(--a));
2413 }
2414 .input-info {
2415 --tw-border-opacity: 1;
2416 border-color: hsl(var(--in) / var(--tw-border-opacity));
2417}
2418 .input-info:focus {
2419 outline: 2px solid hsl(var(--in));
2420 }
2421 .input-success {
2422 --tw-border-opacity: 1;
2423 border-color: hsl(var(--su) / var(--tw-border-opacity));
2424}
2425 .input-success:focus {
2426 outline: 2px solid hsl(var(--su));
2427 }
2428 .input-warning {
2429 --tw-border-opacity: 1;
2430 border-color: hsl(var(--wa) / var(--tw-border-opacity));
2431}
2432 .input-warning:focus {
2433 outline: 2px solid hsl(var(--wa));
2434 }
2435 .input-error {
2436 --tw-border-opacity: 1;
2437 border-color: hsl(var(--er) / var(--tw-border-opacity));
2438}
2439 .input-error:focus {
2440 outline: 2px solid hsl(var(--er));
2441 }
2442 .input-disabled,
2443 .input[disabled] {
2444 cursor: not-allowed;
2445 --tw-border-opacity: 1;
2446 border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
2447 --tw-bg-opacity: 1;
2448 background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
2449 --tw-text-opacity: 0.2;
2450}
2451 .input-disabled::placeholder,
2452 .input[disabled]::placeholder {
2453 color: hsl(var(--bc) / var(--tw-placeholder-opacity));
2454 --tw-placeholder-opacity: 0.2;
2455}
2456.kbd {
2457 border-width: 1px;
2458 border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
2459 --tw-border-opacity: 0.2;
2460 --tw-bg-opacity: 1;
2461 background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
2462 padding-left: 0.5rem;
2463 padding-right: 0.5rem;
2464 border-radius: var(--rounded-btn, 0.5rem);
2465 border-bottom-width: 2px;
2466 min-height: 2.2em;
2467 min-width: 2.2em
2468}
2469.link-primary {
2470 --tw-text-opacity: 1;
2471 color: hsl(var(--p) / var(--tw-text-opacity));
2472}
2473.link-primary:hover {
2474 --tw-text-opacity: 1;
2475 color: hsl(var(--pf, var(--p)) / var(--tw-text-opacity));
2476}
2477 .link-secondary {
2478 --tw-text-opacity: 1;
2479 color: hsl(var(--s) / var(--tw-text-opacity));
2480}
2481 .link-secondary:hover {
2482 --tw-text-opacity: 1;
2483 color: hsl(var(--sf, var(--s)) / var(--tw-text-opacity));
2484}
2485 .link-accent {
2486 --tw-text-opacity: 1;
2487 color: hsl(var(--a) / var(--tw-text-opacity));
2488}
2489 .link-accent:hover {
2490 --tw-text-opacity: 1;
2491 color: hsl(var(--af, var(--a)) / var(--tw-text-opacity));
2492}
2493 .link-neutral {
2494 --tw-text-opacity: 1;
2495 color: hsl(var(--n) / var(--tw-text-opacity));
2496}
2497 .link-neutral:hover {
2498 --tw-text-opacity: 1;
2499 color: hsl(var(--nf, var(--n)) / var(--tw-text-opacity));
2500}
2501 .link:focus {
2502 outline: 2px solid transparent;
2503 outline-offset: 2px;
2504}
2505 .link:focus-visible {
2506 outline: 2px solid currentColor;
2507 outline-offset: 2px;
2508 }
2509.mask-squircle {
2510 -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCiAgPHBhdGggZD0iTSAxMDAgMCBDIDIwIDAgMCAyMCAwIDEwMCBDIDAgMTgwIDIwIDIwMCAxMDAgMjAwIEMgMTgwIDIwMCAyMDAgMTgwIDIwMCAxMDAgQyAyMDAgMjAgMTgwIDAgMTAwIDAgWiIvPgoKPC9zdmc+);
2511 mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCiAgPHBhdGggZD0iTSAxMDAgMCBDIDIwIDAgMCAyMCAwIDEwMCBDIDAgMTgwIDIwIDIwMCAxMDAgMjAwIEMgMTgwIDIwMCAyMDAgMTgwIDIwMCAxMDAgQyAyMDAgMjAgMTgwIDAgMTAwIDAgWiIvPgoKPC9zdmc+);
2512 }
2513 .mask-decagon {
2514 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkycHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAxOTIgMjAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+ZGVjYWdvbjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJkZWNhZ29uIiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9Ijk2IDAgMTU0Ljc3ODUyNSAxOS4wOTgzMDA2IDE5MS4xMDU2NTIgNjkuMDk4MzAwNiAxOTEuMTA1NjUyIDEzMC45MDE2OTkgMTU0Ljc3ODUyNSAxODAuOTAxNjk5IDk2IDIwMCAzNy4yMjE0NzQ4IDE4MC45MDE2OTkgMC44OTQzNDgzNyAxMzAuOTAxNjk5IDAuODk0MzQ4MzcgNjkuMDk4MzAwNiAzNy4yMjE0NzQ4IDE5LjA5ODMwMDYiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2515 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkycHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAxOTIgMjAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+ZGVjYWdvbjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJkZWNhZ29uIiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9Ijk2IDAgMTU0Ljc3ODUyNSAxOS4wOTgzMDA2IDE5MS4xMDU2NTIgNjkuMDk4MzAwNiAxOTEuMTA1NjUyIDEzMC45MDE2OTkgMTU0Ljc3ODUyNSAxODAuOTAxNjk5IDk2IDIwMCAzNy4yMjE0NzQ4IDE4MC45MDE2OTkgMC44OTQzNDgzNyAxMzAuOTAxNjk5IDAuODk0MzQ4MzcgNjkuMDk4MzAwNiAzNy4yMjE0NzQ4IDE5LjA5ODMwMDYiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2516 }
2517 .mask-diamond {
2518 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+ZGlhbW9uZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJkaWFtb25kIiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjEwMCAwIDIwMCAxMDAgMTAwIDIwMCAwIDEwMCI+PC9wb2x5Z29uPgogICAgPC9nPgo8L3N2Zz4=);
2519 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+ZGlhbW9uZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJkaWFtb25kIiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjEwMCAwIDIwMCAxMDAgMTAwIDIwMCAwIDEwMCI+PC9wb2x5Z29uPgogICAgPC9nPgo8L3N2Zz4=);
2520 }
2521 .mask-heart {
2522 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMTg1cHgiIHZpZXdCb3g9IjAgMCAyMDAgMTg1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+aGVhcnQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMTAwLDE4NC42MDU1MzQgQzk2LjkxMjE3MTYsMTg0LjYwMTYzNSA5My44OTY5NzMzLDE4My42Njg1OTggOTEuMzQ2NjE4MiwxODEuOTI3NzkzIEM1My41NjQ5ODA0LDE1Ni4yODAxMjMgMzcuMjA1Mjc2NCwxMzguNjk0NTIzIDI4LjE4MTcxOTQsMTI3LjY5OTkxNyBDOC45NTE5NzYyNiwxMDQuMjYzNjY3IC0wLjI1NDI2MzI3Myw4MC4yMDI0NTEzIDAuMDA1MzM4MjU5MzEsNTQuMTQ2MTQ5MyBDMC4zMDgyMDY3MTQsMjQuMjg3MTY1NiAyNC4yNjM2NTkzLDAgNTMuNDA2MzM1LDAgQzc0LjU5NzUxMiwwIDg5LjI3NDYxMzQsMTEuOTM2ODYzMSA5Ny44MjIyMzQzLDIxLjg3ODY0MDMgQzk4LjM3MDA4MTIsMjIuNTA5NDMgOTkuMTY0NTE5NiwyMi44NzE2ODg5IDEwMCwyMi44NzE2ODg5IEMxMDAuODM1NDg2LDIyLjg3MTY4ODkgMTAxLjYyOTkyNCwyMi41MDk0MyAxMDIuMTc3NzcxLDIxLjg3ODY0MDMgQzExMC43MjUzOTIsMTEuOTI3MjQ4MiAxMjUuNDAyNDkzLDAgMTQ2LjU5MzY3LDAgQzE3NS43MzYzNDYsMCAxOTkuNjkxNzk5LDI0LjI4NzE2NTYgMTk5Ljk5NDY2Nyw1NC4xNTA5NTY3IEMyMDAuMjU0MjY5LDgwLjIxMjA2NjEgMTkxLjAzODQxNCwxMDQuMjczMjgyIDE3MS44MTgyODYsMTI3LjcwNDcyNCBDMTYyLjc5NDcyOSwxMzguNjk5MzMgMTQ2LjQzNTAyNSwxNTYuMjg0OTMgMTA4LjY1MzM4NywxODEuOTMyNiBDMTA2LjEwMjQ4NCwxODMuNjcxNzA0IDEwMy4wODczMjksMTg0LjYwMzA1MiAxMDAsMTg0LjYwNTUzNCBaIiBpZD0iaGVhcnQiIGZpbGw9IiMwMDAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=);
2523 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMTg1cHgiIHZpZXdCb3g9IjAgMCAyMDAgMTg1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+aGVhcnQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMTAwLDE4NC42MDU1MzQgQzk2LjkxMjE3MTYsMTg0LjYwMTYzNSA5My44OTY5NzMzLDE4My42Njg1OTggOTEuMzQ2NjE4MiwxODEuOTI3NzkzIEM1My41NjQ5ODA0LDE1Ni4yODAxMjMgMzcuMjA1Mjc2NCwxMzguNjk0NTIzIDI4LjE4MTcxOTQsMTI3LjY5OTkxNyBDOC45NTE5NzYyNiwxMDQuMjYzNjY3IC0wLjI1NDI2MzI3Myw4MC4yMDI0NTEzIDAuMDA1MzM4MjU5MzEsNTQuMTQ2MTQ5MyBDMC4zMDgyMDY3MTQsMjQuMjg3MTY1NiAyNC4yNjM2NTkzLDAgNTMuNDA2MzM1LDAgQzc0LjU5NzUxMiwwIDg5LjI3NDYxMzQsMTEuOTM2ODYzMSA5Ny44MjIyMzQzLDIxLjg3ODY0MDMgQzk4LjM3MDA4MTIsMjIuNTA5NDMgOTkuMTY0NTE5NiwyMi44NzE2ODg5IDEwMCwyMi44NzE2ODg5IEMxMDAuODM1NDg2LDIyLjg3MTY4ODkgMTAxLjYyOTkyNCwyMi41MDk0MyAxMDIuMTc3NzcxLDIxLjg3ODY0MDMgQzExMC43MjUzOTIsMTEuOTI3MjQ4MiAxMjUuNDAyNDkzLDAgMTQ2LjU5MzY3LDAgQzE3NS43MzYzNDYsMCAxOTkuNjkxNzk5LDI0LjI4NzE2NTYgMTk5Ljk5NDY2Nyw1NC4xNTA5NTY3IEMyMDAuMjU0MjY5LDgwLjIxMjA2NjEgMTkxLjAzODQxNCwxMDQuMjczMjgyIDE3MS44MTgyODYsMTI3LjcwNDcyNCBDMTYyLjc5NDcyOSwxMzguNjk5MzMgMTQ2LjQzNTAyNSwxNTYuMjg0OTMgMTA4LjY1MzM4NywxODEuOTMyNiBDMTA2LjEwMjQ4NCwxODMuNjcxNzA0IDEwMy4wODczMjksMTg0LjYwMzA1MiAxMDAsMTg0LjYwNTUzNCBaIiBpZD0iaGVhcnQiIGZpbGw9IiMwMDAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=);
2524 }
2525 .mask-hexagon {
2526 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTgycHgiIGhlaWdodD0iMjAxcHgiIHZpZXdCb3g9IjAgMCAxODIgMjAxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+aGV4YWdvbjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik01NS43ODU3ODg5LDE5MS40MDAyMDkgQzQ2LjU5MDM4NjYsMTkxLjQwMDIwOSAzNS43MjMwOTMsMTg0LjcxMjY0NCAzMC43MDc0MTksMTc3LjE4OTEzMyBMLTUuMjM4MjQ0NTEsMTE1LjMyOTE1NCBDLTEwLjI1MzkxODUsMTA2Ljk2OTY5NyAtMTAuMjUzOTE4NSw5NC40MzA1MTIgLTUuMjM4MjQ0NTEsODYuMDcxMDU1NCBMMzAuNzA3NDE5LDI0LjIxMTA3NjMgQzM1LjcyMzA5MywxNS44NTE2MTk2IDQ2LjU5MDM4NjYsMTAgNTUuNzg1Nzg4OSwxMCBMMTI2Ljg0MTE3LDEwIEMxMzYuMDM2NTczLDEwIDE0Ni45MDM4NjYsMTYuNjg3NTY1MyAxNTEuOTE5NTQsMjQuMjExMDc2MyBMMTg3Ljg2NTIwNCw4Ni4wNzEwNTU0IEMxOTIuMDQ0OTMyLDk0LjQzMDUxMiAxOTIuMDQ0OTMyLDEwNi45Njk2OTcgMTg3Ljg2NTIwNCwxMTUuMzI5MTU0IEwxNTEuOTE5NTQsMTc3LjE4OTEzMyBDMTQ3LjczOTgxMiwxODUuNTQ4NTg5IDEzNi4wMzY1NzMsMTkxLjQwMDIwOSAxMjYuODQxMTcsMTkxLjQwMDIwOSBMNTUuNzg1Nzg4OSwxOTEuNDAwMjA5IFoiIGlkPSJoZXhhZ29uIiBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkxLjAwMDAwMCwgMTAwLjcwMDEwNCkgcm90YXRlKC0yNzAuMDAwMDAwKSB0cmFuc2xhdGUoLTkxLjAwMDAwMCwgLTEwMC43MDAxMDQpICI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=);
2527 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTgycHgiIGhlaWdodD0iMjAxcHgiIHZpZXdCb3g9IjAgMCAxODIgMjAxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+aGV4YWdvbjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik01NS43ODU3ODg5LDE5MS40MDAyMDkgQzQ2LjU5MDM4NjYsMTkxLjQwMDIwOSAzNS43MjMwOTMsMTg0LjcxMjY0NCAzMC43MDc0MTksMTc3LjE4OTEzMyBMLTUuMjM4MjQ0NTEsMTE1LjMyOTE1NCBDLTEwLjI1MzkxODUsMTA2Ljk2OTY5NyAtMTAuMjUzOTE4NSw5NC40MzA1MTIgLTUuMjM4MjQ0NTEsODYuMDcxMDU1NCBMMzAuNzA3NDE5LDI0LjIxMTA3NjMgQzM1LjcyMzA5MywxNS44NTE2MTk2IDQ2LjU5MDM4NjYsMTAgNTUuNzg1Nzg4OSwxMCBMMTI2Ljg0MTE3LDEwIEMxMzYuMDM2NTczLDEwIDE0Ni45MDM4NjYsMTYuNjg3NTY1MyAxNTEuOTE5NTQsMjQuMjExMDc2MyBMMTg3Ljg2NTIwNCw4Ni4wNzEwNTU0IEMxOTIuMDQ0OTMyLDk0LjQzMDUxMiAxOTIuMDQ0OTMyLDEwNi45Njk2OTcgMTg3Ljg2NTIwNCwxMTUuMzI5MTU0IEwxNTEuOTE5NTQsMTc3LjE4OTEzMyBDMTQ3LjczOTgxMiwxODUuNTQ4NTg5IDEzNi4wMzY1NzMsMTkxLjQwMDIwOSAxMjYuODQxMTcsMTkxLjQwMDIwOSBMNTUuNzg1Nzg4OSwxOTEuNDAwMjA5IFoiIGlkPSJoZXhhZ29uIiBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkxLjAwMDAwMCwgMTAwLjcwMDEwNCkgcm90YXRlKC0yNzAuMDAwMDAwKSB0cmFuc2xhdGUoLTkxLjAwMDAwMCwgLTEwMC43MDAxMDQpICI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=);
2528 }
2529 .mask-hexagon-2 {
2530 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMTgycHgiIHZpZXdCb3g9IjAgMCAyMDAgMTgyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+aGV4YWdvbi0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTY0Ljc4NTc4ODksMTgxLjQwMDIwOSBDNTUuNTkwMzg2NiwxODEuNDAwMjA5IDQ0LjcyMzA5MywxNzQuNzEyNjQ0IDM5LjcwNzQxOSwxNjcuMTg5MTMzIEwzLjc2MTc1NTQ5LDEwNS4zMjkxNTQgQy0xLjI1MzkxODUsOTYuOTY5Njk3IC0xLjI1MzkxODUsODQuNDMwNTEyIDMuNzYxNzU1NDksNzYuMDcxMDU1NCBMMzkuNzA3NDE5LDE0LjIxMTA3NjMgQzQ0LjcyMzA5Myw1Ljg1MTYxOTY0IDU1LjU5MDM4NjYsMCA2NC43ODU3ODg5LDAgTDEzNS44NDExNywwIEMxNDUuMDM2NTczLDAgMTU1LjkwMzg2Niw2LjY4NzU2NTMxIDE2MC45MTk1NCwxNC4yMTEwNzYzIEwxOTYuODY1MjA0LDc2LjA3MTA1NTQgQzIwMS4wNDQ5MzIsODQuNDMwNTEyIDIwMS4wNDQ5MzIsOTYuOTY5Njk3IDE5Ni44NjUyMDQsMTA1LjMyOTE1NCBMMTYwLjkxOTU0LDE2Ny4xODkxMzMgQzE1Ni43Mzk4MTIsMTc1LjU0ODU4OSAxNDUuMDM2NTczLDE4MS40MDAyMDkgMTM1Ljg0MTE3LDE4MS40MDAyMDkgTDY0Ljc4NTc4ODksMTgxLjQwMDIwOSBaIiBpZD0iaGV4YWdvbi0yIiBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+);
2531 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMTgycHgiIHZpZXdCb3g9IjAgMCAyMDAgMTgyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+aGV4YWdvbi0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTY0Ljc4NTc4ODksMTgxLjQwMDIwOSBDNTUuNTkwMzg2NiwxODEuNDAwMjA5IDQ0LjcyMzA5MywxNzQuNzEyNjQ0IDM5LjcwNzQxOSwxNjcuMTg5MTMzIEwzLjc2MTc1NTQ5LDEwNS4zMjkxNTQgQy0xLjI1MzkxODUsOTYuOTY5Njk3IC0xLjI1MzkxODUsODQuNDMwNTEyIDMuNzYxNzU1NDksNzYuMDcxMDU1NCBMMzkuNzA3NDE5LDE0LjIxMTA3NjMgQzQ0LjcyMzA5Myw1Ljg1MTYxOTY0IDU1LjU5MDM4NjYsMCA2NC43ODU3ODg5LDAgTDEzNS44NDExNywwIEMxNDUuMDM2NTczLDAgMTU1LjkwMzg2Niw2LjY4NzU2NTMxIDE2MC45MTk1NCwxNC4yMTEwNzYzIEwxOTYuODY1MjA0LDc2LjA3MTA1NTQgQzIwMS4wNDQ5MzIsODQuNDMwNTEyIDIwMS4wNDQ5MzIsOTYuOTY5Njk3IDE5Ni44NjUyMDQsMTA1LjMyOTE1NCBMMTYwLjkxOTU0LDE2Ny4xODkxMzMgQzE1Ni43Mzk4MTIsMTc1LjU0ODU4OSAxNDUuMDM2NTczLDE4MS40MDAyMDkgMTM1Ljg0MTE3LDE4MS40MDAyMDkgTDY0Ljc4NTc4ODksMTgxLjQwMDIwOSBaIiBpZD0iaGV4YWdvbi0yIiBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+);
2532 }
2533 .mask-circle {
2534 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+T3ZhbDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiMwMDAwMDAiIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjEwMCI+PC9jaXJjbGU+CiAgICA8L2c+Cjwvc3ZnPg==);
2535 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+T3ZhbDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiMwMDAwMDAiIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjEwMCI+PC9jaXJjbGU+CiAgICA8L2c+Cjwvc3ZnPg==);
2536 }
2537 .mask-parallelogram {
2538 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMTU0cHgiIHZpZXdCb3g9IjAgMCAyMDAgMTU0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+cGFyYWxsZWxvZ3JhbTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJwYXJhbGxlbG9ncmFtIiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjQ2LjE1Mzg0NjIgMCAyMDAgMCAxNTMuODQ2MTU0IDE1My44NDYxNTQgMCAxNTMuODQ2MTU0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2539 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMTU0cHgiIHZpZXdCb3g9IjAgMCAyMDAgMTU0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+cGFyYWxsZWxvZ3JhbTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJwYXJhbGxlbG9ncmFtIiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjQ2LjE1Mzg0NjIgMCAyMDAgMCAxNTMuODQ2MTU0IDE1My44NDYxNTQgMCAxNTMuODQ2MTU0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2540 }
2541 .mask-parallelogram-2 {
2542 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMTU0cHgiIHZpZXdCb3g9IjAgMCAyMDAgMTU0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+cGFyYWxsZWxvZ3JhbS0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9InBhcmFsbGVsb2dyYW0tMiIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwLjAwMDAwMCwgNzYuOTIzMDc3KSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC0xMDAuMDAwMDAwLCAtNzYuOTIzMDc3KSAiIHBvaW50cz0iNDYuMTUzODQ2MiAwIDIwMCAwIDE1My44NDYxNTQgMTUzLjg0NjE1NCAwIDE1My44NDYxNTQiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2543 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMTU0cHgiIHZpZXdCb3g9IjAgMCAyMDAgMTU0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+cGFyYWxsZWxvZ3JhbS0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9InBhcmFsbGVsb2dyYW0tMiIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwLjAwMDAwMCwgNzYuOTIzMDc3KSBzY2FsZSgtMSwgMSkgdHJhbnNsYXRlKC0xMDAuMDAwMDAwLCAtNzYuOTIzMDc3KSAiIHBvaW50cz0iNDYuMTUzODQ2MiAwIDIwMCAwIDE1My44NDYxNTQgMTUzLjg0NjE1NCAwIDE1My44NDYxNTQiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2544 }
2545 .mask-parallelogram-3 {
2546 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTU0cHgiIGhlaWdodD0iMjAxcHgiIHZpZXdCb3g9IjAgMCAxNTQgMjAxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+cGFyYWxsZWxvZ3JhbS0zPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9InBhcmFsbGVsb2dyYW0tMyIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzcuMDAwMDAwLCAxMDAuOTIzMDc3KSBzY2FsZSgtMSwgMSkgcm90YXRlKDkwLjAwMDAwMCkgdHJhbnNsYXRlKC03Ny4wMDAwMDAsIC0xMDAuOTIzMDc3KSAiIHBvaW50cz0iMjMuMTUzODQ2MiAyNCAxNzcgMjQgMTMwLjg0NjE1NCAxNzcuODQ2MTU0IC0yMyAxNzcuODQ2MTU0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2547 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTU0cHgiIGhlaWdodD0iMjAxcHgiIHZpZXdCb3g9IjAgMCAxNTQgMjAxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+cGFyYWxsZWxvZ3JhbS0zPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9InBhcmFsbGVsb2dyYW0tMyIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzcuMDAwMDAwLCAxMDAuOTIzMDc3KSBzY2FsZSgtMSwgMSkgcm90YXRlKDkwLjAwMDAwMCkgdHJhbnNsYXRlKC03Ny4wMDAwMDAsIC0xMDAuOTIzMDc3KSAiIHBvaW50cz0iMjMuMTUzODQ2MiAyNCAxNzcgMjQgMTMwLjg0NjE1NCAxNzcuODQ2MTU0IC0yMyAxNzcuODQ2MTU0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2548 }
2549 .mask-parallelogram-4 {
2550 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTU0cHgiIGhlaWdodD0iMjAxcHgiIHZpZXdCb3g9IjAgMCAxNTQgMjAxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+cGFyYWxsZWxvZ3JhbS00PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9InBhcmFsbGVsb2dyYW0tNCIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzcuMDAwMDAwLCAxMDAuOTIzMDc3KSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTc3LjAwMDAwMCwgLTEwMC45MjMwNzcpICIgcG9pbnRzPSIyMy4xNTM4NDYyIDI0IDE3NyAyNCAxMzAuODQ2MTU0IDE3Ny44NDYxNTQgLTIzIDE3Ny44NDYxNTQiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2551 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTU0cHgiIGhlaWdodD0iMjAxcHgiIHZpZXdCb3g9IjAgMCAxNTQgMjAxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+cGFyYWxsZWxvZ3JhbS00PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9InBhcmFsbGVsb2dyYW0tNCIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzcuMDAwMDAwLCAxMDAuOTIzMDc3KSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTc3LjAwMDAwMCwgLTEwMC45MjMwNzcpICIgcG9pbnRzPSIyMy4xNTM4NDYyIDI0IDE3NyAyNCAxMzAuODQ2MTU0IDE3Ny44NDYxNTQgLTIzIDE3Ny44NDYxNTQiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2552 }
2553 .mask-pentagon {
2554 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkycHgiIGhlaWdodD0iMTgxcHgiIHZpZXdCb3g9IjAgMCAxOTIgMTgxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+cGVudGFnb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cG9seWdvbiBpZD0icGVudGFnb24iIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iOTYgMCAxOTEuMTA1NjUyIDY5LjA5ODMwMDYgMTU0Ljc3ODUyNSAxODAuOTAxNjk5IDM3LjIyMTQ3NDggMTgwLjkwMTY5OSAwLjg5NDM0ODM3IDY5LjA5ODMwMDYiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2555 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkycHgiIGhlaWdodD0iMTgxcHgiIHZpZXdCb3g9IjAgMCAxOTIgMTgxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+cGVudGFnb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cG9seWdvbiBpZD0icGVudGFnb24iIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iOTYgMCAxOTEuMTA1NjUyIDY5LjA5ODMwMDYgMTU0Ljc3ODUyNSAxODAuOTAxNjk5IDM3LjIyMTQ3NDggMTgwLjkwMTY5OSAwLjg5NDM0ODM3IDY5LjA5ODMwMDYiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2556 }
2557 .mask-square {
2558 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+c3F1YXJlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHJlY3QgaWQ9InNxdWFyZSIgZmlsbD0iIzAwMDAwMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPjwvcmVjdD4KICAgIDwvZz4KPC9zdmc+);
2559 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+c3F1YXJlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHJlY3QgaWQ9InNxdWFyZSIgZmlsbD0iIzAwMDAwMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPjwvcmVjdD4KICAgIDwvZz4KPC9zdmc+);
2560 }
2561 .mask-star {
2562 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkycHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxOTIgMTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+c3RhcjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJzdGFyIiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9Ijk2IDEzNy4yNjMzOTMgMzcuMjIxNDc0OCAxNzkuMjg2NTA2IDU5LjM4NDMyNDEgMTEwLjg5ODA3MyAwLjg5NDM0ODM3IDY4LjQ4MTM1MTUgNzMuMzcwMjY3OCA2OC4yMzgwODgyIDk2IDAgMTE4LjYyOTczMiA2OC4yMzgwODgyIDE5MS4xMDU2NTIgNjguNDgxMzUxNSAxMzIuNjE1Njc2IDExMC44OTgwNzMgMTU0Ljc3ODUyNSAxNzkuMjg2NTA2Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2563 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkycHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxOTIgMTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+c3RhcjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJzdGFyIiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9Ijk2IDEzNy4yNjMzOTMgMzcuMjIxNDc0OCAxNzkuMjg2NTA2IDU5LjM4NDMyNDEgMTEwLjg5ODA3MyAwLjg5NDM0ODM3IDY4LjQ4MTM1MTUgNzMuMzcwMjY3OCA2OC4yMzgwODgyIDk2IDAgMTE4LjYyOTczMiA2OC4yMzgwODgyIDE5MS4xMDU2NTIgNjguNDgxMzUxNSAxMzIuNjE1Njc2IDExMC44OTgwNzMgMTU0Ljc3ODUyNSAxNzkuMjg2NTA2Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2564 }
2565 .mask-star-2 {
2566 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkycHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxOTIgMTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+c3Rhci0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9InN0YXItMiIgZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSI5NiAxNTMuMDQzNjYxIDM3LjIyMTQ3NDggMTc5LjI4NjUwNiA0NC4yNDExOTA0IDExNS43NzQ0NDQgMC44OTQzNDgzNyA2OC40ODEzNTE1IDY0LjAxMTI5NjUgNTUuNDcxNTgyOCA5NiAwIDEyNy45ODg3MDQgNTUuNDcxNTgyOCAxOTEuMTA1NjUyIDY4LjQ4MTM1MTUgMTQ3Ljc1ODgxIDExNS43NzQ0NDQgMTU0Ljc3ODUyNSAxNzkuMjg2NTA2Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2567 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkycHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxOTIgMTgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+c3Rhci0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9InN0YXItMiIgZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSI5NiAxNTMuMDQzNjYxIDM3LjIyMTQ3NDggMTc5LjI4NjUwNiA0NC4yNDExOTA0IDExNS43NzQ0NDQgMC44OTQzNDgzNyA2OC40ODEzNTE1IDY0LjAxMTI5NjUgNTUuNDcxNTgyOCA5NiAwIDEyNy45ODg3MDQgNTUuNDcxNTgyOCAxOTEuMTA1NjUyIDY4LjQ4MTM1MTUgMTQ3Ljc1ODgxIDExNS43NzQ0NDQgMTU0Ljc3ODUyNSAxNzkuMjg2NTA2Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2568 }
2569 .mask-triangle {
2570 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTc0cHgiIGhlaWdodD0iMTQ5cHgiIHZpZXdCb3g9IjAgMCAxNzQgMTQ5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+dHJpYW5nbGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cG9seWdvbiBpZD0idHJpYW5nbGUiIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iODcgMTQ4LjQ3NjE3NyAwLjM5NzQ1OTYyMiAxNDguNjYwNzE0IDQzLjg1OTk4MzcgNzQuNDIyNjI1OSA4NyAyLjg0MjE3MDk0ZS0xNCAxMzAuMTQwMDE2IDc0LjQyMjYyNTkgMTczLjYwMjU0IDE0OC42NjA3MTQiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2571 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTc0cHgiIGhlaWdodD0iMTQ5cHgiIHZpZXdCb3g9IjAgMCAxNzQgMTQ5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+dHJpYW5nbGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cG9seWdvbiBpZD0idHJpYW5nbGUiIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iODcgMTQ4LjQ3NjE3NyAwLjM5NzQ1OTYyMiAxNDguNjYwNzE0IDQzLjg1OTk4MzcgNzQuNDIyNjI1OSA4NyAyLjg0MjE3MDk0ZS0xNCAxMzAuMTQwMDE2IDc0LjQyMjYyNTkgMTczLjYwMjU0IDE0OC42NjA3MTQiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2572 }
2573 .mask-triangle-2 {
2574 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTc0cHgiIGhlaWdodD0iMTUwcHgiIHZpZXdCb3g9IjAgMCAxNzQgMTUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+dHJpYW5nbGUtYm90dG9tPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9InRyaWFuZ2xlLWJvdHRvbSIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODcuMDAwMDAwLCA1MC4xMDcxNDMpIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC04Ny4wMDAwMDAsIC01MC4xMDcxNDMpICIgcG9pbnRzPSI4NyA5OS40NzYxNzY4IDAuMzk3NDU5NjIyIDk5LjY2MDcxNDMgNDMuODU5OTgzNyAyNS40MjI2MjU5IDg3IC00OSAxMzAuMTQwMDE2IDI1LjQyMjYyNTkgMTczLjYwMjU0IDk5LjY2MDcxNDMiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2575 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTc0cHgiIGhlaWdodD0iMTUwcHgiIHZpZXdCb3g9IjAgMCAxNzQgMTUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+dHJpYW5nbGUtYm90dG9tPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9InRyaWFuZ2xlLWJvdHRvbSIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODcuMDAwMDAwLCA1MC4xMDcxNDMpIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC04Ny4wMDAwMDAsIC01MC4xMDcxNDMpICIgcG9pbnRzPSI4NyA5OS40NzYxNzY4IDAuMzk3NDU5NjIyIDk5LjY2MDcxNDMgNDMuODU5OTgzNyAyNS40MjI2MjU5IDg3IC00OSAxMzAuMTQwMDE2IDI1LjQyMjYyNTkgMTczLjYwMjU0IDk5LjY2MDcxNDMiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+);
2576 }
2577 .mask-triangle-3 {
2578 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTUwcHgiIGhlaWdodD0iMTc0cHgiIHZpZXdCb3g9IjAgMCAxNTAgMTc0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+dHJpYW5nbGUtbGVmdDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJ0cmlhbmdsZS1sZWZ0IiBmaWxsPSIjMDAwMDAwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAuMDAwMDAwLCA4Ny4xMDcxNDMpIHJvdGF0ZSgtOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTEwMC4wMDAwMDAsIC04Ny4xMDcxNDMpICIgcG9pbnRzPSIxMDAgMTM2LjQ3NjE3NyAxMy4zOTc0NTk2IDEzNi42NjA3MTQgNTYuODU5OTgzNyA2Mi40MjI2MjU5IDEwMCAtMTIgMTQzLjE0MDAxNiA2Mi40MjI2MjU5IDE4Ni42MDI1NCAxMzYuNjYwNzE0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2579 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTUwcHgiIGhlaWdodD0iMTc0cHgiIHZpZXdCb3g9IjAgMCAxNTAgMTc0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+dHJpYW5nbGUtbGVmdDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJ0cmlhbmdsZS1sZWZ0IiBmaWxsPSIjMDAwMDAwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAuMDAwMDAwLCA4Ny4xMDcxNDMpIHJvdGF0ZSgtOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTEwMC4wMDAwMDAsIC04Ny4xMDcxNDMpICIgcG9pbnRzPSIxMDAgMTM2LjQ3NjE3NyAxMy4zOTc0NTk2IDEzNi42NjA3MTQgNTYuODU5OTgzNyA2Mi40MjI2MjU5IDEwMCAtMTIgMTQzLjE0MDAxNiA2Mi40MjI2MjU5IDE4Ni42MDI1NCAxMzYuNjYwNzE0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2580 }
2581 .mask-triangle-4 {
2582 -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTUwcHgiIGhlaWdodD0iMTc0cHgiIHZpZXdCb3g9IjAgMCAxNTAgMTc0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+dHJpYW5nbGUtcmlnaHQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cG9seWdvbiBpZD0idHJpYW5nbGUtcmlnaHQiIGZpbGw9IiMwMDAwMDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjAwMDAwMCwgODcuMTA3MTQzKSByb3RhdGUoLTI3MC4wMDAwMDApIHRyYW5zbGF0ZSgtNTAuMDAwMDAwLCAtODcuMTA3MTQzKSAiIHBvaW50cz0iNTAgMTM2LjQ3NjE3NyAtMzYuNjAyNTQwNCAxMzYuNjYwNzE0IDYuODU5OTgzNzQgNjIuNDIyNjI1OSA1MCAtMTIgOTMuMTQwMDE2MyA2Mi40MjI2MjU5IDEzNi42MDI1NCAxMzYuNjYwNzE0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2583 mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTUwcHgiIGhlaWdodD0iMTc0cHgiIHZpZXdCb3g9IjAgMCAxNTAgMTc0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MC4xICg4ODEzMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+dHJpYW5nbGUtcmlnaHQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cG9seWdvbiBpZD0idHJpYW5nbGUtcmlnaHQiIGZpbGw9IiMwMDAwMDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjAwMDAwMCwgODcuMTA3MTQzKSByb3RhdGUoLTI3MC4wMDAwMDApIHRyYW5zbGF0ZSgtNTAuMDAwMDAwLCAtODcuMTA3MTQzKSAiIHBvaW50cz0iNTAgMTM2LjQ3NjE3NyAtMzYuNjAyNTQwNCAxMzYuNjYwNzE0IDYuODU5OTgzNzQgNjIuNDIyNjI1OSA1MCAtMTIgOTMuMTQwMDE2MyA2Mi40MjI2MjU5IDEzNi42MDI1NCAxMzYuNjYwNzE0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==);
2584 }
2585.menu.horizontal li.bordered > a,
2586 .menu.horizontal li.bordered > button,
2587 .menu.horizontal li.bordered > span {
2588 border-left-width: 0px;
2589 border-bottom-width: 4px;
2590 --tw-border-opacity: 1;
2591 border-color: hsl(var(--p) / var(--tw-border-opacity));
2592}
2593 .menu[class*=" p-"] li > *,
2594 .menu[class^="p-"] li > * {
2595 border-radius: var(--rounded-btn, 0.5rem);
2596}
2597 .menu :where(li.bordered > *) {
2598 border-left-width: 4px;
2599 --tw-border-opacity: 1;
2600 border-color: hsl(var(--p) / var(--tw-border-opacity));
2601}
2602 .menu :where(li) > :where(*:not(ul)) {
2603 gap: 0.75rem;
2604 padding-left: 1rem;
2605 padding-right: 1rem;
2606 padding-top: 0.75rem;
2607 padding-bottom: 0.75rem;
2608 color: currentColor;
2609}
2610 .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):focus),
2611 .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):hover) {
2612 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2613 --tw-bg-opacity: 0.1;
2614}
2615 .menu :where(li:not(.menu-title):not(:empty)) > :where(:not(ul).active),
2616 .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):active) {
2617 --tw-bg-opacity: 1;
2618 background-color: hsl(var(--p) / var(--tw-bg-opacity));
2619 --tw-text-opacity: 1;
2620 color: hsl(var(--pc) / var(--tw-text-opacity));
2621}
2622 .menu :where(li:empty) {
2623 margin-left: 1rem;
2624 margin-right: 1rem;
2625 margin-top: 0.5rem;
2626 margin-bottom: 0.5rem;
2627 height: 1px;
2628 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2629 --tw-bg-opacity: 0.1;
2630}
2631 .menu li.disabled > * {
2632 -webkit-user-select: none;
2633 user-select: none;
2634 color: hsl(var(--bc) / var(--tw-text-opacity));
2635 --tw-text-opacity: 0.2;
2636}
2637 .menu li.disabled > *:hover {
2638 background-color: transparent;
2639}
2640 .menu li.hover-bordered a {
2641 border-left-width: 4px;
2642 border-color: transparent;
2643}
2644 .menu li.hover-bordered a:hover {
2645 --tw-border-opacity: 1;
2646 border-color: hsl(var(--p) / var(--tw-border-opacity));
2647}
2648 .menu.compact li > a,
2649 .menu.compact li > span {
2650 padding-top: 0.5rem;
2651 padding-bottom: 0.5rem;
2652 font-size: 0.875rem;
2653 line-height: 1.25rem;
2654}
2655 .menu .menu-title > * {
2656 padding-top: 0.25rem;
2657 padding-bottom: 0.25rem;
2658 font-size: 0.75rem;
2659 line-height: 1rem;
2660 font-weight: 700;
2661 color: hsl(var(--bc) / var(--tw-text-opacity));
2662 --tw-text-opacity: 0.4;
2663}
2664
2665.menu :where(li:not(.disabled)) > :where(*:not(ul)) {
2666 outline: 2px solid transparent;
2667 outline-offset: 2px;
2668 transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
2669 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2670 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
2671 transition-duration: 200ms;
2672 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2673}
2674
2675.menu > :where(li:first-child) {
2676 border-top-left-radius: inherit;
2677 border-top-right-radius: inherit;
2678 border-bottom-right-radius: unset;
2679 border-bottom-left-radius: unset;
2680}
2681
2682.menu > :where(li:first-child) > :where(:not(ul)) {
2683 border-top-left-radius: inherit;
2684 border-top-right-radius: inherit;
2685 border-bottom-right-radius: unset;
2686 border-bottom-left-radius: unset;
2687}
2688
2689.menu > :where(li:last-child) {
2690 border-top-left-radius: unset;
2691 border-top-right-radius: unset;
2692 border-bottom-right-radius: inherit;
2693 border-bottom-left-radius: inherit;
2694}
2695
2696.menu > :where(li:last-child) > :where(:not(ul)) {
2697 border-top-left-radius: unset;
2698 border-top-right-radius: unset;
2699 border-bottom-right-radius: inherit;
2700 border-bottom-left-radius: inherit;
2701}
2702
2703.menu > :where(li) > :where(ul) {
2704 border-top-left-radius: inherit;
2705 border-top-right-radius: inherit;
2706 border-bottom-right-radius: inherit;
2707 border-bottom-left-radius: inherit;
2708}
2709
2710.menu > :where(li) > :where(ul) :where(li) {
2711 width: 100%;
2712 white-space: nowrap;
2713}
2714
2715.menu > :where(li) > :where(ul) :where(li) :where(ul) {
2716 padding-left: 1rem;
2717}
2718
2719.menu > :where(li) > :where(ul) :where(li) > :where(:not(ul)) {
2720 width: 100%;
2721 white-space: nowrap;
2722}
2723
2724.menu > :where(li) > :where(ul) > :where(li:first-child) {
2725 border-top-left-radius: inherit;
2726 border-top-right-radius: inherit;
2727 border-bottom-right-radius: unset;
2728 border-bottom-left-radius: unset;
2729}
2730
2731.menu > :where(li) > :where(ul) > :where(li:first-child) > :where(:not(ul)) {
2732 border-top-left-radius: inherit;
2733 border-top-right-radius: inherit;
2734 border-bottom-right-radius: unset;
2735 border-bottom-left-radius: unset;
2736}
2737
2738.menu > :where(li) > :where(ul) > :where(li:last-child) {
2739 border-top-left-radius: unset;
2740 border-top-right-radius: unset;
2741 border-bottom-right-radius: inherit;
2742 border-bottom-left-radius: inherit;
2743}
2744
2745.menu > :where(li) > :where(ul) > :where(li:last-child) > :where(:not(ul)) {
2746 border-top-left-radius: unset;
2747 border-top-right-radius: unset;
2748 border-bottom-right-radius: inherit;
2749 border-bottom-left-radius: inherit;
2750}
2751.mockup-code {
2752 min-width: 18rem;
2753 --tw-bg-opacity: 1;
2754 background-color: hsl(var(--n) / var(--tw-bg-opacity));
2755 padding-top: 1.25rem;
2756 padding-bottom: 1.25rem;
2757 --tw-text-opacity: 1;
2758 color: hsl(var(--nc) / var(--tw-text-opacity));
2759 border-radius: var(--rounded-box, 1rem);
2760}
2761 .mockup-code:before {
2762 content: "";
2763 margin-bottom: 1rem;
2764 display: block;
2765 height: 0.75rem;
2766 width: 0.75rem;
2767 border-radius: 9999px;
2768 opacity: 0.3;
2769 box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
2770 }
2771 .mockup-code pre {
2772 padding-right: 1.25rem;
2773}
2774 .mockup-code pre:before {
2775 content: "";
2776 margin-right: 2ch;
2777 }
2778 .mockup-code pre[data-prefix]:before {
2779 content: attr(data-prefix);
2780 width: 2rem;
2781 opacity: 0.5;
2782 }
2783 .mockup-window {
2784 padding-top: 1.25rem;
2785 border-radius: var(--rounded-box, 1rem);
2786}
2787 .mockup-window:before {
2788 content: "";
2789 margin-bottom: 1rem;
2790 display: block;
2791 height: 0.75rem;
2792 width: 0.75rem;
2793 border-radius: 9999px;
2794 opacity: 0.3;
2795 box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
2796 }
2797 .mockup-phone {
2798 display: inline-block;
2799 border: 4px solid #444;
2800 border-radius: 50px;
2801 background-color: #000;
2802 padding: 10px;
2803 margin: 0 auto;
2804 overflow: hidden;
2805 }
2806 .mockup-phone .camera {
2807 position: relative;
2808 top: 0px;
2809 left: 0px;
2810 background: #000;
2811 height: 25px;
2812 width: 150px;
2813 margin: 0 auto;
2814 border-bottom-left-radius: 17px;
2815 border-bottom-right-radius: 17px;
2816 z-index: 11;
2817 }
2818 .mockup-phone .camera:before {
2819 content: "";
2820 position: absolute;
2821 top: 35%;
2822 left: 50%;
2823 width: 50px;
2824 height: 4px;
2825 border-radius: 5px;
2826 background-color: #0c0b0e;
2827 transform: translate(-50%, -50%);
2828 }
2829 .mockup-phone .camera:after {
2830 content: "";
2831 position: absolute;
2832 top: 20%;
2833 left: 70%;
2834 width: 8px;
2835 height: 8px;
2836 border-radius: 5px;
2837 background-color: #0f0b25;
2838 }
2839 .mockup-phone .display {
2840 overflow: hidden;
2841 border-radius: 40px;
2842 margin-top: -25px;
2843 }
2844.modal {
2845 background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
2846 --tw-bg-opacity: 0.4;
2847 transition-duration: 200ms;
2848 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2849 transition-property: transform, opacity;
2850 overflow-y: hidden;
2851 overscroll-behavior: contain
2852}
2853.modal-box {
2854 --tw-bg-opacity: 1;
2855 background-color: hsl(var(--b1) / var(--tw-bg-opacity));
2856 padding: 1.5rem;
2857 transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
2858 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2859 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
2860 transition-duration: 200ms;
2861 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2862 width: 91.666667%;
2863 max-width: 32rem;
2864 --tw-scale-x: .9;
2865 --tw-scale-y: .9;
2866 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2867 border-top-left-radius: var(--rounded-box, 1rem);
2868 border-top-right-radius: var(--rounded-box, 1rem);
2869 border-bottom-left-radius: var(--rounded-box, 1rem);
2870 border-bottom-right-radius: var(--rounded-box, 1rem);
2871 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
2872 overflow-y: auto;
2873 overscroll-behavior: contain
2874}
2875.modal-open .modal-box,
2876.modal-toggle:checked + .modal .modal-box,
2877.modal:target .modal-box {
2878 --tw-translate-y: 0px;
2879 --tw-scale-x: 1;
2880 --tw-scale-y: 1;
2881 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
2882}
2883.modal-action {
2884 margin-top: 1.5rem;
2885 justify-content: flex-end
2886}
2887.modal-action > :not([hidden]) ~ :not([hidden]) {
2888 --tw-space-x-reverse: 0;
2889 margin-right: calc(0.5rem * var(--tw-space-x-reverse));
2890 margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
2891}
2892.navbar {
2893 padding: var(--navbar-padding, 0.5rem);
2894 min-height: 4rem;
2895 width: 100%;
2896}
2897.progress {
2898 height: 0.5rem;
2899 border-radius: var(--rounded-box, 1rem);
2900}
2901 .progress::-moz-progress-bar {
2902 --tw-bg-opacity: 1;
2903 background-color: hsl(var(--n) / var(--tw-bg-opacity));
2904}
2905 .progress-primary::-moz-progress-bar {
2906 --tw-bg-opacity: 1;
2907 background-color: hsl(var(--p) / var(--tw-bg-opacity));
2908}
2909 .progress-secondary::-moz-progress-bar {
2910 --tw-bg-opacity: 1;
2911 background-color: hsl(var(--s) / var(--tw-bg-opacity));
2912}
2913 .progress-accent::-moz-progress-bar {
2914 --tw-bg-opacity: 1;
2915 background-color: hsl(var(--a) / var(--tw-bg-opacity));
2916}
2917 .progress-info::-moz-progress-bar {
2918 --tw-bg-opacity: 1;
2919 background-color: hsl(var(--in) / var(--tw-bg-opacity));
2920}
2921 .progress-success::-moz-progress-bar {
2922 --tw-bg-opacity: 1;
2923 background-color: hsl(var(--su) / var(--tw-bg-opacity));
2924}
2925 .progress-warning::-moz-progress-bar {
2926 --tw-bg-opacity: 1;
2927 background-color: hsl(var(--wa) / var(--tw-bg-opacity));
2928}
2929 .progress-error::-moz-progress-bar {
2930 --tw-bg-opacity: 1;
2931 background-color: hsl(var(--er) / var(--tw-bg-opacity));
2932}
2933 .progress:indeterminate::after {
2934 --tw-bg-opacity: 1;
2935 background-color: hsl(var(--n) / var(--tw-bg-opacity));
2936}
2937 .progress-primary:indeterminate::after {
2938 --tw-bg-opacity: 1;
2939 background-color: hsl(var(--p) / var(--tw-bg-opacity));
2940}
2941 .progress-secondary:indeterminate::after {
2942 --tw-bg-opacity: 1;
2943 background-color: hsl(var(--s) / var(--tw-bg-opacity));
2944}
2945 .progress-accent:indeterminate::after {
2946 --tw-bg-opacity: 1;
2947 background-color: hsl(var(--a) / var(--tw-bg-opacity));
2948}
2949 .progress-info:indeterminate::after {
2950 --tw-bg-opacity: 1;
2951 background-color: hsl(var(--in) / var(--tw-bg-opacity));
2952}
2953 .progress-success:indeterminate::after {
2954 --tw-bg-opacity: 1;
2955 background-color: hsl(var(--su) / var(--tw-bg-opacity));
2956}
2957 .progress-warning:indeterminate::after {
2958 --tw-bg-opacity: 1;
2959 background-color: hsl(var(--wa) / var(--tw-bg-opacity));
2960}
2961 .progress-error:indeterminate::after {
2962 --tw-bg-opacity: 1;
2963 background-color: hsl(var(--er) / var(--tw-bg-opacity));
2964}
2965 .progress::-webkit-progress-bar {
2966 background-color: hsl(var(--n) / var(--tw-bg-opacity));
2967 --tw-bg-opacity: 0.2;
2968 border-radius: var(--rounded-box, 1rem);
2969}
2970 .progress::-webkit-progress-value {
2971 --tw-bg-opacity: 1;
2972 background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
2973 border-radius: var(--rounded-box, 1rem);
2974}
2975 .progress-primary::-webkit-progress-value {
2976 --tw-bg-opacity: 1;
2977 background-color: hsl(var(--p) / var(--tw-bg-opacity));
2978}
2979 .progress-secondary::-webkit-progress-value {
2980 --tw-bg-opacity: 1;
2981 background-color: hsl(var(--s) / var(--tw-bg-opacity));
2982}
2983 .progress-accent::-webkit-progress-value {
2984 --tw-bg-opacity: 1;
2985 background-color: hsl(var(--a) / var(--tw-bg-opacity));
2986}
2987 .progress-info::-webkit-progress-value {
2988 --tw-bg-opacity: 1;
2989 background-color: hsl(var(--in) / var(--tw-bg-opacity));
2990}
2991 .progress-success::-webkit-progress-value {
2992 --tw-bg-opacity: 1;
2993 background-color: hsl(var(--su) / var(--tw-bg-opacity));
2994}
2995 .progress-warning::-webkit-progress-value {
2996 --tw-bg-opacity: 1;
2997 background-color: hsl(var(--wa) / var(--tw-bg-opacity));
2998}
2999 .progress-error::-webkit-progress-value {
3000 --tw-bg-opacity: 1;
3001 background-color: hsl(var(--er) / var(--tw-bg-opacity));
3002}
3003
3004.progress:indeterminate::after {
3005 content: "";
3006 position: absolute;
3007 top: 0px;
3008 bottom: 0px;
3009 left: -40%;
3010 width: 33.333333%;
3011 border-radius: var(--rounded-box, 1rem);
3012 animation: progress-loading 5s infinite ease-in-out;
3013}
3014
3015@keyframes progress-loading {
3016 50% {
3017 left: 107%;
3018 }
3019}.radial-progress {
3020 --value: 0;
3021 --size: 5rem;
3022 --thickness: calc(var(--size) / 10);
3023}
3024.radial-progress:after {
3025 background-color: currentColor;
3026}
3027.radio {
3028 --chkbg: var(--bc);
3029 height: 1.5rem;
3030 width: 1.5rem;
3031 cursor: pointer;
3032 appearance: none;
3033 border-radius: 9999px;
3034 border-width: 1px;
3035 border-color: hsl(var(--bc) / var(--tw-border-opacity));
3036 --tw-border-opacity: 0.2;
3037 transition: background, box-shadow var(--animation-input, 0.2s) ease-in-out;
3038}
3039 .radio:focus-visible {
3040 outline: 2px solid hsl(var(--bc));
3041 outline-offset: 2px;
3042 }
3043 .radio:checked,
3044 .radio[aria-checked=true] {
3045 --tw-bg-opacity: 1;
3046 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
3047 animation: radiomark var(--animation-input, 0.2s) ease-in-out;
3048 box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset;
3049}
3050 .radio-primary {
3051 --chkbg: var(--p);
3052 --tw-border-opacity: 1;
3053 border-color: hsl(var(--p) / var(--tw-border-opacity));
3054 }
3055 .radio-primary:hover {
3056 --tw-border-opacity: 1;
3057 border-color: hsl(var(--p) / var(--tw-border-opacity));
3058}
3059 .radio-primary:focus-visible {
3060 outline: 2px solid hsl(var(--p));
3061 }
3062 .radio-primary:checked,
3063 .radio-primary[aria-checked=true] {
3064 --tw-border-opacity: 1;
3065 border-color: hsl(var(--p) / var(--tw-border-opacity));
3066 --tw-bg-opacity: 1;
3067 background-color: hsl(var(--p) / var(--tw-bg-opacity));
3068 --tw-text-opacity: 1;
3069 color: hsl(var(--pc) / var(--tw-text-opacity));
3070}
3071 .radio-secondary {
3072 --chkbg: var(--s);
3073 --tw-border-opacity: 1;
3074 border-color: hsl(var(--s) / var(--tw-border-opacity));
3075 }
3076 .radio-secondary:hover {
3077 --tw-border-opacity: 1;
3078 border-color: hsl(var(--s) / var(--tw-border-opacity));
3079}
3080 .radio-secondary:focus-visible {
3081 outline: 2px solid hsl(var(--s));
3082 }
3083 .radio-secondary:checked,
3084 .radio-secondary[aria-checked=true] {
3085 --tw-border-opacity: 1;
3086 border-color: hsl(var(--s) / var(--tw-border-opacity));
3087 --tw-bg-opacity: 1;
3088 background-color: hsl(var(--s) / var(--tw-bg-opacity));
3089 --tw-text-opacity: 1;
3090 color: hsl(var(--sc) / var(--tw-text-opacity));
3091}
3092 .radio-accent {
3093 --chkbg: var(--a);
3094 --tw-border-opacity: 1;
3095 border-color: hsl(var(--a) / var(--tw-border-opacity));
3096 }
3097 .radio-accent:hover {
3098 --tw-border-opacity: 1;
3099 border-color: hsl(var(--a) / var(--tw-border-opacity));
3100}
3101 .radio-accent:focus-visible {
3102 outline: 2px solid hsl(var(--a));
3103 }
3104 .radio-accent:checked,
3105 .radio-accent[aria-checked=true] {
3106 --tw-border-opacity: 1;
3107 border-color: hsl(var(--a) / var(--tw-border-opacity));
3108 --tw-bg-opacity: 1;
3109 background-color: hsl(var(--a) / var(--tw-bg-opacity));
3110 --tw-text-opacity: 1;
3111 color: hsl(var(--ac) / var(--tw-text-opacity));
3112}
3113 .radio:disabled {
3114 cursor: not-allowed;
3115 opacity: 0.2;
3116}
3117
3118@keyframes radiomark {
3119 0% {
3120 box-shadow: 0 0 0 12px hsl(var(--b1)) inset, 0 0 0 12px hsl(var(--b1)) inset;
3121 }
3122 50% {
3123 box-shadow: 0 0 0 3px hsl(var(--b1)) inset, 0 0 0 3px hsl(var(--b1)) inset;
3124 }
3125 100% {
3126 box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset;
3127 }
3128}
3129
3130/* backward comptability */
3131
3132.radio-mark {
3133 display: none;
3134}
3135.range {
3136 -webkit-appearance: none;
3137 --range-shdw: var(--bc);
3138 overflow: hidden;
3139 background-color: transparent;
3140 border-radius: var(--rounded-box, 1rem);
3141}
3142 .range:focus-visible::-webkit-slider-thumb {
3143 --focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
3144 }
3145 .range:focus-visible::-moz-range-thumb {
3146 --focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
3147 }
3148 .range::-webkit-slider-runnable-track {
3149 height: 0.5rem;
3150 width: 100%;
3151 border-radius: var(--rounded-box, 1rem);
3152 background-color: hsla(var(--bc) / 0.1);
3153}
3154 .range::-moz-range-track {
3155 height: 0.5rem;
3156 width: 100%;
3157 border-radius: var(--rounded-box, 1rem);
3158 background-color: hsla(var(--bc) / 0.1);
3159}
3160 .range::-webkit-slider-thumb {
3161 background-color: hsl(var(--b1));
3162 position: relative;
3163 height: 1.5rem;
3164 width: 1.5rem;
3165 border-style: none;
3166 border-radius: var(--rounded-box, 1rem);
3167 -webkit-appearance: none;
3168 top: 50%;
3169 color: hsl(var(--range-shdw));
3170 transform: translateY(-50%);
3171 --filler-size: 100rem;
3172 --filler-offset: 0.6rem;
3173 box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
3174 }
3175 .range::-moz-range-thumb {
3176 background-color: hsl(var(--b1));
3177 position: relative;
3178 height: 1.5rem;
3179 width: 1.5rem;
3180 border-style: none;
3181 border-radius: var(--rounded-box, 1rem);
3182 top: 50%;
3183 color: hsl(var(--range-shdw));
3184 --filler-size: 100rem;
3185 --filler-offset: 0.5rem;
3186 box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0), calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
3187 }
3188 .range-primary {
3189 --range-shdw: var(--p);
3190 }
3191 .range-secondary {
3192 --range-shdw: var(--s);
3193 }
3194 .range-accent {
3195 --range-shdw: var(--a);
3196 }
3197.rating input {
3198 appearance: none;
3199 -webkit-appearance: none;
3200}
3201 .rating :where(input) {
3202 animation: rating-pop var(--animation-input, 0.25s) ease-out;
3203 height: 1.5rem;
3204 width: 1.5rem;
3205 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
3206 --tw-bg-opacity: 1;
3207 }
3208 .rating .rating-hidden {
3209 width: 0.5rem;
3210 background-color: transparent;
3211}
3212 .rating input:checked ~ input,
3213 .rating input[aria-checked=true] ~ input {
3214 --tw-bg-opacity: 0.2;
3215}
3216 .rating input:focus-visible {
3217 transition-property: transform;
3218 transition-duration: 300ms;
3219 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3220 transform: translateY(-0.125em);
3221}
3222 .rating input:active:focus {
3223 animation: none;
3224 transform: translateY(-0.125em);
3225 }
3226.rating-half :where(input:not(.rating-hidden)) {
3227 width: 0.75rem;
3228}
3229@keyframes rating-pop {
3230 0% {
3231 transform: translateY(-0.125em);
3232 }
3233 40% {
3234 transform: translateY(-0.125em);
3235 }
3236 100% {
3237 transform: translateY(0);
3238 }
3239}
3240.select {
3241 border-width: 1px;
3242 border-color: hsl(var(--bc) / var(--tw-border-opacity));
3243 --tw-border-opacity: 0;
3244 --tw-bg-opacity: 1;
3245 background-color: hsl(var(--b1) / var(--tw-bg-opacity));
3246 padding-right: 2.5rem;
3247 font-weight: 600;
3248 transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
3249 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3250 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
3251 transition-duration: 200ms;
3252 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3253 border-radius: var(--rounded-btn, 0.5rem);
3254}
3255 .select-bordered {
3256 --tw-border-opacity: 0.2;
3257}
3258 .select {
3259 background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
3260 background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16px) calc(1px + 50%);
3261 background-size: 4px 4px, 4px 4px;
3262 background-repeat: no-repeat;
3263}
3264 .select:focus {
3265 outline: 2px solid hsla(var(--bc) / 0.2);
3266 outline-offset: 2px;
3267 }
3268 .select-ghost {
3269 --tw-bg-opacity: 0.05;
3270}
3271 .select-ghost:focus {
3272 --tw-bg-opacity: 1;
3273 --tw-text-opacity: 1;
3274 color: hsl(var(--bc) / var(--tw-text-opacity));
3275}
3276 .select-primary {
3277 --tw-border-opacity: 1;
3278 border-color: hsl(var(--p) / var(--tw-border-opacity));
3279}
3280 .select-primary:focus {
3281 outline: 2px solid hsl(var(--p));
3282 }
3283 .select-secondary {
3284 --tw-border-opacity: 1;
3285 border-color: hsl(var(--s) / var(--tw-border-opacity));
3286}
3287 .select-secondary:focus {
3288 outline: 2px solid hsl(var(--s));
3289 }
3290 .select-accent {
3291 --tw-border-opacity: 1;
3292 border-color: hsl(var(--a) / var(--tw-border-opacity));
3293}
3294 .select-accent:focus {
3295 outline: 2px solid hsl(var(--a));
3296 }
3297 .select-info {
3298 --tw-border-opacity: 1;
3299 border-color: hsl(var(--in) / var(--tw-border-opacity));
3300}
3301 .select-info:focus {
3302 outline: 2px solid hsl(var(--in));
3303 }
3304 .select-success {
3305 --tw-border-opacity: 1;
3306 border-color: hsl(var(--su) / var(--tw-border-opacity));
3307}
3308 .select-success:focus {
3309 outline: 2px solid hsl(var(--su));
3310 }
3311 .select-warning {
3312 --tw-border-opacity: 1;
3313 border-color: hsl(var(--wa) / var(--tw-border-opacity));
3314}
3315 .select-warning:focus {
3316 outline: 2px solid hsl(var(--wa));
3317 }
3318 .select-error {
3319 --tw-border-opacity: 1;
3320 border-color: hsl(var(--er) / var(--tw-border-opacity));
3321}
3322 .select-error:focus {
3323 outline: 2px solid hsl(var(--er));
3324 }
3325 .select-disabled,
3326 .select[disabled] {
3327 cursor: not-allowed;
3328 --tw-border-opacity: 1;
3329 border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
3330 --tw-bg-opacity: 1;
3331 background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
3332 --tw-text-opacity: 0.2;
3333}
3334 .select-disabled::placeholder,
3335 .select[disabled]::placeholder {
3336 color: hsl(var(--bc) / var(--tw-placeholder-opacity));
3337 --tw-placeholder-opacity: 0.2;
3338}
3339 .select-multiple,
3340 .select[multiple],
3341 .select[size].select:not([size="1"]) {
3342 background-image: none;
3343 padding-right: 1rem;
3344}
3345.stack {
3346 place-items: center;
3347 align-items: flex-end
3348}
3349 .stack > * {
3350 width: 100%;
3351 opacity: 0.6
3352}
3353 .stack > *:nth-child(2) {
3354 opacity: 0.8
3355}
3356 .stack > *:nth-child(1) {
3357 opacity: 1
3358}
3359.stats {
3360 --tw-bg-opacity: 1;
3361 background-color: hsl(var(--b1) / var(--tw-bg-opacity));
3362 --tw-text-opacity: 1;
3363 color: hsl(var(--bc) / var(--tw-text-opacity));
3364 border-radius: var(--rounded-box, 1rem)
3365}
3366:where(.stats) > :not([hidden]) ~ :not([hidden]) {
3367 --tw-divide-x-reverse: 0;
3368 border-right-width: calc(1px * var(--tw-divide-x-reverse));
3369 border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
3370 --tw-divide-y-reverse: 0;
3371 border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
3372 border-bottom-width: calc(0px * var(--tw-divide-y-reverse))
3373}
3374:where(.stats) {
3375 overflow-x: auto
3376}
3377.stat {
3378 column-gap: 1rem;
3379 border-color: hsl(var(--bc) / var(--tw-border-opacity));
3380 --tw-border-opacity: 0.1;
3381 padding-left: 1.5rem;
3382 padding-right: 1.5rem;
3383 padding-top: 1rem;
3384 padding-bottom: 1rem
3385}
3386.stat-title {
3387 opacity: 0.6
3388}
3389.stat-value {
3390 font-size: 2.25rem;
3391 line-height: 2.5rem;
3392 font-weight: 800
3393}
3394.stat-desc {
3395 font-size: 0.75rem;
3396 line-height: 1rem;
3397 opacity: 0.6
3398}
3399.stat-actions {
3400 margin-top: 1rem
3401}
3402/* .stat + .stat {
3403 @apply border-l border-base-content border-opacity-10;
3404}
3405.stats.grid-flow-row {
3406 .stat + .stat {
3407 @apply border-l-0 border-t;
3408 }
3409} */
3410.steps {
3411 /* &-vertical{
3412 .step {
3413 gap: .5rem;
3414 grid-template-columns: 40px 1fr;
3415 grid-template-rows: auto;
3416 min-height: 4rem;
3417 justify-items: start;
3418 &:before {
3419 @apply w-2 h-full top-0 transform -translate-y-1/2 -translate-x-1/2;
3420 margin-left: 50%;
3421 }
3422 }
3423 } */
3424}
3425 /* &,
3426 &-horizontal{ */
3427 .steps .step {
3428 grid-template-rows: 40px 1fr;
3429 grid-template-columns: auto;
3430 min-width: 4rem;
3431 }
3432 .steps .step:before {
3433 top: 0px;
3434 grid-column-start: 1;
3435 grid-row-start: 1;
3436 height: 0.5rem;
3437 width: 100%;
3438 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3439 --tw-bg-opacity: 1;
3440 background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
3441 --tw-text-opacity: 1;
3442 color: hsl(var(--bc) / var(--tw-text-opacity));
3443 content: "";
3444 margin-left: -100%;
3445}
3446 /* } */
3447 .steps .step:after {
3448 content: counter(step);
3449 counter-increment: step;
3450 z-index: 1;
3451 position: relative;
3452 grid-column-start: 1;
3453 grid-row-start: 1;
3454 display: grid;
3455 height: 2rem;
3456 width: 2rem;
3457 place-items: center;
3458 place-self: center;
3459 border-radius: 9999px;
3460 --tw-bg-opacity: 1;
3461 background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
3462 --tw-text-opacity: 1;
3463 color: hsl(var(--bc) / var(--tw-text-opacity));
3464 }
3465 .steps .step:first-child:before {
3466 content: none;
3467 }
3468 .steps .step[data-content]:after {
3469 content: attr(data-content);
3470 }
3471 .steps .step-neutral + .step-neutral:before,
3472 .steps .step-neutral:after {
3473 --tw-bg-opacity: 1;
3474 background-color: hsl(var(--n) / var(--tw-bg-opacity));
3475 --tw-text-opacity: 1;
3476 color: hsl(var(--nc) / var(--tw-text-opacity));
3477}
3478 .steps .step-primary + .step-primary:before,
3479 .steps .step-primary:after {
3480 --tw-bg-opacity: 1;
3481 background-color: hsl(var(--p) / var(--tw-bg-opacity));
3482 --tw-text-opacity: 1;
3483 color: hsl(var(--pc) / var(--tw-text-opacity));
3484}
3485 .steps .step-secondary + .step-secondary:before,
3486 .steps .step-secondary:after {
3487 --tw-bg-opacity: 1;
3488 background-color: hsl(var(--s) / var(--tw-bg-opacity));
3489 --tw-text-opacity: 1;
3490 color: hsl(var(--sc) / var(--tw-text-opacity));
3491}
3492 .steps .step-accent + .step-accent:before,
3493 .steps .step-accent:after {
3494 --tw-bg-opacity: 1;
3495 background-color: hsl(var(--a) / var(--tw-bg-opacity));
3496 --tw-text-opacity: 1;
3497 color: hsl(var(--ac) / var(--tw-text-opacity));
3498}
3499 .steps .step-info + .step-info:before {
3500 --tw-bg-opacity: 1;
3501 background-color: hsl(var(--in) / var(--tw-bg-opacity));
3502}
3503 .steps .step-info:after {
3504 --tw-bg-opacity: 1;
3505 background-color: hsl(var(--in) / var(--tw-bg-opacity));
3506 --tw-text-opacity: 1;
3507 color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
3508}
3509 .steps .step-success + .step-success:before {
3510 --tw-bg-opacity: 1;
3511 background-color: hsl(var(--su) / var(--tw-bg-opacity));
3512}
3513 .steps .step-success:after {
3514 --tw-bg-opacity: 1;
3515 background-color: hsl(var(--su) / var(--tw-bg-opacity));
3516 --tw-text-opacity: 1;
3517 color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
3518}
3519 .steps .step-warning + .step-warning:before {
3520 --tw-bg-opacity: 1;
3521 background-color: hsl(var(--wa) / var(--tw-bg-opacity));
3522}
3523 .steps .step-warning:after {
3524 --tw-bg-opacity: 1;
3525 background-color: hsl(var(--wa) / var(--tw-bg-opacity));
3526 --tw-text-opacity: 1;
3527 color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
3528}
3529 .steps .step-error + .step-error:before {
3530 --tw-bg-opacity: 1;
3531 background-color: hsl(var(--er) / var(--tw-bg-opacity));
3532}
3533 .steps .step-error:after {
3534 --tw-bg-opacity: 1;
3535 background-color: hsl(var(--er) / var(--tw-bg-opacity));
3536 --tw-text-opacity: 1;
3537 color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
3538}
3539.swap {
3540 cursor: pointer;
3541}
3542
3543.swap > * {
3544 transition-duration: 300ms;
3545 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3546 transition-property: transform, opacity;
3547}
3548
3549.swap-rotate .swap-on,
3550.swap-rotate .swap-indeterminate,
3551.swap-rotate input:indeterminate ~ .swap-on {
3552 --tw-rotate: 45deg;
3553 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3554}
3555
3556.swap-rotate input:checked ~ .swap-off,
3557.swap-rotate.swap-active .swap-off,
3558.swap-rotate input:indeterminate ~ .swap-off {
3559 --tw-rotate: -45deg;
3560 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3561}
3562
3563.swap-rotate input:checked ~ .swap-on,
3564.swap-rotate.swap-active .swap-on,
3565.swap-rotate input:indeterminate ~ .swap-indeterminate {
3566 --tw-rotate: 0deg;
3567 transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3568}
3569
3570.swap-flip {
3571 transform-style: preserve-3d;
3572 perspective: 16em;
3573}
3574
3575.swap-flip .swap-on,
3576.swap-flip .swap-indeterminate,
3577.swap-flip input:indeterminate ~ .swap-on {
3578 transform: rotateY(180deg);
3579 backface-visibility: hidden;
3580 opacity: 1;
3581}
3582
3583.swap-flip input:checked ~ .swap-off,
3584.swap-flip.swap-active .swap-off,
3585.swap-flip input:indeterminate ~ .swap-off {
3586 transform: rotateY(-180deg);
3587 backface-visibility: hidden;
3588 opacity: 1;
3589}
3590
3591.swap-flip input:checked ~ .swap-on,
3592.swap-flip.swap-active .swap-on,
3593.swap-flip input:indeterminate ~ .swap-indeterminate {
3594 transform: rotateY(0deg);
3595}
3596.tab {
3597 --tw-text-opacity: 0.5;
3598}.tab:hover {
3599 --tw-text-opacity: 1;
3600}.tab {
3601 --tab-color: hsla(var(--bc) / var(--tw-text-opacity, 1));
3602 --tab-bg: hsla(var(--b1) / var(--tw-bg-opacity, 1));
3603 --tab-border-color: hsla(var(--b3) / var(--tw-bg-opacity, 1));
3604 color: var(--tab-color);
3605 padding-left: var(--tab-padding, 1rem);
3606 padding-right: var(--tab-padding, 1rem);
3607}
3608 .tab.tab-active {
3609 border-color: hsl(var(--bc) / var(--tw-border-opacity));
3610 --tw-border-opacity: 1;
3611 --tw-text-opacity: 1;
3612}
3613 .tab:focus {
3614 outline: 2px solid transparent;
3615 outline-offset: 2px;
3616}
3617 .tab:focus-visible {
3618 outline: 2px solid currentColor;
3619 outline-offset: -3px;
3620 }
3621 .tab:focus-visible.tab-lifted {
3622 border-bottom-right-radius: var(--tab-radius, 0.5rem);
3623 border-bottom-left-radius: var(--tab-radius, 0.5rem);
3624 }
3625.tab-bordered {
3626 border-color: hsl(var(--bc) / var(--tw-border-opacity));
3627 --tw-border-opacity: 0.2;
3628 border-style: solid;
3629 border-bottom-width: calc(var(--tab-border, 1px) + 1px);
3630}
3631.tab-lifted {
3632 border: var(--tab-border, 1px) solid transparent;
3633 border-width: 0 0 var(--tab-border, 1px) 0;
3634 border-top-left-radius: var(--tab-radius, 0.5rem);
3635 border-top-right-radius: var(--tab-radius, 0.5rem);
3636 border-bottom-color: var(--tab-border-color);
3637 padding-left: var(--tab-padding, 1rem);
3638 padding-right: var(--tab-padding, 1rem);
3639 padding-top: var(--tab-border, 1px);
3640}
3641.tab-lifted.tab-active {
3642 background-color: var(--tab-bg);
3643 border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
3644 border-left-color: var(--tab-border-color);
3645 border-right-color: var(--tab-border-color);
3646 border-top-color: var(--tab-border-color);
3647 padding-left: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
3648 padding-right: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
3649 padding-bottom: var(--tab-border, 1px);
3650 padding-top: 0;
3651 }
3652.tab-lifted.tab-active:before,
3653 .tab-lifted.tab-active:after {
3654 z-index: 1;
3655 content: "";
3656 display: block;
3657 position: absolute;
3658 width: var(--tab-radius, 0.5rem);
3659 height: var(--tab-radius, 0.5rem);
3660 bottom: 0;
3661 --tab-grad: calc(68% - var(--tab-border, 1px));
3662 --tab-corner-bg: radial-gradient(circle at var(--circle-pos), transparent var(--tab-grad), var(--tab-border-color) calc(var(--tab-grad) + 0.3px), var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px));
3663 }
3664.tab-lifted.tab-active:before {
3665 left: calc(var(--tab-radius, 0.5rem) * -1);
3666 --circle-pos: top left;
3667 background-image: var(--tab-corner-bg);
3668 }
3669/* RTL quick fix */
3670[dir="rtl"] .tab-lifted.tab-active:before {
3671 --circle-pos: top right;
3672 }
3673.tab-lifted.tab-active:after {
3674 right: calc(var(--tab-radius, 0.5rem) * -1);
3675 --circle-pos: top right;
3676 background-image: var(--tab-corner-bg);
3677 }
3678/* RTL quick fix */
3679[dir="rtl"] .tab-lifted.tab-active:after {
3680 --circle-pos: top left;
3681 }
3682.tab-lifted.tab-active:first-child:before {
3683 background: none;
3684 }
3685.tab-lifted.tab-active:last-child:after {
3686 background: none;
3687 }
3688.tab-lifted.tab-active + .tab-lifted.tab-active:before {
3689 background: none;
3690 }
3691.tabs-boxed {
3692 --tw-bg-opacity: 1;
3693 background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
3694 padding: 0.25rem;
3695 border-radius: var(--rounded-btn, 0.5rem);
3696}
3697.tabs-boxed .tab-active {
3698 --tw-bg-opacity: 1;
3699 background-color: hsl(var(--p) / var(--tw-bg-opacity));
3700 --tw-text-opacity: 1;
3701 color: hsl(var(--pc) / var(--tw-text-opacity));
3702 border-radius: var(--rounded-btn, 0.5rem);
3703}
3704.tabs-boxed .tab-active:hover {
3705 --tw-text-opacity: 1;
3706 color: hsl(var(--pc) / var(--tw-text-opacity));
3707}
3708.table {
3709 text-align: left
3710}
3711 .table :where(th, td) {
3712 white-space: nowrap;
3713 padding: 1rem;
3714 vertical-align: middle
3715}
3716 .table tr.active th,
3717 .table tr.active td,
3718 .table tr.active:nth-child(even) th,
3719 .table tr.active:nth-child(even) td {
3720 --tw-bg-opacity: 1;
3721 background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity))
3722}
3723 .table tr.hover:hover th,
3724 .table tr.hover:hover td,
3725 .table tr.hover:nth-child(even):hover th,
3726 .table tr.hover:nth-child(even):hover td {
3727 --tw-bg-opacity: 1;
3728 background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity))
3729}
3730 .table:where(:not(.table-zebra)) :where(thead, tbody, tfoot) :where(tr:not(:last-child) :where(th, td)) {
3731 border-bottom-width: 1px;
3732 --tw-border-opacity: 1;
3733 border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity))
3734}
3735 .table :where(thead, tfoot) :where(th, td) {
3736 --tw-bg-opacity: 1;
3737 background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
3738 font-size: 0.75rem;
3739 line-height: 1rem;
3740 font-weight: 700;
3741 text-transform: uppercase
3742}
3743 .table :where(tbody th, tbody td) {
3744 --tw-bg-opacity: 1;
3745 background-color: hsl(var(--b1) / var(--tw-bg-opacity))
3746}
3747 .table-zebra tbody tr:nth-child(even) th,
3748 .table-zebra tbody tr:nth-child(even) td {
3749 --tw-bg-opacity: 1;
3750 background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity))
3751}
3752
3753:where(.table *:first-child) :where(*:first-child) :where(th, td):first-child {
3754 border-top-left-radius: 0.5rem
3755}
3756
3757:where(.table *:first-child) :where(*:first-child) :where(th, td):last-child {
3758 border-top-right-radius: 0.5rem
3759}
3760
3761:where(.table *:last-child) :where(*:last-child) :where(th, td):first-child {
3762 border-bottom-left-radius: 0.5rem
3763}
3764
3765:where(.table *:last-child) :where(*:last-child) :where(th, td):last-child {
3766 border-bottom-right-radius: 0.5rem
3767}.textarea {
3768 border-width: 1px;
3769 border-color: hsl(var(--bc) / var(--tw-border-opacity));
3770 --tw-border-opacity: 0;
3771 --tw-bg-opacity: 1;
3772 background-color: hsl(var(--b1) / var(--tw-bg-opacity));
3773 border-radius: var(--rounded-btn, 0.5rem);
3774}
3775 .textarea-bordered {
3776 --tw-border-opacity: 0.2;
3777}
3778 .textarea:focus {
3779 outline: 2px solid hsla(var(--bc) / 0.2);
3780 outline-offset: 2px;
3781 }
3782 .textarea-ghost {
3783 --tw-bg-opacity: 0.05;
3784}
3785 .textarea-ghost:focus {
3786 --tw-bg-opacity: 1;
3787 --tw-text-opacity: 1;
3788 color: hsl(var(--bc) / var(--tw-text-opacity));
3789 box-shadow: none;
3790}
3791 .textarea-primary {
3792 --tw-border-opacity: 1;
3793 border-color: hsl(var(--p) / var(--tw-border-opacity));
3794}
3795 .textarea-primary:focus {
3796 outline: 2px solid hsl(var(--p));
3797 }
3798 .textarea-secondary {
3799 --tw-border-opacity: 1;
3800 border-color: hsl(var(--s) / var(--tw-border-opacity));
3801}
3802 .textarea-secondary:focus {
3803 outline: 2px solid hsl(var(--s));
3804 }
3805 .textarea-accent {
3806 --tw-border-opacity: 1;
3807 border-color: hsl(var(--a) / var(--tw-border-opacity));
3808}
3809 .textarea-accent:focus {
3810 outline: 2px solid hsl(var(--a));
3811 }
3812 .textarea-info {
3813 --tw-border-opacity: 1;
3814 border-color: hsl(var(--in) / var(--tw-border-opacity));
3815}
3816 .textarea-info:focus {
3817 outline: 2px solid hsl(var(--in));
3818 }
3819 .textarea-success {
3820 --tw-border-opacity: 1;
3821 border-color: hsl(var(--su) / var(--tw-border-opacity));
3822}
3823 .textarea-success:focus {
3824 outline: 2px solid hsl(var(--su));
3825 }
3826 .textarea-warning {
3827 --tw-border-opacity: 1;
3828 border-color: hsl(var(--wa) / var(--tw-border-opacity));
3829}
3830 .textarea-warning:focus {
3831 outline: 2px solid hsl(var(--wa));
3832 }
3833 .textarea-error {
3834 --tw-border-opacity: 1;
3835 border-color: hsl(var(--er) / var(--tw-border-opacity));
3836}
3837 .textarea-error:focus {
3838 outline: 2px solid hsl(var(--er));
3839 }
3840 .textarea-disabled,
3841 .textarea[disabled] {
3842 cursor: not-allowed;
3843 --tw-border-opacity: 1;
3844 border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
3845 --tw-bg-opacity: 1;
3846 background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
3847 --tw-text-opacity: 0.2;
3848}
3849 .textarea-disabled::placeholder,
3850 .textarea[disabled]::placeholder {
3851 color: hsl(var(--bc) / var(--tw-placeholder-opacity));
3852 --tw-placeholder-opacity: 0.2;
3853}
3854.toast{
3855 gap: 0.5rem;
3856 padding: 1rem;
3857}
3858 .toast>*{
3859 animation: toast-pop 0.25s ease-out;
3860 }
3861
3862@keyframes toast-pop {
3863 0% {
3864 transform: scale(0.9);
3865 opacity: 0;
3866 }
3867 100% {
3868 transform: scale(1);
3869 opacity: 1;
3870 }
3871}
3872.toggle {
3873 --chkbg: hsla(var(--bc) / 0.2);
3874 --handleoffset: 1.5rem;
3875 height: 1.5rem;
3876 width: 3rem;
3877 cursor: pointer;
3878 appearance: none;
3879 border-width: 1px;
3880 border-color: hsl(var(--bc) / var(--tw-border-opacity));
3881 --tw-border-opacity: 0.2;
3882 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
3883 --tw-bg-opacity: 0.2;
3884 transition-duration: 300ms;
3885 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3886 border-radius: var(--rounded-badge, 1.9rem);
3887 transition: background, box-shadow var(--animation-input, 0.2s) ease-in-out;
3888 box-shadow: calc(var(--handleoffset) * -1) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset;
3889}
3890 .toggle:focus-visible {
3891 outline: 2px solid hsl(var(--bc));
3892 outline-offset: 2px;
3893 }
3894 .toggle:checked,
3895 .toggle[checked="true"],
3896 .toggle[aria-checked=true] {
3897 --chkbg: hsl(var(--bc));
3898 --tw-border-opacity: 1;
3899 --tw-bg-opacity: 1;
3900 box-shadow: var(--handleoffset) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset;
3901 }
3902 [dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[checked="true"], [dir="rtl"] .toggle[aria-checked=true] {
3903 box-shadow: calc(var(--handleoffset) * 1) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset;
3904 }
3905 .toggle:indeterminate {
3906 --chkbg: hsl(var(--bc));
3907 --tw-border-opacity: 1;
3908 --tw-bg-opacity: 1;
3909 box-shadow: calc(var(--handleoffset) / 2) 0 0 2px hsl(var(--b1)) inset, calc(var(--handleoffset) / -2) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset;
3910 }
3911 [dir="rtl"] .toggle:indeterminate {
3912 box-shadow: calc(var(--handleoffset) / 2) 0 0 2px hsl(var(--b1)) inset, calc(var(--handleoffset) / -2) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset;
3913 }
3914 .toggle-primary:focus-visible {
3915 outline: 2px solid hsl(var(--p));
3916 }
3917 .toggle-primary:checked,
3918 .toggle-primary[checked="true"],
3919 .toggle-primary[aria-checked=true] {
3920 --chkbg: hsl(var(--p));
3921 border-color: hsl(var(--p) / var(--tw-border-opacity));
3922 --tw-border-opacity: 0.1;
3923 --tw-bg-opacity: 1;
3924 background-color: hsl(var(--p) / var(--tw-bg-opacity));
3925 --tw-text-opacity: 1;
3926 color: hsl(var(--pc) / var(--tw-text-opacity));
3927 }
3928 .toggle-secondary:focus-visible {
3929 outline: 2px solid hsl(var(--s));
3930 }
3931 .toggle-secondary:checked,
3932 .toggle-secondary[checked="true"],
3933 .toggle-secondary[aria-checked=true] {
3934 --chkbg: hsl(var(--s));
3935 border-color: hsl(var(--s) / var(--tw-border-opacity));
3936 --tw-border-opacity: 0.1;
3937 --tw-bg-opacity: 1;
3938 background-color: hsl(var(--s) / var(--tw-bg-opacity));
3939 --tw-text-opacity: 1;
3940 color: hsl(var(--sc) / var(--tw-text-opacity));
3941 }
3942 .toggle-accent:focus-visible {
3943 outline: 2px solid hsl(var(--a));
3944 }
3945 .toggle-accent:checked,
3946 .toggle-accent[checked="true"],
3947 .toggle-accent[aria-checked=true] {
3948 --chkbg: hsl(var(--a));
3949 border-color: hsl(var(--a) / var(--tw-border-opacity));
3950 --tw-border-opacity: 0.1;
3951 --tw-bg-opacity: 1;
3952 background-color: hsl(var(--a) / var(--tw-bg-opacity));
3953 --tw-text-opacity: 1;
3954 color: hsl(var(--ac) / var(--tw-text-opacity));
3955 }
3956 .toggle:disabled {
3957 cursor: not-allowed;
3958 border-color: transparent;
3959 background-color: hsl(var(--bc) / var(--tw-bg-opacity));
3960 --tw-bg-opacity: 0.2;
3961}
3962
3963/* backward comptability */
3964
3965.toggle-mark {
3966 display: none;
3967}
3968.tooltip {
3969 position: relative;
3970 display: inline-block;
3971 text-align: center;
3972 --tooltip-tail: 3px;
3973 --tooltip-color: hsl(var(--n));
3974 --tooltip-text-color: hsl(var(--nc));
3975 --tooltip-tail-offset: calc(100% + 1px - var(--tooltip-tail));
3976}
3977.tooltip:before,
3978.tooltip:after {
3979 opacity: 0;
3980 transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
3981 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3982 transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
3983 transition-delay: 100ms;
3984 transition-duration: 200ms;
3985 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3986}
3987.tooltip:after {
3988 position: absolute;
3989}
3990.tooltip:before {
3991 max-width: 20rem;
3992 border-radius: 0.25rem;
3993 padding-left: 0.5rem;
3994 padding-right: 0.5rem;
3995 padding-top: 0.25rem;
3996 padding-bottom: 0.25rem;
3997 font-size: 0.875rem;
3998 line-height: 1.25rem;
3999 background-color: var(--tooltip-color);
4000 color: var(--tooltip-text-color);
4001 width: max-content;
4002}
4003.tooltip.tooltip-open:before,
4004.tooltip.tooltip-open:after,
4005.tooltip:hover:before,
4006.tooltip:hover:after {
4007 opacity: 1;
4008 transition-delay: 75ms;
4009}
4010.tooltip:after {
4011 content: "";
4012 border-style: solid;
4013 border-width: var(--tooltip-tail, 0);
4014 width: 0;
4015 height: 0;
4016 display: block;
4017 position: absolute;
4018 transform: translateX(-50%);
4019 border-color: var(--tooltip-color) transparent transparent transparent;
4020 top: auto;
4021 left: 50%;
4022 right: auto;
4023 bottom: var(--tooltip-tail-offset);
4024}
4025.tooltip-bottom:after {
4026 transform: translateX(-50%);
4027 border-color: transparent transparent var(--tooltip-color) transparent;
4028 top: var(--tooltip-tail-offset);
4029 left: 50%;
4030 right: auto;
4031 bottom: auto;
4032 }
4033.tooltip-left:after {
4034 transform: translateY(-50%);
4035 border-color: transparent transparent transparent var(--tooltip-color);
4036 top: 50%;
4037 left: auto;
4038 right: calc(var(--tooltip-tail-offset) + 1px);
4039 bottom: auto;
4040 }
4041.tooltip-right:after {
4042 transform: translateY(-50%);
4043 border-color: transparent var(--tooltip-color) transparent transparent;
4044 top: 50%;
4045 left: calc(var(--tooltip-tail-offset) + 1px);
4046 right: auto;
4047 bottom: auto;
4048 }
4049.tooltip-primary {
4050 --tooltip-color: hsl(var(--p));
4051 --tooltip-text-color: hsl(var(--pc));
4052 }
4053.tooltip-secondary {
4054 --tooltip-color: hsl(var(--s));
4055 --tooltip-text-color: hsl(var(--sc));
4056 }
4057.tooltip-accent {
4058 --tooltip-color: hsl(var(--a));
4059 --tooltip-text-color: hsl(var(--ac));
4060 }
4061.tooltip-info {
4062 --tooltip-color: hsla(var(--in));
4063 --tooltip-text-color: hsl(var(--inc));
4064 }
4065.tooltip-success {
4066 --tooltip-color: hsla(var(--su));
4067 --tooltip-text-color: hsl(var(--suc));
4068 }
4069.tooltip-warning {
4070 --tooltip-color: hsla(var(--wa));
4071 --tooltip-text-color: hsl(var(--wac));
4072 }
4073.tooltip-error {
4074 --tooltip-color: hsla(var(--er));
4075 --tooltip-text-color: hsl(var(--erc));
4076 }
4077:root .prose{
4078 --tw-prose-body: hsla(var(--bc)/.8);
4079 --tw-prose-headings: hsl(var(--bc));
4080 --tw-prose-lead: hsl(var(--bc));
4081 --tw-prose-links: hsl(var(--bc));
4082 --tw-prose-bold: hsl(var(--bc));
4083 --tw-prose-counters: hsl(var(--bc));
4084 --tw-prose-bullets: hsla(var(--bc)/.5);
4085 --tw-prose-hr: hsla(var(--bc)/.2);
4086 --tw-prose-quotes: hsl(var(--bc));
4087 --tw-prose-quote-borders: hsla(var(--bc)/.2);
4088 --tw-prose-captions: hsla(var(--bc)/.5);
4089 --tw-prose-code: hsl(var(--bc));
4090 --tw-prose-pre-code: hsl(var(--nc));
4091 --tw-prose-pre-bg: hsl(var(--n));
4092 --tw-prose-th-borders: hsla(var(--bc)/.5);
4093 --tw-prose-td-borders: hsla(var(--bc)/.2);
4094}
4095.prose :where(code):not(:where([class~="not-prose"] *)){
4096 padding: 2px 8px;
4097 border-radius: var(--rounded-badge);
4098 }
4099.prose code:after,
4100 .prose code:before{
4101 content: none;
4102 }
4103.prose pre code{
4104 border-radius: 0;
4105 padding: 0;
4106 }
4107.prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)){
4108 border-bottom-color: hsl(var(--bc) / 20%);
4109 }