@bgord/design 0.29.0 → 0.29.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.css +78 -0
- package/dist/main.min.css +1 -1
- package/dist/main.min.css.br +0 -0
- package/dist/main.min.css.gz +0 -0
- package/package.json +2 -2
- package/readme.md +98 -0
- package/src/animations/grow-fade-in.css +19 -0
- package/src/animations/shrink-fade-out.css +15 -0
- package/src/generate-css.ts +7 -0
- package/src/interactions/grow.css +7 -0
- package/src/interactions/rotate-into-focus.css +26 -0
- package/src/interactions/subtle-scale.css +11 -0
- package/README.md +0 -518
package/dist/main.css
CHANGED
|
@@ -525,6 +525,84 @@ ul > *:not(li):after {
|
|
|
525
525
|
inset: 0;
|
|
526
526
|
content: "Rule #5 violation (invalid-list-element)";
|
|
527
527
|
}
|
|
528
|
+
/* grow interaction */
|
|
529
|
+
|
|
530
|
+
[data-interaction="grow"] {
|
|
531
|
+
transition: width 300ms ease-in-out;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
/* ===================== */
|
|
535
|
+
/* rotate-into-focus interaction */
|
|
536
|
+
|
|
537
|
+
[data-interaction="rotate-into-focus"] {
|
|
538
|
+
transition:
|
|
539
|
+
transform 0.2s ease-in-out,
|
|
540
|
+
box-shadow 0.2s ease-in-out;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
[data-interaction="rotate-into-focus"]:hover {
|
|
544
|
+
transform: scale(1.05);
|
|
545
|
+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
[data-interaction="rotate-into-focus"]:active {
|
|
549
|
+
transform: scale(1.05);
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
[data-interaction="rotate-into-focus"] > * {
|
|
553
|
+
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
[data-interaction="rotate-into-focus"]:hover > * {
|
|
557
|
+
transform: rotate(90deg);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
/* ===================== */
|
|
561
|
+
/* subtle-scale interaction */
|
|
562
|
+
|
|
563
|
+
[data-interaction="subtle-scale"] {
|
|
564
|
+
transition: transform 0.3s ease-in-out;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
[data-interaction="subtle-scale"]:hover {
|
|
568
|
+
transform: scale(1.25);
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
/* ===================== */
|
|
572
|
+
/* shrink-fade-out animation */
|
|
573
|
+
|
|
574
|
+
@keyframes shrink-fade-out {
|
|
575
|
+
/* 140 ms → fade + scale */
|
|
576
|
+
to {
|
|
577
|
+
opacity: 0;
|
|
578
|
+
scale: 0.9;
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
[data-exit="shrink-fade-out"] {
|
|
583
|
+
animation: shrink-fade-out 140ms ease forwards;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
/* ===================== */
|
|
587
|
+
/* grow-fade-in animation */
|
|
588
|
+
|
|
589
|
+
@keyframes grow-fade-in {
|
|
590
|
+
from {
|
|
591
|
+
opacity: 0.5;
|
|
592
|
+
scale: 0.9;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
to {
|
|
596
|
+
opacity: 1;
|
|
597
|
+
scale: 1;
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
[data-exit="grow-fade-in"] {
|
|
602
|
+
animation: grow-fade-in 140ms ease forwards;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
/* ===================== */
|
|
528
606
|
/* Z indexes */
|
|
529
607
|
|
|
530
608
|
*[data-z='0'] {
|
package/dist/main.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.c-button{height:36px;text-transform:uppercase;-webkit-user-select:none;user-select:none;white-space:nowrap;touch-action:manipulation;transition:border-radius .3s,opacity .4s}.c-button[data-variant=bare],.c-button[data-variant=primary],.c-button[data-variant=secondary],.c-button[data-variant=with-icon]{font-size:12px;font-weight:600;letter-spacing:.5px;border-radius:4px;border:2px solid transparent;background-color:transparent}.c-button:active,.c-button:focus,.c-button:hover{cursor:pointer;opacity:.75;border-radius:0;transition:border-radius .3s,opacity .4s}.c-button:active{border:2px solid transparent!important}.c-button:disabled{opacity:.5;transition:opacity .3s}.c-button:disabled:hover{cursor:auto;border-radius:4px}.c-button[data-variant=primary]{padding:0 8px;background-color:#374151;color:#e5e7eb;letter-spacing:.75px}.c-button[data-variant=secondary]{padding:0 8px;background-color:#d1d5db;color:#1f2937;letter-spacing:.5px}.c-button[data-variant=bare],.c-button[data-variant=with-icon]{background-color:transparent;color:#1f2937;letter-spacing:.5px}.c-button[data-variant=with-icon]{display:flex;justify-content:center;align-items:center}.c-input{height:36px;font-size:12px;line-height:24px;color:#374151;padding:0 0 0 6px;background:#fff;border:1px solid #d1d5db;border-radius:4px;outline:0;appearance:none;transition:border-radius .3s,border-color .4s}.c-input:active,.c-input:focus,.c-input:hover{border-color:#9ca3af;border-radius:0;transition:border-radius .3s,border-color .4s}.c-input:disabled{opacity:.75;background:#f3f4f6;border-color:#d1d5db}.c-button:disabled:hover{border-radius:4px}.c-input:placeholder-shown{color:#4b5563}.c-input:invalid:not(:placeholder-shown){border-color:#b31940}.c-label{line-height:24px;font-size:12px;text-transform:uppercase;font-weight:500;letter-spacing:.5px;color:#4b5563}.c-label[data-variant=optional]::after{margin-left:6px;text-transform:lowercase;content:"(optional)"}.c-link{text-underline-offset:4px;letter-spacing:.5px}.c-link:hover{opacity:.75;transition:opacity .3s}.c-link[data-variant=bare]{-webkit-text-decoration:none;text-decoration:none}@supports (appearance:none){.c-select{appearance:none;line-height:24px;margin:0;padding:0 24px 0 6px;height:36px;font-size:12px;background:#fff;border:1px solid #d1d5db;color:#374151;text-overflow:ellipsis;outline:0}.c-select:focus,.c-select:hover{cursor:pointer;border:1px solid #9ca3af}.c-select-wrapper{position:relative}.c-select-wrapper::after{position:absolute;content:"";top:12px;right:8px;height:8px;width:8px;border:2px solid #1f2937;border-left:none;border-top:none;transform:rotate(45deg)}.c-select:disabled{opacity:.5}.c-select:disabled:hover{cursor:auto;border:1px solid #d1d5db}}@media not all and (min-resolution:0.001dpcm){.c-select{font-size:16px}}@supports (appearance:none){.c-checkbox{position:relative;appearance:none;outline:0;min-height:24px;min-width:24px;background:#fff;border:1px solid #d1d5db}.c-checkbox:checked,.c-checkbox:hover{border-color:#9ca3af;cursor:pointer;transition:border-color .4s}.c-checkbox:checked:hover{border-color:#d1d5db;cursor:pointer;transition:border-color .4s}.c-checkbox:focus{border:2px solid #4b5563}.c-checkbox:checked::after,.c-checkbox:hover::after{position:absolute;content:"";top:6px;left:6px;height:6px;width:10px;border:2px solid #374151;border-top:0;border-right:0;transform:rotate(-45deg)}.c-checkbox:hover::after{border-color:#9ca3af}}.c-textarea{font-size:12px;line-height:16px;color:#374151;padding:2px 6px 6px 6px;background:#fff;border:1px solid #d1d5db;border-radius:4px;outline:0;appearance:none;resize:none;transition:border-radius .3s,border-color .4s}.c-textarea:active,.c-textarea:focus,.c-textarea:hover{border-color:#9ca3af;border-radius:0;transition:border-radius .3s,border-color .4s}.c-textarea:disabled{opacity:.75;background:#e5e7eb;border-color:#d1d5db}.c-textarea:placeholder-shown{color:#4b5563}.c-textarea:invalid:not(:placeholder-shown){border-color:#b31940}.c-range{appearance:none;height:8px;border-radius:8px}.c-range::-moz-range-thumb{appearance:none;box-shadow:none;border:none;border-radius:50%;height:14px;width:14px}.c-range::-ms-thumb{appearance:none;box-shadow:none;border:none;border-radius:50%;height:14px;width:14px}.c-range::-webkit-slider-thumb{appearance:none;box-shadow:none;border:none;border-radius:50%;height:14px;width:14px;margin-top:0}.c-range::-moz-range-track{appearance:none;box-shadow:none;border:none}.c-range::-webkit-slider-runnable-track{appearance:none;box-shadow:none;border:none}.c-range::-ms-track{appearance:none;box-shadow:none;border:none}.c-range[data-variant=primary]{background:#e5e7eb}.c-range[data-variant=primary]::-moz-range-thumb{background:#4b5563}.c-range[data-variant=primary]::-webkit-slider-thumb{background:#4b5563}.c-range[data-variant=primary]::-ms-thumb{background:#4b5563}.c-range[data-variant=primary]{background:linear-gradient(to right,#4b5563 var(--percentage),#e5e7eb var(--percentage))}.c-badge{padding:0 6px;font-size:12px;font-weight:700;letter-spacing:.5px;text-align:center;text-transform:uppercase;background-color:#e5e7eb;border-radius:4px;color:#4b5563}.c-badge:hover{opacity:.9;transition:opacity .3s}.c-file-explorer{overflow:hidden;position:absolute;z-index:-1;width:.1px;height:.1px;opacity:0}.c-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.c-switch-checkbox:checked+.c-switch-label{background-color:#48ac39}.c-switch-checkbox:not(:checked)+.c-switch-label{background-color:#d1d5db}.c-switch-checkbox:active+.c-switch-label{outline:1px dotted black}.c-switch-checkbox:focus+.c-switch-label{outline:1px dotted black}.c-switch-label{display:inline-block;width:48px;height:24px;border-radius:15px;position:relative;cursor:pointer;transition:background-color .2s ease-in-out}.c-switch-slider{position:absolute;top:4px;left:4px;width:16px;height:16px;background-color:#fff;border-radius:50%;transition:transform .3s ease-in-out}.c-switch-checkbox:checked+.c-switch-label .c-switch-slider{transform:translateX(24px)}[data-transform=truncate]:not([title]){position:relative}[data-transform=truncate]:not([title]):after{background:red;position:absolute;inset:0;content:"Rule #1 violation (title-truncate)"}[data-transform=line-clamp]:not([title]){position:relative}[data-transform=line-clamp]:not([title]):after{background:red;position:absolute;inset:0;content:"Rule #1 violation (title-truncate)"}[target="_blank"]:not([rel]){position:relative}[target="_blank"]:not([rel]):after{background:red;position:absolute;inset:0;content:"Rule #2 violation (target-blank-referer)"}img:not([alt]){border:2px solid red;content:"Rule #3 violation (image-alt)"}button:not([title])>svg{border:2px solid red!important;content:"Rule #4 violation (button-icon-title)"}ul>:not(li){position:relative}ul>:not(li):after{background:red;position:absolute;inset:0;content:"Rule #5 violation (invalid-list-element)"}[data-z='0']{z-index:0}[data-z='1']{z-index:1}[data-z='2']{z-index:2}[data-z='3']{z-index:3}[data-z='-1']{z-index:-1}[data-width='100%']{width:100%}[data-width=auto]{width:auto}[data-width=unset]{width:unset}@media (max-width:768px){[data-md-width='100%']{width:100%}[data-md-width=auto]{width:auto}[data-md-width=unset]{width:unset}}[data-transform~=uppercase]{text-transform:uppercase}[data-transform~=lowercase]{text-transform:lowercase}[data-transform~=capitalize]{text-transform:capitalize}[data-transform~=upper-first]:first-letter{text-transform:uppercase}[data-transform~=truncate]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}[data-transform~=center]{text-align:center}[data-transform~=nowrap]{white-space:nowrap}[data-transform~=none]{text-transform:none}[data-transform~=line-clamp]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,2);overflow:hidden}[data-shadow=sm]{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}[data-shadow=md]{box-shadow:0 4px 6px 0 rgba(0,0,0,.08)}[data-shadow=lg]{box-shadow:0 8px 12px 2px rgba(0,0,0,.06)}[data-rotate='0']{transform:rotate(0)}[data-rotate='90']{transform:rotate(90deg)}[data-rotate='180']{transform:rotate(180deg)}[data-rotate='270']{transform:rotate(270deg)}@media (max-width:768px){[data-md-rotate='0']{transform:rotate(0)}[data-md-rotate='90']{transform:rotate(90deg)}[data-md-rotate='180']{transform:rotate(180deg)}[data-md-rotate='270']{transform:rotate(270deg)}}[data-position=static]{position:static}[data-position=relative]{position:relative}[data-position=absolute]{position:absolute}[data-position=fixed]{position:fixed}[data-position=sticky]{position:sticky}[data-position=unset]{position:unset}@media (max-width:768px){[data-md-position=static]{position:static}[data-md-position=relative]{position:relative}[data-md-position=absolute]{position:absolute}[data-md-position=fixed]{position:fixed}[data-md-position=sticky]{position:sticky}[data-md-position=unset]{position:unset}}[data-top='0']{top:0}[data-right='0']{right:0}[data-bottom='0']{bottom:0}[data-left='0']{left:0}[data-inset='0']{inset:0}[data-top='3']{top:3px}[data-right='3']{right:3px}[data-bottom='3']{bottom:3px}[data-left='3']{left:3px}[data-inset='3']{inset:3px}[data-top='6']{top:6px}[data-right='6']{right:6px}[data-bottom='6']{bottom:6px}[data-left='6']{left:6px}[data-inset='6']{inset:6px}[data-top='12']{top:12px}[data-right='12']{right:12px}[data-bottom='12']{bottom:12px}[data-left='12']{left:12px}[data-inset='12']{inset:12px}[data-top='24']{top:24px}[data-right='24']{right:24px}[data-bottom='24']{bottom:24px}[data-left='24']{left:24px}[data-inset='24']{inset:24px}[data-top='36']{top:36px}[data-right='36']{right:36px}[data-bottom='36']{bottom:36px}[data-left='36']{left:36px}[data-inset='36']{inset:36px}[data-top='48']{top:48px}[data-right='48']{right:48px}[data-bottom='48']{bottom:48px}[data-left='48']{left:48px}[data-inset='48']{inset:48px}[data-top='72']{top:72px}[data-right='72']{right:72px}[data-bottom='72']{bottom:72px}[data-left='72']{left:72px}[data-inset='72']{inset:72px}[data-top=auto]{top:auto}[data-right=auto]{right:auto}[data-bottom=auto]{bottom:auto}[data-left=auto]{left:auto}[data-inset=auto]{inset:auto}[data-top=unset]{top:unset}[data-right=unset]{right:unset}[data-bottom=unset]{bottom:unset}[data-left=unset]{left:unset}[data-inset=unset]{inset:unset}@media (max-width:768px){[data-md-top='0']{top:0}[data-md-right='0']{right:0}[data-md-bottom='0']{bottom:0}[data-md-left='0']{left:0}[data-md-inset='0']{inset:0}[data-md-top='3']{top:3px}[data-md-right='3']{right:3px}[data-md-bottom='3']{bottom:3px}[data-md-left='3']{left:3px}[data-md-inset='3']{inset:3px}[data-md-top='6']{top:6px}[data-md-right='6']{right:6px}[data-md-bottom='6']{bottom:6px}[data-md-left='6']{left:6px}[data-md-inset='6']{inset:6px}[data-md-top='12']{top:12px}[data-md-right='12']{right:12px}[data-md-bottom='12']{bottom:12px}[data-md-left='12']{left:12px}[data-md-inset='12']{inset:12px}[data-md-top='24']{top:24px}[data-md-right='24']{right:24px}[data-md-bottom='24']{bottom:24px}[data-md-left='24']{left:24px}[data-md-inset='24']{inset:24px}[data-md-top='36']{top:36px}[data-md-right='36']{right:36px}[data-md-bottom='36']{bottom:36px}[data-md-left='36']{left:36px}[data-md-inset='36']{inset:36px}[data-md-top='48']{top:48px}[data-md-right='48']{right:48px}[data-md-bottom='48']{bottom:48px}[data-md-left='48']{left:48px}[data-md-inset='48']{inset:48px}[data-md-top='72']{top:72px}[data-md-right='72']{right:72px}[data-md-bottom='72']{bottom:72px}[data-md-left='72']{left:72px}[data-md-inset='72']{inset:72px}[data-md-top=auto]{top:auto}[data-md-right=auto]{right:auto}[data-md-bottom=auto]{bottom:auto}[data-md-left=auto]{left:auto}[data-md-inset=auto]{inset:auto}[data-md-top=unset]{top:unset}[data-md-right=unset]{right:unset}[data-md-bottom=unset]{bottom:unset}[data-md-left=unset]{left:unset}[data-md-inset=unset]{inset:unset}}[data-pointer-events=none]{pointer-events:none}[data-pointer-events=auto]{pointer-events:auto}@media (max-width:768px){[data-md-pointer-events=none]{pointer-events:none}[data-md-pointer-events=auto]{pointer-events:auto}}[data-p='0']{padding:0}[data-p='3']{padding:3px}[data-p='6']{padding:6px}[data-p='12']{padding:12px}[data-p='24']{padding:24px}[data-p='36']{padding:36px}[data-p='48']{padding:48px}[data-p='72']{padding:72px}[data-p=auto]{padding:auto}[data-p=unset]{padding:unset}[data-px='0']{padding-left:0;padding-right:0}[data-px='3']{padding-left:3px;padding-right:3px}[data-px='6']{padding-left:6px;padding-right:6px}[data-px='12']{padding-left:12px;padding-right:12px}[data-px='24']{padding-left:24px;padding-right:24px}[data-px='36']{padding-left:36px;padding-right:36px}[data-px='48']{padding-left:48px;padding-right:48px}[data-px='72']{padding-left:72px;padding-right:72px}[data-px=auto]{padding-left:auto;padding-right:auto}[data-px=unset]{padding-left:unset;padding-right:unset}[data-py='0']{padding-top:0;padding-bottom:0}[data-py='3']{padding-top:3px;padding-bottom:3px}[data-py='6']{padding-top:6px;padding-bottom:6px}[data-py='12']{padding-top:12px;padding-bottom:12px}[data-py='24']{padding-top:24px;padding-bottom:24px}[data-py='36']{padding-top:36px;padding-bottom:36px}[data-py='48']{padding-top:48px;padding-bottom:48px}[data-py='72']{padding-top:72px;padding-bottom:72px}[data-py=auto]{padding-top:auto;padding-bottom:auto}[data-py=unset]{padding-top:unset;padding-bottom:unset}[data-pt='0']{padding-top:0}[data-pt='3']{padding-top:3px}[data-pt='6']{padding-top:6px}[data-pt='12']{padding-top:12px}[data-pt='24']{padding-top:24px}[data-pt='36']{padding-top:36px}[data-pt='48']{padding-top:48px}[data-pt='72']{padding-top:72px}[data-pt=auto]{padding-top:auto}[data-pt=unset]{padding-top:unset}[data-pr='0']{padding-right:0}[data-pr='3']{padding-right:3px}[data-pr='6']{padding-right:6px}[data-pr='12']{padding-right:12px}[data-pr='24']{padding-right:24px}[data-pr='36']{padding-right:36px}[data-pr='48']{padding-right:48px}[data-pr='72']{padding-right:72px}[data-pr=auto]{padding-right:auto}[data-pr=unset]{padding-right:unset}[data-pb='0']{padding-bottom:0}[data-pb='3']{padding-bottom:3px}[data-pb='6']{padding-bottom:6px}[data-pb='12']{padding-bottom:12px}[data-pb='24']{padding-bottom:24px}[data-pb='36']{padding-bottom:36px}[data-pb='48']{padding-bottom:48px}[data-pb='72']{padding-bottom:72px}[data-pb=auto]{padding-bottom:auto}[data-pb=unset]{padding-bottom:unset}[data-pl='0']{padding-left:0}[data-pl='3']{padding-left:3px}[data-pl='6']{padding-left:6px}[data-pl='12']{padding-left:12px}[data-pl='24']{padding-left:24px}[data-pl='36']{padding-left:36px}[data-pl='48']{padding-left:48px}[data-pl='72']{padding-left:72px}[data-pl=auto]{padding-left:auto}[data-pl=unset]{padding-left:unset}@media (max-width:768px){[data-md-p='0']{padding:0}[data-md-p='3']{padding:3px}[data-md-p='6']{padding:6px}[data-md-p='12']{padding:12px}[data-md-p='24']{padding:24px}[data-md-p='36']{padding:36px}[data-md-p='48']{padding:48px}[data-md-p='72']{padding:72px}[data-md-p=auto]{padding:auto}[data-md-p=unset]{padding:unset}[data-md-px='0']{padding-left:0;padding-right:0}[data-md-px='3']{padding-left:3px;padding-right:3px}[data-md-px='6']{padding-left:6px;padding-right:6px}[data-md-px='12']{padding-left:12px;padding-right:12px}[data-md-px='24']{padding-left:24px;padding-right:24px}[data-md-px='36']{padding-left:36px;padding-right:36px}[data-md-px='48']{padding-left:48px;padding-right:48px}[data-md-px='72']{padding-left:72px;padding-right:72px}[data-md-px=auto]{padding-left:auto;padding-right:auto}[data-md-px=unset]{padding-left:unset;padding-right:unset}[data-md-py='0']{padding-top:0;padding-bottom:0}[data-md-py='3']{padding-top:3px;padding-bottom:3px}[data-md-py='6']{padding-top:6px;padding-bottom:6px}[data-md-py='12']{padding-top:12px;padding-bottom:12px}[data-md-py='24']{padding-top:24px;padding-bottom:24px}[data-md-py='36']{padding-top:36px;padding-bottom:36px}[data-md-py='48']{padding-top:48px;padding-bottom:48px}[data-md-py='72']{padding-top:72px;padding-bottom:72px}[data-md-py=auto]{padding-top:auto;padding-bottom:auto}[data-md-py=unset]{padding-top:unset;padding-bottom:unset}[data-md-pt='0']{padding-top:0}[data-md-pt='3']{padding-top:3px}[data-md-pt='6']{padding-top:6px}[data-md-pt='12']{padding-top:12px}[data-md-pt='24']{padding-top:24px}[data-md-pt='36']{padding-top:36px}[data-md-pt='48']{padding-top:48px}[data-md-pt='72']{padding-top:72px}[data-md-pt=auto]{padding-top:auto}[data-md-pt=unset]{padding-top:unset}[data-md-pr='0']{padding-right:0}[data-md-pr='3']{padding-right:3px}[data-md-pr='6']{padding-right:6px}[data-md-pr='12']{padding-right:12px}[data-md-pr='24']{padding-right:24px}[data-md-pr='36']{padding-right:36px}[data-md-pr='48']{padding-right:48px}[data-md-pr='72']{padding-right:72px}[data-md-pr=auto]{padding-right:auto}[data-md-pr=unset]{padding-right:unset}[data-md-pb='0']{padding-bottom:0}[data-md-pb='3']{padding-bottom:3px}[data-md-pb='6']{padding-bottom:6px}[data-md-pb='12']{padding-bottom:12px}[data-md-pb='24']{padding-bottom:24px}[data-md-pb='36']{padding-bottom:36px}[data-md-pb='48']{padding-bottom:48px}[data-md-pb='72']{padding-bottom:72px}[data-md-pb=auto]{padding-bottom:auto}[data-md-pb=unset]{padding-bottom:unset}[data-md-pl='0']{padding-left:0}[data-md-pl='3']{padding-left:3px}[data-md-pl='6']{padding-left:6px}[data-md-pl='12']{padding-left:12px}[data-md-pl='24']{padding-left:24px}[data-md-pl='36']{padding-left:36px}[data-md-pl='48']{padding-left:48px}[data-md-pl='72']{padding-left:72px}[data-md-pl=auto]{padding-left:auto}[data-md-pl=unset]{padding-left:unset}}[data-overflow=auto]{overflow:auto}[data-overflow=scroll]{overflow:scroll}[data-overflow=hidden]{overflow:hidden}[data-object-position=top]{object-position:top}[data-object-position=bottom]{object-position:bottom}[data-object-position=left]{object-position:left}[data-object-position=right]{object-position:right}[data-object-position=center]{object-position:center}[data-object-position=top-left]{object-position:top left}[data-object-position=top-right]{object-position:top right}@media (max-width:768px){[data-md-object-position=top]{object-position:top}[data-md-object-position=bottom]{object-position:bottom}[data-md-object-position=left]{object-position:left}[data-md-object-position=right]{object-position:right}[data-md-object-position=center]{object-position:center}[data-md-object-position=top-left]{object-position:top left}[data-md-object-position=top-right]{object-position:top right}}[data-object-fit=contain]{object-fit:contain}[data-object-fit=cover]{object-fit:cover}[data-object-fit=fill]{object-fit:fill}[data-object-fit=scale-down]{object-fit:scale-down}[data-object-fit=none]{object-fit:none}@media (max-width:768px){[data-md-object-fit=contain]{object-fit:contain}[data-md-object-fit=cover]{object-fit:cover}[data-md-object-fit=fill]{object-fit:fill}[data-md-object-fit=scale-down]{object-fit:scale-down}[data-md-object-fit=none]{object-fit:none}}[data-max-width='320']{max-width:320px}[data-max-width='528']{max-width:528px}[data-max-width='768']{max-width:768px}[data-max-width='1296']{max-width:1296px}[data-max-width='100%']{max-width:100%}[data-max-width=unset]{max-width:unset}@media (max-width:768px){[data-md-max-width='320']{max-width:320px}[data-md-max-width='528']{max-width:528px}[data-md-max-width='768']{max-width:768px}[data-md-max-width='1296']{max-width:1296px}[data-md-max-width='100%']{max-width:100%}[data-md-max-width=unset]{max-width:unset}}[data-max-height='100%']{max-height:100%}[data-max-height=unset]{max-height:unset}@media (max-width:768px){[data-md-max-height='100%']{max-height:100%}[data-md-max-height=unset]{max-height:unset}}[data-m='0']{margin:0}[data-m='3']{margin:3px}[data-m='6']{margin:6px}[data-m='12']{margin:12px}[data-m='24']{margin:24px}[data-m='36']{margin:36px}[data-m='48']{margin:48px}[data-m='72']{margin:72px}[data-m=auto]{margin:auto}[data-m=unset]{margin:unset}[data-mx='0']{margin-left:0;margin-right:0}[data-mx='3']{margin-left:3px;margin-right:3px}[data-mx='6']{margin-left:6px;margin-right:6px}[data-mx='12']{margin-left:12px;margin-right:12px}[data-mx='24']{margin-left:24px;margin-right:24px}[data-mx='36']{margin-left:36px;margin-right:36px}[data-mx='48']{margin-left:48px;margin-right:48px}[data-mx='72']{margin-left:72px;margin-right:72px}[data-mx=auto]{margin-left:auto;margin-right:auto}[data-mx=unset]{margin-left:unset;margin-right:unset}[data-my='0']{margin-top:0;margin-bottom:0}[data-my='3']{margin-top:3px;margin-bottom:3px}[data-my='6']{margin-top:6px;margin-bottom:6px}[data-my='12']{margin-top:12px;margin-bottom:12px}[data-my='24']{margin-top:24px;margin-bottom:24px}[data-my='36']{margin-top:36px;margin-bottom:36px}[data-my='48']{margin-top:48px;margin-bottom:48px}[data-my='72']{margin-top:72px;margin-bottom:72px}[data-my=auto]{margin-top:auto;margin-bottom:auto}[data-my=unset]{margin-top:unset;margin-bottom:unset}[data-mt='0']{margin-top:0}[data-mt='3']{margin-top:3px}[data-mt='6']{margin-top:6px}[data-mt='12']{margin-top:12px}[data-mt='24']{margin-top:24px}[data-mt='36']{margin-top:36px}[data-mt='48']{margin-top:48px}[data-mt='72']{margin-top:72px}[data-mt=auto]{margin-top:auto}[data-mt=unset]{margin-top:unset}[data-mr='0']{margin-right:0}[data-mr='3']{margin-right:3px}[data-mr='6']{margin-right:6px}[data-mr='12']{margin-right:12px}[data-mr='24']{margin-right:24px}[data-mr='36']{margin-right:36px}[data-mr='48']{margin-right:48px}[data-mr='72']{margin-right:72px}[data-mr=auto]{margin-right:auto}[data-mr=unset]{margin-right:unset}[data-mb='0']{margin-bottom:0}[data-mb='3']{margin-bottom:3px}[data-mb='6']{margin-bottom:6px}[data-mb='12']{margin-bottom:12px}[data-mb='24']{margin-bottom:24px}[data-mb='36']{margin-bottom:36px}[data-mb='48']{margin-bottom:48px}[data-mb='72']{margin-bottom:72px}[data-mb=auto]{margin-bottom:auto}[data-mb=unset]{margin-bottom:unset}[data-ml='0']{margin-left:0}[data-ml='3']{margin-left:3px}[data-ml='6']{margin-left:6px}[data-ml='12']{margin-left:12px}[data-ml='24']{margin-left:24px}[data-ml='36']{margin-left:36px}[data-ml='48']{margin-left:48px}[data-ml='72']{margin-left:72px}[data-ml=auto]{margin-left:auto}[data-ml=unset]{margin-left:unset}@media (max-width:768px){[data-md-m='0']{margin:0}[data-md-m='3']{margin:3px}[data-md-m='6']{margin:6px}[data-md-m='12']{margin:12px}[data-md-m='24']{margin:24px}[data-md-m='36']{margin:36px}[data-md-m='48']{margin:48px}[data-md-m='72']{margin:72px}[data-md-m=auto]{margin:auto}[data-md-m=unset]{margin:unset}[data-md-mx='0']{margin-left:0;margin-right:0}[data-md-mx='3']{margin-left:3px;margin-right:3px}[data-md-mx='6']{margin-left:6px;margin-right:6px}[data-md-mx='12']{margin-left:12px;margin-right:12px}[data-md-mx='24']{margin-left:24px;margin-right:24px}[data-md-mx='36']{margin-left:36px;margin-right:36px}[data-md-mx='48']{margin-left:48px;margin-right:48px}[data-md-mx='72']{margin-left:72px;margin-right:72px}[data-md-mx=auto]{margin-left:auto;margin-right:auto}[data-md-mx=unset]{margin-left:unset;margin-right:unset}[data-md-my='0']{margin-top:0;margin-bottom:0}[data-md-my='3']{margin-top:3px;margin-bottom:3px}[data-md-my='6']{margin-top:6px;margin-bottom:6px}[data-md-my='12']{margin-top:12px;margin-bottom:12px}[data-md-my='24']{margin-top:24px;margin-bottom:24px}[data-md-my='36']{margin-top:36px;margin-bottom:36px}[data-md-my='48']{margin-top:48px;margin-bottom:48px}[data-md-my='72']{margin-top:72px;margin-bottom:72px}[data-md-my=auto]{margin-top:auto;margin-bottom:auto}[data-md-my=unset]{margin-top:unset;margin-bottom:unset}[data-md-mt='0']{margin-top:0}[data-md-mt='3']{margin-top:3px}[data-md-mt='6']{margin-top:6px}[data-md-mt='12']{margin-top:12px}[data-md-mt='24']{margin-top:24px}[data-md-mt='36']{margin-top:36px}[data-md-mt='48']{margin-top:48px}[data-md-mt='72']{margin-top:72px}[data-md-mt=auto]{margin-top:auto}[data-md-mt=unset]{margin-top:unset}[data-md-mr='0']{margin-right:0}[data-md-mr='3']{margin-right:3px}[data-md-mr='6']{margin-right:6px}[data-md-mr='12']{margin-right:12px}[data-md-mr='24']{margin-right:24px}[data-md-mr='36']{margin-right:36px}[data-md-mr='48']{margin-right:48px}[data-md-mr='72']{margin-right:72px}[data-md-mr=auto]{margin-right:auto}[data-md-mr=unset]{margin-right:unset}[data-md-mb='0']{margin-bottom:0}[data-md-mb='3']{margin-bottom:3px}[data-md-mb='6']{margin-bottom:6px}[data-md-mb='12']{margin-bottom:12px}[data-md-mb='24']{margin-bottom:24px}[data-md-mb='36']{margin-bottom:36px}[data-md-mb='48']{margin-bottom:48px}[data-md-mb='72']{margin-bottom:72px}[data-md-mb=auto]{margin-bottom:auto}[data-md-mb=unset]{margin-bottom:unset}[data-md-ml='0']{margin-left:0}[data-md-ml='3']{margin-left:3px}[data-md-ml='6']{margin-left:6px}[data-md-ml='12']{margin-left:12px}[data-md-ml='24']{margin-left:24px}[data-md-ml='36']{margin-left:36px}[data-md-ml='48']{margin-left:48px}[data-md-ml='72']{margin-left:72px}[data-md-ml=auto]{margin-left:auto}[data-md-ml=unset]{margin-left:unset}}[data-lh='12']{line-height:12px}[data-lh='16']{line-height:16px}[data-lh='20']{line-height:20px}[data-lh='24']{line-height:24px}[data-lh='32']{line-height:32px}[data-lh='36']{line-height:36px}[data-lh=unset]{line-height:unsetpx}[data-ls='1']{letter-spacing:1px}[data-ls='2']{letter-spacing:2px}[data-ls='4']{letter-spacing:4px}[data-ls='6']{letter-spacing:6px}[data-ls='0.5']{letter-spacing:.5px}[data-ls='1.5']{letter-spacing:1.5px}[data-height='100%']{height:100%}[data-height=auto]{height:auto}[data-height=unset]{height:unset}@media (max-width:768px){[data-md-height='100%']{height:100%}[data-md-height=auto]{height:auto}[data-md-height=unset]{height:unset}}[data-gap='0']{gap:0}[data-gap='3']{gap:3px}[data-gap='6']{gap:6px}[data-gap='12']{gap:12px}[data-gap='24']{gap:24px}[data-gap='36']{gap:36px}[data-gap='48']{gap:48px}[data-gap='72']{gap:72px}[data-gap=auto]{gap:auto}[data-gap=unset]{gap:unset}@media (max-width:768px){[data-md-gap='0']{gap:0}[data-md-gap='3']{gap:3px}[data-md-gap='6']{gap:6px}[data-md-gap='12']{gap:12px}[data-md-gap='24']{gap:24px}[data-md-gap='36']{gap:36px}[data-md-gap='48']{gap:48px}[data-md-gap='72']{gap:72px}[data-md-gap=auto]{gap:auto}[data-md-gap=unset]{gap:unset}}[data-fw='300']{font-weight:300}[data-fw='400']{font-weight:400}[data-fw='500']{font-weight:500}[data-fw='700']{font-weight:700}[data-fw='900']{font-weight:900}[data-fw=unset]{font-weight:unset}[data-fs='12']{font-size:12px}[data-fs='14']{font-size:14px}[data-fs='16']{font-size:16px}[data-fs='20']{font-size:20px}[data-fs='24']{font-size:24px}[data-fs='32']{font-size:32px}[data-fs='36']{font-size:36px}@media (max-width:768px){[data-md-fs='12']{font-size:12px}[data-md-fs='14']{font-size:14px}[data-md-fs='16']{font-size:16px}[data-md-fs='20']{font-size:20px}[data-md-fs='24']{font-size:24px}[data-md-fs='32']{font-size:32px}[data-md-fs='36']{font-size:36px}}[data-color=white]{color:#f9fafb}[data-color=gray-100]{color:#f3f4f6}[data-color=gray-200]{color:#e5e7eb}[data-color=gray-300]{color:#d1d5db}[data-color=gray-400]{color:#9ca3af}[data-color=gray-500]{color:#6b7280}[data-color=gray-600]{color:#4b5563}[data-color=gray-700]{color:#374151}[data-color=gray-800]{color:#1f2937}[data-color=black]{color:#111827}[data-color=green-100]{color:#caebc5}[data-color=green-200]{color:#a7df9f}[data-color=green-300]{color:#85d279}[data-color=green-400]{color:#62c552}[data-color=green-500]{color:#48ac39}[data-color=green-600]{color:#38852c}[data-color=green-700]{color:#285f1f}[data-color=green-800]{color:#204c19}[data-color=red-100]{color:#f9d4d1}[data-color=red-200]{color:#f6b6b0}[data-color=red-300]{color:hsl(5,80%,72.5%)}[data-color=red-400]{color:hsl(5,80%,62.5%)}[data-color=red-500]{color:hsl(5,80%,52.5%)}[data-color=red-600]{color:#c02315}[data-color=red-700]{color:hsl(5,80%,32.5%)}[data-color=red-800]{color:hsl(5,80%,22.5%)}[data-color=orange-100]{color:#fad3b7}[data-color=orange-200]{color:#f7b587}[data-color=orange-300]{color:#f49857}[data-color=orange-400]{color:#f17b27}[data-color=orange-500]{color:#d7610d}[data-color=orange-600]{color:hsl(25,88%,37.5%)}[data-color=orange-700]{color:hsl(25,88%,27.5%)}[data-color=orange-800]{color:#5f2b06}[data-wrap=nowrap]{flex-wrap:nowrap}[data-wrap=wrap]{flex-wrap:wrap}[data-wrap=wrap-reverse]{flex-wrap:wrap-reverse}[data-wrap=unset]{flex-wrap:unset}@media (max-width:768px){[data-md-wrap=nowrap]{flex-wrap:nowrap}[data-md-wrap=wrap]{flex-wrap:wrap}[data-md-wrap=wrap-reverse]{flex-wrap:wrap-reverse}[data-md-wrap=unset]{flex-wrap:unset}}[data-shrink='0']{flex-shrink:0}[data-shrink=unset]{flex-shrink:unset}@media (max-width:768px){[data-md-shrink='0']{flex-shrink:0}[data-md-shrink=unset]{flex-shrink:unset}}[data-grow='1']{flex-grow:1}[data-grow=unset]{flex-grow:unset}@media (max-width:768px){[data-md-grow='1']{flex-grow:1}[data-md-grow=unset]{flex-grow:unset}}[data-direction=row]{flex-direction:row}[data-direction=row-reverse]{flex-direction:row-reverse}[data-direction=column]{flex-direction:column}[data-direction=column-reverse]{flex-direction:column-reverse}@media (max-width:768px){[data-md-direction=row]{flex-direction:row}[data-md-direction=row-reverse]{flex-direction:row-reverse}[data-md-direction=column]{flex-direction:column}[data-md-direction=column-reverse]{flex-direction:column-reverse}}[data-display=flex]{display:flex;flex-wrap:wrap}[data-display=block]{display:block}[data-display=inline-block]{display:inline-block}[data-display=none]{display:none}@media (max-width:768px){[data-md-display=flex]{display:flex;flex-wrap:wrap}[data-md-display=block]{display:block}[data-md-display=inline-block]{display:inline-block}[data-md-display=none]{display:none}}[data-cursor=wait]{cursor:wait}[data-cursor=auto]{cursor:auto}[data-cursor=pointer]{cursor:pointer}[data-cursor=not-allowed]{cursor:not-allowed}@media (max-width:768px){[data-md-cursor=wait]{cursor:wait}[data-md-cursor=auto]{cursor:auto}[data-md-cursor=pointer]{cursor:pointer}[data-md-cursor=not-allowed]{cursor:not-allowed}}[data-bw='1']{border-width:1px}[data-bw='2']{border-width:2px}[data-bw='4']{border-width:4px}[data-bw='6']{border-width:6px}[data-bw='12']{border-width:12px}[data-bwx='1']{border-left-width:1px;border-right-width:1px}[data-bwx='2']{border-left-width:2px;border-right-width:2px}[data-bwx='4']{border-left-width:4px;border-right-width:4px}[data-bwx='6']{border-left-width:6px;border-right-width:6px}[data-bwx='12']{border-left-width:12px;border-right-width:12px}[data-bwy='1']{border-top-width:1px;border-bottom-width:1px}[data-bwy='2']{border-top-width:2px;border-bottom-width:2px}[data-bwy='4']{border-top-width:4px;border-bottom-width:4px}[data-bwy='6']{border-top-width:6px;border-bottom-width:6px}[data-bwy='12']{border-top-width:12px;border-bottom-width:12px}[data-bwt='1']{border-top-width:1px}[data-bwt='2']{border-top-width:2px}[data-bwt='4']{border-top-width:4px}[data-bwt='6']{border-top-width:6px}[data-bwt='12']{border-top-width:12px}[data-bwr='1']{border-right-width:1px}[data-bwr='2']{border-right-width:2px}[data-bwr='4']{border-right-width:4px}[data-bwr='6']{border-right-width:6px}[data-bwr='12']{border-right-width:12px}[data-bwb='1']{border-bottom-width:1px}[data-bwb='2']{border-bottom-width:2px}[data-bwb='4']{border-bottom-width:4px}[data-bwb='6']{border-bottom-width:6px}[data-bwb='12']{border-bottom-width:12px}[data-bwl='1']{border-left-width:1px}[data-bwl='2']{border-left-width:2px}[data-bwl='4']{border-left-width:4px}[data-bwl='6']{border-left-width:6px}[data-bwl='12']{border-left-width:12px}[data-br='0']{border-radius:0}[data-br='1']{border-radius:1px}[data-br='2']{border-radius:2px}[data-br='4']{border-radius:4px}[data-br='50%']{border-radius:50%}[data-bc=white]{border-color:#f9fafb;border-style:solid}[data-bc=gray-100]{border-color:#f3f4f6;border-style:solid}[data-bc=gray-200]{border-color:#e5e7eb;border-style:solid}[data-bc=gray-300]{border-color:#d1d5db;border-style:solid}[data-bc=gray-400]{border-color:#9ca3af;border-style:solid}[data-bc=gray-500]{border-color:#6b7280;border-style:solid}[data-bc=gray-600]{border-color:#4b5563;border-style:solid}[data-bc=gray-700]{border-color:#374151;border-style:solid}[data-bc=gray-800]{border-color:#1f2937;border-style:solid}[data-bc=black]{border-color:#111827;border-style:solid}[data-bc=transparent]{border-color:transparent;border-style:solid}[data-bc=green-100]{border-color:#caebc5;border-style:solid}[data-bc=green-200]{border-color:#a7df9f;border-style:solid}[data-bc=green-300]{border-color:#85d279;border-style:solid}[data-bc=green-400]{border-color:#62c552;border-style:solid}[data-bc=green-500]{border-color:#48ac39;border-style:solid}[data-bc=green-600]{border-color:#38852c;border-style:solid}[data-bc=green-700]{border-color:#285f1f;border-style:solid}[data-bc=green-800]{border-color:#204c19;border-style:solid}[data-bc=orange-100]{border-color:#fad3b7;border-style:solid}[data-bc=orange-200]{border-color:#f7b587;border-style:solid}[data-bc=orange-300]{border-color:#f49857;border-style:solid}[data-bc=orange-400]{border-color:#f17b27;border-style:solid}[data-bc=orange-500]{border-color:#d7610d;border-style:solid}[data-bc=orange-600]{border-color:hsl(25,88%,37.5%);border-style:solid}[data-bc=orange-700]{border-color:hsl(25,88%,27.5%);border-style:solid}[data-bc=orange-800]{border-color:#5f2b06;border-style:solid}[data-bc=red-100]{border-color:#f9d4d1;border-style:solid}[data-bc=red-200]{border-color:#f6b6b0;border-style:solid}[data-bc=red-300]{border-color:hsl(5,80%,72.5%);border-style:solid}[data-bc=red-400]{border-color:hsl(5,80%,62.5%);border-style:solid}[data-bc=red-500]{border-color:hsl(5,80%,52.5%);border-style:solid}[data-bc=red-600]{border-color:#c02315;border-style:solid}[data-bc=red-700]{border-color:hsl(5,80%,32.5%);border-style:solid}[data-bc=red-800]{border-color:hsl(5,80%,22.5%);border-style:solid}[data-bcx=white]{border-right-color:#f9fafb;border-left-color:#f9fafb;border-right-style:solid;border-left-style:solid}[data-bcx=gray-100]{border-right-color:#f3f4f6;border-left-color:#f3f4f6;border-right-style:solid;border-left-style:solid}[data-bcx=gray-200]{border-right-color:#e5e7eb;border-left-color:#e5e7eb;border-right-style:solid;border-left-style:solid}[data-bcx=gray-300]{border-right-color:#d1d5db;border-left-color:#d1d5db;border-right-style:solid;border-left-style:solid}[data-bcx=gray-400]{border-right-color:#9ca3af;border-left-color:#9ca3af;border-right-style:solid;border-left-style:solid}[data-bcx=gray-500]{border-right-color:#6b7280;border-left-color:#6b7280;border-right-style:solid;border-left-style:solid}[data-bcx=gray-600]{border-right-color:#4b5563;border-left-color:#4b5563;border-right-style:solid;border-left-style:solid}[data-bcx=gray-700]{border-right-color:#374151;border-left-color:#374151;border-right-style:solid;border-left-style:solid}[data-bcx=gray-800]{border-right-color:#1f2937;border-left-color:#1f2937;border-right-style:solid;border-left-style:solid}[data-bcx=black]{border-right-color:#111827;border-left-color:#111827;border-right-style:solid;border-left-style:solid}[data-bcx=transparent]{border-right-color:transparent;border-left-color:transparent;border-right-style:solid;border-left-style:solid}[data-bcy=white]{border-top-color:#f9fafb;border-bottom-color:#f9fafb;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-100]{border-top-color:#f3f4f6;border-bottom-color:#f3f4f6;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-200]{border-top-color:#e5e7eb;border-bottom-color:#e5e7eb;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-300]{border-top-color:#d1d5db;border-bottom-color:#d1d5db;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-400]{border-top-color:#9ca3af;border-bottom-color:#9ca3af;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-500]{border-top-color:#6b7280;border-bottom-color:#6b7280;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-600]{border-top-color:#4b5563;border-bottom-color:#4b5563;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-700]{border-top-color:#374151;border-bottom-color:#374151;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-800]{border-top-color:#1f2937;border-bottom-color:#1f2937;border-top-style:solid;border-bottom-style:solid}[data-bcy=black]{border-top-color:#111827;border-bottom-color:#111827;border-top-style:solid;border-bottom-style:solid}[data-bcy=transparent]{border-top-color:transparent;border-bottom-color:transparent;border-top-style:solid;border-bottom-style:solid}[data-bct=white]{border-top-color:#f9fafb;border-top-style:solid}[data-bct=gray-100]{border-top-color:#f3f4f6;border-top-style:solid}[data-bct=gray-200]{border-top-color:#e5e7eb;border-top-style:solid}[data-bct=gray-300]{border-top-color:#d1d5db;border-top-style:solid}[data-bct=gray-400]{border-top-color:#9ca3af;border-top-style:solid}[data-bct=gray-500]{border-top-color:#6b7280;border-top-style:solid}[data-bct=gray-600]{border-top-color:#4b5563;border-top-style:solid}[data-bct=gray-700]{border-top-color:#374151;border-top-style:solid}[data-bct=gray-800]{border-top-color:#1f2937;border-top-style:solid}[data-bct=black]{border-top-color:#111827;border-top-style:solid}[data-bct=transparent]{border-top-color:transparent;border-top-style:solid}[data-bcr=white]{border-right-color:#f9fafb;border-right-style:solid}[data-bcr=gray-100]{border-right-color:#f3f4f6;border-right-style:solid}[data-bcr=gray-200]{border-right-color:#e5e7eb;border-right-style:solid}[data-bcr=gray-300]{border-right-color:#d1d5db;border-right-style:solid}[data-bcr=gray-400]{border-right-color:#9ca3af;border-right-style:solid}[data-bcr=gray-500]{border-right-color:#6b7280;border-right-style:solid}[data-bcr=gray-600]{border-right-color:#4b5563;border-right-style:solid}[data-bcr=gray-700]{border-right-color:#374151;border-right-style:solid}[data-bcr=gray-800]{border-right-color:#1f2937;border-right-style:solid}[data-bcr=black]{border-right-color:#111827;border-right-style:solid}[data-bcr=transparent]{border-right-color:transparent;border-right-style:solid}[data-bcb=white]{border-bottom-color:#f9fafb;border-bottom-style:solid}[data-bcb=gray-100]{border-bottom-color:#f3f4f6;border-bottom-style:solid}[data-bcb=gray-200]{border-bottom-color:#e5e7eb;border-bottom-style:solid}[data-bcb=gray-300]{border-bottom-color:#d1d5db;border-bottom-style:solid}[data-bcb=gray-400]{border-bottom-color:#9ca3af;border-bottom-style:solid}[data-bcb=gray-500]{border-bottom-color:#6b7280;border-bottom-style:solid}[data-bcb=gray-600]{border-bottom-color:#4b5563;border-bottom-style:solid}[data-bcb=gray-700]{border-bottom-color:#374151;border-bottom-style:solid}[data-bcb=gray-800]{border-bottom-color:#1f2937;border-bottom-style:solid}[data-bcb=black]{border-bottom-color:#111827;border-bottom-style:solid}[data-bcb=transparent]{border-bottom-color:transparent;border-bottom-style:solid}[data-bcl=white]{border-left-color:#f9fafb;border-left-style:solid}[data-bcl=gray-100]{border-left-color:#f3f4f6;border-left-style:solid}[data-bcl=gray-200]{border-left-color:#e5e7eb;border-left-style:solid}[data-bcl=gray-300]{border-left-color:#d1d5db;border-left-style:solid}[data-bcl=gray-400]{border-left-color:#9ca3af;border-left-style:solid}[data-bcl=gray-500]{border-left-color:#6b7280;border-left-style:solid}[data-bcl=gray-600]{border-left-color:#4b5563;border-left-style:solid}[data-bcl=gray-700]{border-left-color:#374151;border-left-style:solid}[data-bcl=gray-800]{border-left-color:#1f2937;border-left-style:solid}[data-bcl=black]{border-left-color:#111827;border-left-style:solid}[data-bcl=transparent]{border-left-color:transparent;border-left-style:solid}[data-bg=white]{background-color:#f9fafb}[data-bg=gray-100]{background-color:#f3f4f6}[data-bg=gray-200]{background-color:#e5e7eb}[data-bg=gray-300]{background-color:#d1d5db}[data-bg=gray-400]{background-color:#9ca3af}[data-bg=gray-500]{background-color:#6b7280}[data-bg=gray-600]{background-color:#4b5563}[data-bg=gray-700]{background-color:#374151}[data-bg=gray-800]{background-color:#1f2937}[data-bg=black]{background-color:#111827}[data-bg=green-100]{background-color:#caebc5}[data-bg=green-200]{background-color:#a7df9f}[data-bg=green-300]{background-color:#85d279}[data-bg=green-400]{background-color:#62c552}[data-bg=green-500]{background-color:#48ac39}[data-bg=green-600]{background-color:#38852c}[data-bg=green-700]{background-color:#285f1f}[data-bg=green-800]{background-color:#204c19}[data-bg=red-100]{background-color:#f9d4d1}[data-bg=red-200]{background-color:#f6b6b0}[data-bg=red-300]{background-color:hsl(5,80%,72.5%)}[data-bg=red-400]{background-color:hsl(5,80%,62.5%)}[data-bg=red-500]{background-color:hsl(5,80%,52.5%)}[data-bg=red-600]{background-color:#c02315}[data-bg=red-700]{background-color:hsl(5,80%,32.5%)}[data-bg=red-800]{background-color:hsl(5,80%,22.5%)}[data-bg=orange-100]{background-color:#fad3b7}[data-bg=orange-200]{background-color:#f7b587}[data-bg=orange-300]{background-color:#f49857}[data-bg=orange-400]{background-color:#f17b27}[data-bg=orange-500]{background-color:#d7610d}[data-bg=orange-600]{background-color:hsl(25,88%,37.5%)}[data-bg=orange-700]{background-color:hsl(25,88%,27.5%)}[data-bg=orange-800]{background-color:#5f2b06}[data-backdrop=black]::backdrop{background:rgba(0,0,0,.75)}[data-backdrop=none]::backdrop{background:0 0}[data-main=start]{justify-content:flex-start}[data-main=end]{justify-content:flex-end}[data-main=around]{justify-content:space-around}[data-main=evenly]{justify-content:space-evenly}[data-main=between]{justify-content:space-between}[data-main=center]{justify-content:center}[data-main=baseline]{justify-content:baseline}[data-cross=start]{align-items:flex-start}[data-cross=end]{align-items:flex-end}[data-cross=around]{align-items:space-around}[data-cross=evenly]{align-items:space-evenly}[data-cross=between]{align-items:space-between}[data-cross=center]{align-items:center}[data-cross=baseline]{align-items:baseline}[data-self=start]{align-self:flex-start}[data-self=end]{align-self:flex-end}[data-self=center]{align-self:center}[data-self=baseline]{align-self:baseline}@media (max-width:768px){[data-md-main=start]{justify-content:flex-start}[data-md-main=end]{justify-content:flex-end}[data-md-main=around]{justify-content:space-around}[data-md-main=evenly]{justify-content:space-evenly}[data-md-main=between]{justify-content:space-between}[data-md-main=center]{justify-content:center}[data-md-main=baseline]{justify-content:baseline}[data-md-cross=start]{align-items:flex-start}[data-md-cross=end]{align-items:flex-end}[data-md-cross=around]{align-items:space-around}[data-md-cross=evenly]{align-items:space-evenly}[data-md-cross=between]{align-items:space-between}[data-md-cross=center]{align-items:center}[data-md-cross=baseline]{align-items:baseline}[data-md-self=start]{align-self:flex-start}[data-md-self=end]{align-self:flex-end}[data-md-self=center]{align-self:center}[data-md-self=baseline]{align-self:baseline}}
|
|
1
|
+
.c-button{height:36px;text-transform:uppercase;-webkit-user-select:none;user-select:none;white-space:nowrap;touch-action:manipulation;transition:border-radius .3s,opacity .4s}.c-button[data-variant=bare],.c-button[data-variant=primary],.c-button[data-variant=secondary],.c-button[data-variant=with-icon]{font-size:12px;font-weight:600;letter-spacing:.5px;border-radius:4px;border:2px solid transparent;background-color:transparent}.c-button:active,.c-button:focus,.c-button:hover{cursor:pointer;opacity:.75;border-radius:0;transition:border-radius .3s,opacity .4s}.c-button:active{border:2px solid transparent!important}.c-button:disabled{opacity:.5;transition:opacity .3s}.c-button:disabled:hover{cursor:auto;border-radius:4px}.c-button[data-variant=primary]{padding:0 8px;background-color:#374151;color:#e5e7eb;letter-spacing:.75px}.c-button[data-variant=secondary]{padding:0 8px;background-color:#d1d5db;color:#1f2937;letter-spacing:.5px}.c-button[data-variant=bare],.c-button[data-variant=with-icon]{background-color:transparent;color:#1f2937;letter-spacing:.5px}.c-button[data-variant=with-icon]{display:flex;justify-content:center;align-items:center}.c-input{height:36px;font-size:12px;line-height:24px;color:#374151;padding:0 0 0 6px;background:#fff;border:1px solid #d1d5db;border-radius:4px;outline:0;appearance:none;transition:border-radius .3s,border-color .4s}.c-input:active,.c-input:focus,.c-input:hover{border-color:#9ca3af;border-radius:0;transition:border-radius .3s,border-color .4s}.c-input:disabled{opacity:.75;background:#f3f4f6;border-color:#d1d5db}.c-button:disabled:hover{border-radius:4px}.c-input:placeholder-shown{color:#4b5563}.c-input:invalid:not(:placeholder-shown){border-color:#b31940}.c-label{line-height:24px;font-size:12px;text-transform:uppercase;font-weight:500;letter-spacing:.5px;color:#4b5563}.c-label[data-variant=optional]::after{margin-left:6px;text-transform:lowercase;content:"(optional)"}.c-link{text-underline-offset:4px;letter-spacing:.5px}.c-link:hover{opacity:.75;transition:opacity .3s}.c-link[data-variant=bare]{-webkit-text-decoration:none;text-decoration:none}@supports (appearance:none){.c-select{appearance:none;line-height:24px;margin:0;padding:0 24px 0 6px;height:36px;font-size:12px;background:#fff;border:1px solid #d1d5db;color:#374151;text-overflow:ellipsis;outline:0}.c-select:focus,.c-select:hover{cursor:pointer;border:1px solid #9ca3af}.c-select-wrapper{position:relative}.c-select-wrapper::after{position:absolute;content:"";top:12px;right:8px;height:8px;width:8px;border:2px solid #1f2937;border-left:none;border-top:none;transform:rotate(45deg)}.c-select:disabled{opacity:.5}.c-select:disabled:hover{cursor:auto;border:1px solid #d1d5db}}@media not all and (min-resolution:0.001dpcm){.c-select{font-size:16px}}@supports (appearance:none){.c-checkbox{position:relative;appearance:none;outline:0;min-height:24px;min-width:24px;background:#fff;border:1px solid #d1d5db}.c-checkbox:checked,.c-checkbox:hover{border-color:#9ca3af;cursor:pointer;transition:border-color .4s}.c-checkbox:checked:hover{border-color:#d1d5db;cursor:pointer;transition:border-color .4s}.c-checkbox:focus{border:2px solid #4b5563}.c-checkbox:checked::after,.c-checkbox:hover::after{position:absolute;content:"";top:6px;left:6px;height:6px;width:10px;border:2px solid #374151;border-top:0;border-right:0;transform:rotate(-45deg)}.c-checkbox:hover::after{border-color:#9ca3af}}.c-textarea{font-size:12px;line-height:16px;color:#374151;padding:2px 6px 6px 6px;background:#fff;border:1px solid #d1d5db;border-radius:4px;outline:0;appearance:none;resize:none;transition:border-radius .3s,border-color .4s}.c-textarea:active,.c-textarea:focus,.c-textarea:hover{border-color:#9ca3af;border-radius:0;transition:border-radius .3s,border-color .4s}.c-textarea:disabled{opacity:.75;background:#e5e7eb;border-color:#d1d5db}.c-textarea:placeholder-shown{color:#4b5563}.c-textarea:invalid:not(:placeholder-shown){border-color:#b31940}.c-range{appearance:none;height:8px;border-radius:8px}.c-range::-moz-range-thumb{appearance:none;box-shadow:none;border:none;border-radius:50%;height:14px;width:14px}.c-range::-ms-thumb{appearance:none;box-shadow:none;border:none;border-radius:50%;height:14px;width:14px}.c-range::-webkit-slider-thumb{appearance:none;box-shadow:none;border:none;border-radius:50%;height:14px;width:14px;margin-top:0}.c-range::-moz-range-track{appearance:none;box-shadow:none;border:none}.c-range::-webkit-slider-runnable-track{appearance:none;box-shadow:none;border:none}.c-range::-ms-track{appearance:none;box-shadow:none;border:none}.c-range[data-variant=primary]{background:#e5e7eb}.c-range[data-variant=primary]::-moz-range-thumb{background:#4b5563}.c-range[data-variant=primary]::-webkit-slider-thumb{background:#4b5563}.c-range[data-variant=primary]::-ms-thumb{background:#4b5563}.c-range[data-variant=primary]{background:linear-gradient(to right,#4b5563 var(--percentage),#e5e7eb var(--percentage))}.c-badge{padding:0 6px;font-size:12px;font-weight:700;letter-spacing:.5px;text-align:center;text-transform:uppercase;background-color:#e5e7eb;border-radius:4px;color:#4b5563}.c-badge:hover{opacity:.9;transition:opacity .3s}.c-file-explorer{overflow:hidden;position:absolute;z-index:-1;width:.1px;height:.1px;opacity:0}.c-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.c-switch-checkbox:checked+.c-switch-label{background-color:#48ac39}.c-switch-checkbox:not(:checked)+.c-switch-label{background-color:#d1d5db}.c-switch-checkbox:active+.c-switch-label{outline:1px dotted black}.c-switch-checkbox:focus+.c-switch-label{outline:1px dotted black}.c-switch-label{display:inline-block;width:48px;height:24px;border-radius:15px;position:relative;cursor:pointer;transition:background-color .2s ease-in-out}.c-switch-slider{position:absolute;top:4px;left:4px;width:16px;height:16px;background-color:#fff;border-radius:50%;transition:transform .3s ease-in-out}.c-switch-checkbox:checked+.c-switch-label .c-switch-slider{transform:translateX(24px)}[data-transform=truncate]:not([title]){position:relative}[data-transform=truncate]:not([title]):after{background:red;position:absolute;inset:0;content:"Rule #1 violation (title-truncate)"}[data-transform=line-clamp]:not([title]){position:relative}[data-transform=line-clamp]:not([title]):after{background:red;position:absolute;inset:0;content:"Rule #1 violation (title-truncate)"}[target="_blank"]:not([rel]){position:relative}[target="_blank"]:not([rel]):after{background:red;position:absolute;inset:0;content:"Rule #2 violation (target-blank-referer)"}img:not([alt]){border:2px solid red;content:"Rule #3 violation (image-alt)"}button:not([title])>svg{border:2px solid red!important;content:"Rule #4 violation (button-icon-title)"}ul>:not(li){position:relative}ul>:not(li):after{background:red;position:absolute;inset:0;content:"Rule #5 violation (invalid-list-element)"}[data-interaction=grow]{transition:width .3s ease-in-out}[data-interaction=rotate-into-focus]{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}[data-interaction=rotate-into-focus]:hover{transform:scale(1.05);box-shadow:0 8px 16px rgba(0,0,0,.2)}[data-interaction=rotate-into-focus]:active{transform:scale(1.05)}[data-interaction=rotate-into-focus]>*{transition:transform .3s cubic-bezier(.175, .885, .32, 1.275)}[data-interaction=rotate-into-focus]:hover>*{transform:rotate(90deg)}[data-interaction=subtle-scale]{transition:transform .3s ease-in-out}[data-interaction=subtle-scale]:hover{transform:scale(1.25)}@keyframes shrink-fade-out{to{opacity:0;scale:0.9}}[data-exit=shrink-fade-out]{animation:shrink-fade-out 140ms ease forwards}@keyframes grow-fade-in{from{opacity:.5;scale:0.9}to{opacity:1;scale:1}}[data-exit=grow-fade-in]{animation:grow-fade-in 140ms ease forwards}[data-z='0']{z-index:0}[data-z='1']{z-index:1}[data-z='2']{z-index:2}[data-z='3']{z-index:3}[data-z='-1']{z-index:-1}[data-width='100%']{width:100%}[data-width=auto]{width:auto}[data-width=unset]{width:unset}@media (max-width:768px){[data-md-width='100%']{width:100%}[data-md-width=auto]{width:auto}[data-md-width=unset]{width:unset}}[data-transform~=uppercase]{text-transform:uppercase}[data-transform~=lowercase]{text-transform:lowercase}[data-transform~=capitalize]{text-transform:capitalize}[data-transform~=upper-first]:first-letter{text-transform:uppercase}[data-transform~=truncate]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}[data-transform~=center]{text-align:center}[data-transform~=nowrap]{white-space:nowrap}[data-transform~=none]{text-transform:none}[data-transform~=line-clamp]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,2);overflow:hidden}[data-shadow=sm]{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}[data-shadow=md]{box-shadow:0 4px 6px 0 rgba(0,0,0,.08)}[data-shadow=lg]{box-shadow:0 8px 12px 2px rgba(0,0,0,.06)}[data-rotate='0']{transform:rotate(0)}[data-rotate='90']{transform:rotate(90deg)}[data-rotate='180']{transform:rotate(180deg)}[data-rotate='270']{transform:rotate(270deg)}@media (max-width:768px){[data-md-rotate='0']{transform:rotate(0)}[data-md-rotate='90']{transform:rotate(90deg)}[data-md-rotate='180']{transform:rotate(180deg)}[data-md-rotate='270']{transform:rotate(270deg)}}[data-position=static]{position:static}[data-position=relative]{position:relative}[data-position=absolute]{position:absolute}[data-position=fixed]{position:fixed}[data-position=sticky]{position:sticky}[data-position=unset]{position:unset}@media (max-width:768px){[data-md-position=static]{position:static}[data-md-position=relative]{position:relative}[data-md-position=absolute]{position:absolute}[data-md-position=fixed]{position:fixed}[data-md-position=sticky]{position:sticky}[data-md-position=unset]{position:unset}}[data-top='0']{top:0}[data-right='0']{right:0}[data-bottom='0']{bottom:0}[data-left='0']{left:0}[data-inset='0']{inset:0}[data-top='3']{top:3px}[data-right='3']{right:3px}[data-bottom='3']{bottom:3px}[data-left='3']{left:3px}[data-inset='3']{inset:3px}[data-top='6']{top:6px}[data-right='6']{right:6px}[data-bottom='6']{bottom:6px}[data-left='6']{left:6px}[data-inset='6']{inset:6px}[data-top='12']{top:12px}[data-right='12']{right:12px}[data-bottom='12']{bottom:12px}[data-left='12']{left:12px}[data-inset='12']{inset:12px}[data-top='24']{top:24px}[data-right='24']{right:24px}[data-bottom='24']{bottom:24px}[data-left='24']{left:24px}[data-inset='24']{inset:24px}[data-top='36']{top:36px}[data-right='36']{right:36px}[data-bottom='36']{bottom:36px}[data-left='36']{left:36px}[data-inset='36']{inset:36px}[data-top='48']{top:48px}[data-right='48']{right:48px}[data-bottom='48']{bottom:48px}[data-left='48']{left:48px}[data-inset='48']{inset:48px}[data-top='72']{top:72px}[data-right='72']{right:72px}[data-bottom='72']{bottom:72px}[data-left='72']{left:72px}[data-inset='72']{inset:72px}[data-top=auto]{top:auto}[data-right=auto]{right:auto}[data-bottom=auto]{bottom:auto}[data-left=auto]{left:auto}[data-inset=auto]{inset:auto}[data-top=unset]{top:unset}[data-right=unset]{right:unset}[data-bottom=unset]{bottom:unset}[data-left=unset]{left:unset}[data-inset=unset]{inset:unset}@media (max-width:768px){[data-md-top='0']{top:0}[data-md-right='0']{right:0}[data-md-bottom='0']{bottom:0}[data-md-left='0']{left:0}[data-md-inset='0']{inset:0}[data-md-top='3']{top:3px}[data-md-right='3']{right:3px}[data-md-bottom='3']{bottom:3px}[data-md-left='3']{left:3px}[data-md-inset='3']{inset:3px}[data-md-top='6']{top:6px}[data-md-right='6']{right:6px}[data-md-bottom='6']{bottom:6px}[data-md-left='6']{left:6px}[data-md-inset='6']{inset:6px}[data-md-top='12']{top:12px}[data-md-right='12']{right:12px}[data-md-bottom='12']{bottom:12px}[data-md-left='12']{left:12px}[data-md-inset='12']{inset:12px}[data-md-top='24']{top:24px}[data-md-right='24']{right:24px}[data-md-bottom='24']{bottom:24px}[data-md-left='24']{left:24px}[data-md-inset='24']{inset:24px}[data-md-top='36']{top:36px}[data-md-right='36']{right:36px}[data-md-bottom='36']{bottom:36px}[data-md-left='36']{left:36px}[data-md-inset='36']{inset:36px}[data-md-top='48']{top:48px}[data-md-right='48']{right:48px}[data-md-bottom='48']{bottom:48px}[data-md-left='48']{left:48px}[data-md-inset='48']{inset:48px}[data-md-top='72']{top:72px}[data-md-right='72']{right:72px}[data-md-bottom='72']{bottom:72px}[data-md-left='72']{left:72px}[data-md-inset='72']{inset:72px}[data-md-top=auto]{top:auto}[data-md-right=auto]{right:auto}[data-md-bottom=auto]{bottom:auto}[data-md-left=auto]{left:auto}[data-md-inset=auto]{inset:auto}[data-md-top=unset]{top:unset}[data-md-right=unset]{right:unset}[data-md-bottom=unset]{bottom:unset}[data-md-left=unset]{left:unset}[data-md-inset=unset]{inset:unset}}[data-pointer-events=none]{pointer-events:none}[data-pointer-events=auto]{pointer-events:auto}@media (max-width:768px){[data-md-pointer-events=none]{pointer-events:none}[data-md-pointer-events=auto]{pointer-events:auto}}[data-p='0']{padding:0}[data-p='3']{padding:3px}[data-p='6']{padding:6px}[data-p='12']{padding:12px}[data-p='24']{padding:24px}[data-p='36']{padding:36px}[data-p='48']{padding:48px}[data-p='72']{padding:72px}[data-p=auto]{padding:auto}[data-p=unset]{padding:unset}[data-px='0']{padding-left:0;padding-right:0}[data-px='3']{padding-left:3px;padding-right:3px}[data-px='6']{padding-left:6px;padding-right:6px}[data-px='12']{padding-left:12px;padding-right:12px}[data-px='24']{padding-left:24px;padding-right:24px}[data-px='36']{padding-left:36px;padding-right:36px}[data-px='48']{padding-left:48px;padding-right:48px}[data-px='72']{padding-left:72px;padding-right:72px}[data-px=auto]{padding-left:auto;padding-right:auto}[data-px=unset]{padding-left:unset;padding-right:unset}[data-py='0']{padding-top:0;padding-bottom:0}[data-py='3']{padding-top:3px;padding-bottom:3px}[data-py='6']{padding-top:6px;padding-bottom:6px}[data-py='12']{padding-top:12px;padding-bottom:12px}[data-py='24']{padding-top:24px;padding-bottom:24px}[data-py='36']{padding-top:36px;padding-bottom:36px}[data-py='48']{padding-top:48px;padding-bottom:48px}[data-py='72']{padding-top:72px;padding-bottom:72px}[data-py=auto]{padding-top:auto;padding-bottom:auto}[data-py=unset]{padding-top:unset;padding-bottom:unset}[data-pt='0']{padding-top:0}[data-pt='3']{padding-top:3px}[data-pt='6']{padding-top:6px}[data-pt='12']{padding-top:12px}[data-pt='24']{padding-top:24px}[data-pt='36']{padding-top:36px}[data-pt='48']{padding-top:48px}[data-pt='72']{padding-top:72px}[data-pt=auto]{padding-top:auto}[data-pt=unset]{padding-top:unset}[data-pr='0']{padding-right:0}[data-pr='3']{padding-right:3px}[data-pr='6']{padding-right:6px}[data-pr='12']{padding-right:12px}[data-pr='24']{padding-right:24px}[data-pr='36']{padding-right:36px}[data-pr='48']{padding-right:48px}[data-pr='72']{padding-right:72px}[data-pr=auto]{padding-right:auto}[data-pr=unset]{padding-right:unset}[data-pb='0']{padding-bottom:0}[data-pb='3']{padding-bottom:3px}[data-pb='6']{padding-bottom:6px}[data-pb='12']{padding-bottom:12px}[data-pb='24']{padding-bottom:24px}[data-pb='36']{padding-bottom:36px}[data-pb='48']{padding-bottom:48px}[data-pb='72']{padding-bottom:72px}[data-pb=auto]{padding-bottom:auto}[data-pb=unset]{padding-bottom:unset}[data-pl='0']{padding-left:0}[data-pl='3']{padding-left:3px}[data-pl='6']{padding-left:6px}[data-pl='12']{padding-left:12px}[data-pl='24']{padding-left:24px}[data-pl='36']{padding-left:36px}[data-pl='48']{padding-left:48px}[data-pl='72']{padding-left:72px}[data-pl=auto]{padding-left:auto}[data-pl=unset]{padding-left:unset}@media (max-width:768px){[data-md-p='0']{padding:0}[data-md-p='3']{padding:3px}[data-md-p='6']{padding:6px}[data-md-p='12']{padding:12px}[data-md-p='24']{padding:24px}[data-md-p='36']{padding:36px}[data-md-p='48']{padding:48px}[data-md-p='72']{padding:72px}[data-md-p=auto]{padding:auto}[data-md-p=unset]{padding:unset}[data-md-px='0']{padding-left:0;padding-right:0}[data-md-px='3']{padding-left:3px;padding-right:3px}[data-md-px='6']{padding-left:6px;padding-right:6px}[data-md-px='12']{padding-left:12px;padding-right:12px}[data-md-px='24']{padding-left:24px;padding-right:24px}[data-md-px='36']{padding-left:36px;padding-right:36px}[data-md-px='48']{padding-left:48px;padding-right:48px}[data-md-px='72']{padding-left:72px;padding-right:72px}[data-md-px=auto]{padding-left:auto;padding-right:auto}[data-md-px=unset]{padding-left:unset;padding-right:unset}[data-md-py='0']{padding-top:0;padding-bottom:0}[data-md-py='3']{padding-top:3px;padding-bottom:3px}[data-md-py='6']{padding-top:6px;padding-bottom:6px}[data-md-py='12']{padding-top:12px;padding-bottom:12px}[data-md-py='24']{padding-top:24px;padding-bottom:24px}[data-md-py='36']{padding-top:36px;padding-bottom:36px}[data-md-py='48']{padding-top:48px;padding-bottom:48px}[data-md-py='72']{padding-top:72px;padding-bottom:72px}[data-md-py=auto]{padding-top:auto;padding-bottom:auto}[data-md-py=unset]{padding-top:unset;padding-bottom:unset}[data-md-pt='0']{padding-top:0}[data-md-pt='3']{padding-top:3px}[data-md-pt='6']{padding-top:6px}[data-md-pt='12']{padding-top:12px}[data-md-pt='24']{padding-top:24px}[data-md-pt='36']{padding-top:36px}[data-md-pt='48']{padding-top:48px}[data-md-pt='72']{padding-top:72px}[data-md-pt=auto]{padding-top:auto}[data-md-pt=unset]{padding-top:unset}[data-md-pr='0']{padding-right:0}[data-md-pr='3']{padding-right:3px}[data-md-pr='6']{padding-right:6px}[data-md-pr='12']{padding-right:12px}[data-md-pr='24']{padding-right:24px}[data-md-pr='36']{padding-right:36px}[data-md-pr='48']{padding-right:48px}[data-md-pr='72']{padding-right:72px}[data-md-pr=auto]{padding-right:auto}[data-md-pr=unset]{padding-right:unset}[data-md-pb='0']{padding-bottom:0}[data-md-pb='3']{padding-bottom:3px}[data-md-pb='6']{padding-bottom:6px}[data-md-pb='12']{padding-bottom:12px}[data-md-pb='24']{padding-bottom:24px}[data-md-pb='36']{padding-bottom:36px}[data-md-pb='48']{padding-bottom:48px}[data-md-pb='72']{padding-bottom:72px}[data-md-pb=auto]{padding-bottom:auto}[data-md-pb=unset]{padding-bottom:unset}[data-md-pl='0']{padding-left:0}[data-md-pl='3']{padding-left:3px}[data-md-pl='6']{padding-left:6px}[data-md-pl='12']{padding-left:12px}[data-md-pl='24']{padding-left:24px}[data-md-pl='36']{padding-left:36px}[data-md-pl='48']{padding-left:48px}[data-md-pl='72']{padding-left:72px}[data-md-pl=auto]{padding-left:auto}[data-md-pl=unset]{padding-left:unset}}[data-overflow=auto]{overflow:auto}[data-overflow=scroll]{overflow:scroll}[data-overflow=hidden]{overflow:hidden}[data-object-position=top]{object-position:top}[data-object-position=bottom]{object-position:bottom}[data-object-position=left]{object-position:left}[data-object-position=right]{object-position:right}[data-object-position=center]{object-position:center}[data-object-position=top-left]{object-position:top left}[data-object-position=top-right]{object-position:top right}@media (max-width:768px){[data-md-object-position=top]{object-position:top}[data-md-object-position=bottom]{object-position:bottom}[data-md-object-position=left]{object-position:left}[data-md-object-position=right]{object-position:right}[data-md-object-position=center]{object-position:center}[data-md-object-position=top-left]{object-position:top left}[data-md-object-position=top-right]{object-position:top right}}[data-object-fit=contain]{object-fit:contain}[data-object-fit=cover]{object-fit:cover}[data-object-fit=fill]{object-fit:fill}[data-object-fit=scale-down]{object-fit:scale-down}[data-object-fit=none]{object-fit:none}@media (max-width:768px){[data-md-object-fit=contain]{object-fit:contain}[data-md-object-fit=cover]{object-fit:cover}[data-md-object-fit=fill]{object-fit:fill}[data-md-object-fit=scale-down]{object-fit:scale-down}[data-md-object-fit=none]{object-fit:none}}[data-max-width='320']{max-width:320px}[data-max-width='528']{max-width:528px}[data-max-width='768']{max-width:768px}[data-max-width='1296']{max-width:1296px}[data-max-width='100%']{max-width:100%}[data-max-width=unset]{max-width:unset}@media (max-width:768px){[data-md-max-width='320']{max-width:320px}[data-md-max-width='528']{max-width:528px}[data-md-max-width='768']{max-width:768px}[data-md-max-width='1296']{max-width:1296px}[data-md-max-width='100%']{max-width:100%}[data-md-max-width=unset]{max-width:unset}}[data-max-height='100%']{max-height:100%}[data-max-height=unset]{max-height:unset}@media (max-width:768px){[data-md-max-height='100%']{max-height:100%}[data-md-max-height=unset]{max-height:unset}}[data-m='0']{margin:0}[data-m='3']{margin:3px}[data-m='6']{margin:6px}[data-m='12']{margin:12px}[data-m='24']{margin:24px}[data-m='36']{margin:36px}[data-m='48']{margin:48px}[data-m='72']{margin:72px}[data-m=auto]{margin:auto}[data-m=unset]{margin:unset}[data-mx='0']{margin-left:0;margin-right:0}[data-mx='3']{margin-left:3px;margin-right:3px}[data-mx='6']{margin-left:6px;margin-right:6px}[data-mx='12']{margin-left:12px;margin-right:12px}[data-mx='24']{margin-left:24px;margin-right:24px}[data-mx='36']{margin-left:36px;margin-right:36px}[data-mx='48']{margin-left:48px;margin-right:48px}[data-mx='72']{margin-left:72px;margin-right:72px}[data-mx=auto]{margin-left:auto;margin-right:auto}[data-mx=unset]{margin-left:unset;margin-right:unset}[data-my='0']{margin-top:0;margin-bottom:0}[data-my='3']{margin-top:3px;margin-bottom:3px}[data-my='6']{margin-top:6px;margin-bottom:6px}[data-my='12']{margin-top:12px;margin-bottom:12px}[data-my='24']{margin-top:24px;margin-bottom:24px}[data-my='36']{margin-top:36px;margin-bottom:36px}[data-my='48']{margin-top:48px;margin-bottom:48px}[data-my='72']{margin-top:72px;margin-bottom:72px}[data-my=auto]{margin-top:auto;margin-bottom:auto}[data-my=unset]{margin-top:unset;margin-bottom:unset}[data-mt='0']{margin-top:0}[data-mt='3']{margin-top:3px}[data-mt='6']{margin-top:6px}[data-mt='12']{margin-top:12px}[data-mt='24']{margin-top:24px}[data-mt='36']{margin-top:36px}[data-mt='48']{margin-top:48px}[data-mt='72']{margin-top:72px}[data-mt=auto]{margin-top:auto}[data-mt=unset]{margin-top:unset}[data-mr='0']{margin-right:0}[data-mr='3']{margin-right:3px}[data-mr='6']{margin-right:6px}[data-mr='12']{margin-right:12px}[data-mr='24']{margin-right:24px}[data-mr='36']{margin-right:36px}[data-mr='48']{margin-right:48px}[data-mr='72']{margin-right:72px}[data-mr=auto]{margin-right:auto}[data-mr=unset]{margin-right:unset}[data-mb='0']{margin-bottom:0}[data-mb='3']{margin-bottom:3px}[data-mb='6']{margin-bottom:6px}[data-mb='12']{margin-bottom:12px}[data-mb='24']{margin-bottom:24px}[data-mb='36']{margin-bottom:36px}[data-mb='48']{margin-bottom:48px}[data-mb='72']{margin-bottom:72px}[data-mb=auto]{margin-bottom:auto}[data-mb=unset]{margin-bottom:unset}[data-ml='0']{margin-left:0}[data-ml='3']{margin-left:3px}[data-ml='6']{margin-left:6px}[data-ml='12']{margin-left:12px}[data-ml='24']{margin-left:24px}[data-ml='36']{margin-left:36px}[data-ml='48']{margin-left:48px}[data-ml='72']{margin-left:72px}[data-ml=auto]{margin-left:auto}[data-ml=unset]{margin-left:unset}@media (max-width:768px){[data-md-m='0']{margin:0}[data-md-m='3']{margin:3px}[data-md-m='6']{margin:6px}[data-md-m='12']{margin:12px}[data-md-m='24']{margin:24px}[data-md-m='36']{margin:36px}[data-md-m='48']{margin:48px}[data-md-m='72']{margin:72px}[data-md-m=auto]{margin:auto}[data-md-m=unset]{margin:unset}[data-md-mx='0']{margin-left:0;margin-right:0}[data-md-mx='3']{margin-left:3px;margin-right:3px}[data-md-mx='6']{margin-left:6px;margin-right:6px}[data-md-mx='12']{margin-left:12px;margin-right:12px}[data-md-mx='24']{margin-left:24px;margin-right:24px}[data-md-mx='36']{margin-left:36px;margin-right:36px}[data-md-mx='48']{margin-left:48px;margin-right:48px}[data-md-mx='72']{margin-left:72px;margin-right:72px}[data-md-mx=auto]{margin-left:auto;margin-right:auto}[data-md-mx=unset]{margin-left:unset;margin-right:unset}[data-md-my='0']{margin-top:0;margin-bottom:0}[data-md-my='3']{margin-top:3px;margin-bottom:3px}[data-md-my='6']{margin-top:6px;margin-bottom:6px}[data-md-my='12']{margin-top:12px;margin-bottom:12px}[data-md-my='24']{margin-top:24px;margin-bottom:24px}[data-md-my='36']{margin-top:36px;margin-bottom:36px}[data-md-my='48']{margin-top:48px;margin-bottom:48px}[data-md-my='72']{margin-top:72px;margin-bottom:72px}[data-md-my=auto]{margin-top:auto;margin-bottom:auto}[data-md-my=unset]{margin-top:unset;margin-bottom:unset}[data-md-mt='0']{margin-top:0}[data-md-mt='3']{margin-top:3px}[data-md-mt='6']{margin-top:6px}[data-md-mt='12']{margin-top:12px}[data-md-mt='24']{margin-top:24px}[data-md-mt='36']{margin-top:36px}[data-md-mt='48']{margin-top:48px}[data-md-mt='72']{margin-top:72px}[data-md-mt=auto]{margin-top:auto}[data-md-mt=unset]{margin-top:unset}[data-md-mr='0']{margin-right:0}[data-md-mr='3']{margin-right:3px}[data-md-mr='6']{margin-right:6px}[data-md-mr='12']{margin-right:12px}[data-md-mr='24']{margin-right:24px}[data-md-mr='36']{margin-right:36px}[data-md-mr='48']{margin-right:48px}[data-md-mr='72']{margin-right:72px}[data-md-mr=auto]{margin-right:auto}[data-md-mr=unset]{margin-right:unset}[data-md-mb='0']{margin-bottom:0}[data-md-mb='3']{margin-bottom:3px}[data-md-mb='6']{margin-bottom:6px}[data-md-mb='12']{margin-bottom:12px}[data-md-mb='24']{margin-bottom:24px}[data-md-mb='36']{margin-bottom:36px}[data-md-mb='48']{margin-bottom:48px}[data-md-mb='72']{margin-bottom:72px}[data-md-mb=auto]{margin-bottom:auto}[data-md-mb=unset]{margin-bottom:unset}[data-md-ml='0']{margin-left:0}[data-md-ml='3']{margin-left:3px}[data-md-ml='6']{margin-left:6px}[data-md-ml='12']{margin-left:12px}[data-md-ml='24']{margin-left:24px}[data-md-ml='36']{margin-left:36px}[data-md-ml='48']{margin-left:48px}[data-md-ml='72']{margin-left:72px}[data-md-ml=auto]{margin-left:auto}[data-md-ml=unset]{margin-left:unset}}[data-lh='12']{line-height:12px}[data-lh='16']{line-height:16px}[data-lh='20']{line-height:20px}[data-lh='24']{line-height:24px}[data-lh='32']{line-height:32px}[data-lh='36']{line-height:36px}[data-lh=unset]{line-height:unsetpx}[data-ls='1']{letter-spacing:1px}[data-ls='2']{letter-spacing:2px}[data-ls='4']{letter-spacing:4px}[data-ls='6']{letter-spacing:6px}[data-ls='0.5']{letter-spacing:.5px}[data-ls='1.5']{letter-spacing:1.5px}[data-height='100%']{height:100%}[data-height=auto]{height:auto}[data-height=unset]{height:unset}@media (max-width:768px){[data-md-height='100%']{height:100%}[data-md-height=auto]{height:auto}[data-md-height=unset]{height:unset}}[data-gap='0']{gap:0}[data-gap='3']{gap:3px}[data-gap='6']{gap:6px}[data-gap='12']{gap:12px}[data-gap='24']{gap:24px}[data-gap='36']{gap:36px}[data-gap='48']{gap:48px}[data-gap='72']{gap:72px}[data-gap=auto]{gap:auto}[data-gap=unset]{gap:unset}@media (max-width:768px){[data-md-gap='0']{gap:0}[data-md-gap='3']{gap:3px}[data-md-gap='6']{gap:6px}[data-md-gap='12']{gap:12px}[data-md-gap='24']{gap:24px}[data-md-gap='36']{gap:36px}[data-md-gap='48']{gap:48px}[data-md-gap='72']{gap:72px}[data-md-gap=auto]{gap:auto}[data-md-gap=unset]{gap:unset}}[data-fw='300']{font-weight:300}[data-fw='400']{font-weight:400}[data-fw='500']{font-weight:500}[data-fw='700']{font-weight:700}[data-fw='900']{font-weight:900}[data-fw=unset]{font-weight:unset}[data-fs='12']{font-size:12px}[data-fs='14']{font-size:14px}[data-fs='16']{font-size:16px}[data-fs='20']{font-size:20px}[data-fs='24']{font-size:24px}[data-fs='32']{font-size:32px}[data-fs='36']{font-size:36px}@media (max-width:768px){[data-md-fs='12']{font-size:12px}[data-md-fs='14']{font-size:14px}[data-md-fs='16']{font-size:16px}[data-md-fs='20']{font-size:20px}[data-md-fs='24']{font-size:24px}[data-md-fs='32']{font-size:32px}[data-md-fs='36']{font-size:36px}}[data-color=white]{color:#f9fafb}[data-color=gray-100]{color:#f3f4f6}[data-color=gray-200]{color:#e5e7eb}[data-color=gray-300]{color:#d1d5db}[data-color=gray-400]{color:#9ca3af}[data-color=gray-500]{color:#6b7280}[data-color=gray-600]{color:#4b5563}[data-color=gray-700]{color:#374151}[data-color=gray-800]{color:#1f2937}[data-color=black]{color:#111827}[data-color=green-100]{color:#caebc5}[data-color=green-200]{color:#a7df9f}[data-color=green-300]{color:#85d279}[data-color=green-400]{color:#62c552}[data-color=green-500]{color:#48ac39}[data-color=green-600]{color:#38852c}[data-color=green-700]{color:#285f1f}[data-color=green-800]{color:#204c19}[data-color=red-100]{color:#f9d4d1}[data-color=red-200]{color:#f6b6b0}[data-color=red-300]{color:hsl(5,80%,72.5%)}[data-color=red-400]{color:hsl(5,80%,62.5%)}[data-color=red-500]{color:hsl(5,80%,52.5%)}[data-color=red-600]{color:#c02315}[data-color=red-700]{color:hsl(5,80%,32.5%)}[data-color=red-800]{color:hsl(5,80%,22.5%)}[data-color=orange-100]{color:#fad3b7}[data-color=orange-200]{color:#f7b587}[data-color=orange-300]{color:#f49857}[data-color=orange-400]{color:#f17b27}[data-color=orange-500]{color:#d7610d}[data-color=orange-600]{color:hsl(25,88%,37.5%)}[data-color=orange-700]{color:hsl(25,88%,27.5%)}[data-color=orange-800]{color:#5f2b06}[data-wrap=nowrap]{flex-wrap:nowrap}[data-wrap=wrap]{flex-wrap:wrap}[data-wrap=wrap-reverse]{flex-wrap:wrap-reverse}[data-wrap=unset]{flex-wrap:unset}@media (max-width:768px){[data-md-wrap=nowrap]{flex-wrap:nowrap}[data-md-wrap=wrap]{flex-wrap:wrap}[data-md-wrap=wrap-reverse]{flex-wrap:wrap-reverse}[data-md-wrap=unset]{flex-wrap:unset}}[data-shrink='0']{flex-shrink:0}[data-shrink=unset]{flex-shrink:unset}@media (max-width:768px){[data-md-shrink='0']{flex-shrink:0}[data-md-shrink=unset]{flex-shrink:unset}}[data-grow='1']{flex-grow:1}[data-grow=unset]{flex-grow:unset}@media (max-width:768px){[data-md-grow='1']{flex-grow:1}[data-md-grow=unset]{flex-grow:unset}}[data-direction=row]{flex-direction:row}[data-direction=row-reverse]{flex-direction:row-reverse}[data-direction=column]{flex-direction:column}[data-direction=column-reverse]{flex-direction:column-reverse}@media (max-width:768px){[data-md-direction=row]{flex-direction:row}[data-md-direction=row-reverse]{flex-direction:row-reverse}[data-md-direction=column]{flex-direction:column}[data-md-direction=column-reverse]{flex-direction:column-reverse}}[data-display=flex]{display:flex;flex-wrap:wrap}[data-display=block]{display:block}[data-display=inline-block]{display:inline-block}[data-display=none]{display:none}@media (max-width:768px){[data-md-display=flex]{display:flex;flex-wrap:wrap}[data-md-display=block]{display:block}[data-md-display=inline-block]{display:inline-block}[data-md-display=none]{display:none}}[data-cursor=wait]{cursor:wait}[data-cursor=auto]{cursor:auto}[data-cursor=pointer]{cursor:pointer}[data-cursor=not-allowed]{cursor:not-allowed}@media (max-width:768px){[data-md-cursor=wait]{cursor:wait}[data-md-cursor=auto]{cursor:auto}[data-md-cursor=pointer]{cursor:pointer}[data-md-cursor=not-allowed]{cursor:not-allowed}}[data-bw='1']{border-width:1px}[data-bw='2']{border-width:2px}[data-bw='4']{border-width:4px}[data-bw='6']{border-width:6px}[data-bw='12']{border-width:12px}[data-bwx='1']{border-left-width:1px;border-right-width:1px}[data-bwx='2']{border-left-width:2px;border-right-width:2px}[data-bwx='4']{border-left-width:4px;border-right-width:4px}[data-bwx='6']{border-left-width:6px;border-right-width:6px}[data-bwx='12']{border-left-width:12px;border-right-width:12px}[data-bwy='1']{border-top-width:1px;border-bottom-width:1px}[data-bwy='2']{border-top-width:2px;border-bottom-width:2px}[data-bwy='4']{border-top-width:4px;border-bottom-width:4px}[data-bwy='6']{border-top-width:6px;border-bottom-width:6px}[data-bwy='12']{border-top-width:12px;border-bottom-width:12px}[data-bwt='1']{border-top-width:1px}[data-bwt='2']{border-top-width:2px}[data-bwt='4']{border-top-width:4px}[data-bwt='6']{border-top-width:6px}[data-bwt='12']{border-top-width:12px}[data-bwr='1']{border-right-width:1px}[data-bwr='2']{border-right-width:2px}[data-bwr='4']{border-right-width:4px}[data-bwr='6']{border-right-width:6px}[data-bwr='12']{border-right-width:12px}[data-bwb='1']{border-bottom-width:1px}[data-bwb='2']{border-bottom-width:2px}[data-bwb='4']{border-bottom-width:4px}[data-bwb='6']{border-bottom-width:6px}[data-bwb='12']{border-bottom-width:12px}[data-bwl='1']{border-left-width:1px}[data-bwl='2']{border-left-width:2px}[data-bwl='4']{border-left-width:4px}[data-bwl='6']{border-left-width:6px}[data-bwl='12']{border-left-width:12px}[data-br='0']{border-radius:0}[data-br='1']{border-radius:1px}[data-br='2']{border-radius:2px}[data-br='4']{border-radius:4px}[data-br='50%']{border-radius:50%}[data-bc=white]{border-color:#f9fafb;border-style:solid}[data-bc=gray-100]{border-color:#f3f4f6;border-style:solid}[data-bc=gray-200]{border-color:#e5e7eb;border-style:solid}[data-bc=gray-300]{border-color:#d1d5db;border-style:solid}[data-bc=gray-400]{border-color:#9ca3af;border-style:solid}[data-bc=gray-500]{border-color:#6b7280;border-style:solid}[data-bc=gray-600]{border-color:#4b5563;border-style:solid}[data-bc=gray-700]{border-color:#374151;border-style:solid}[data-bc=gray-800]{border-color:#1f2937;border-style:solid}[data-bc=black]{border-color:#111827;border-style:solid}[data-bc=transparent]{border-color:transparent;border-style:solid}[data-bc=green-100]{border-color:#caebc5;border-style:solid}[data-bc=green-200]{border-color:#a7df9f;border-style:solid}[data-bc=green-300]{border-color:#85d279;border-style:solid}[data-bc=green-400]{border-color:#62c552;border-style:solid}[data-bc=green-500]{border-color:#48ac39;border-style:solid}[data-bc=green-600]{border-color:#38852c;border-style:solid}[data-bc=green-700]{border-color:#285f1f;border-style:solid}[data-bc=green-800]{border-color:#204c19;border-style:solid}[data-bc=orange-100]{border-color:#fad3b7;border-style:solid}[data-bc=orange-200]{border-color:#f7b587;border-style:solid}[data-bc=orange-300]{border-color:#f49857;border-style:solid}[data-bc=orange-400]{border-color:#f17b27;border-style:solid}[data-bc=orange-500]{border-color:#d7610d;border-style:solid}[data-bc=orange-600]{border-color:hsl(25,88%,37.5%);border-style:solid}[data-bc=orange-700]{border-color:hsl(25,88%,27.5%);border-style:solid}[data-bc=orange-800]{border-color:#5f2b06;border-style:solid}[data-bc=red-100]{border-color:#f9d4d1;border-style:solid}[data-bc=red-200]{border-color:#f6b6b0;border-style:solid}[data-bc=red-300]{border-color:hsl(5,80%,72.5%);border-style:solid}[data-bc=red-400]{border-color:hsl(5,80%,62.5%);border-style:solid}[data-bc=red-500]{border-color:hsl(5,80%,52.5%);border-style:solid}[data-bc=red-600]{border-color:#c02315;border-style:solid}[data-bc=red-700]{border-color:hsl(5,80%,32.5%);border-style:solid}[data-bc=red-800]{border-color:hsl(5,80%,22.5%);border-style:solid}[data-bcx=white]{border-right-color:#f9fafb;border-left-color:#f9fafb;border-right-style:solid;border-left-style:solid}[data-bcx=gray-100]{border-right-color:#f3f4f6;border-left-color:#f3f4f6;border-right-style:solid;border-left-style:solid}[data-bcx=gray-200]{border-right-color:#e5e7eb;border-left-color:#e5e7eb;border-right-style:solid;border-left-style:solid}[data-bcx=gray-300]{border-right-color:#d1d5db;border-left-color:#d1d5db;border-right-style:solid;border-left-style:solid}[data-bcx=gray-400]{border-right-color:#9ca3af;border-left-color:#9ca3af;border-right-style:solid;border-left-style:solid}[data-bcx=gray-500]{border-right-color:#6b7280;border-left-color:#6b7280;border-right-style:solid;border-left-style:solid}[data-bcx=gray-600]{border-right-color:#4b5563;border-left-color:#4b5563;border-right-style:solid;border-left-style:solid}[data-bcx=gray-700]{border-right-color:#374151;border-left-color:#374151;border-right-style:solid;border-left-style:solid}[data-bcx=gray-800]{border-right-color:#1f2937;border-left-color:#1f2937;border-right-style:solid;border-left-style:solid}[data-bcx=black]{border-right-color:#111827;border-left-color:#111827;border-right-style:solid;border-left-style:solid}[data-bcx=transparent]{border-right-color:transparent;border-left-color:transparent;border-right-style:solid;border-left-style:solid}[data-bcy=white]{border-top-color:#f9fafb;border-bottom-color:#f9fafb;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-100]{border-top-color:#f3f4f6;border-bottom-color:#f3f4f6;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-200]{border-top-color:#e5e7eb;border-bottom-color:#e5e7eb;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-300]{border-top-color:#d1d5db;border-bottom-color:#d1d5db;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-400]{border-top-color:#9ca3af;border-bottom-color:#9ca3af;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-500]{border-top-color:#6b7280;border-bottom-color:#6b7280;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-600]{border-top-color:#4b5563;border-bottom-color:#4b5563;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-700]{border-top-color:#374151;border-bottom-color:#374151;border-top-style:solid;border-bottom-style:solid}[data-bcy=gray-800]{border-top-color:#1f2937;border-bottom-color:#1f2937;border-top-style:solid;border-bottom-style:solid}[data-bcy=black]{border-top-color:#111827;border-bottom-color:#111827;border-top-style:solid;border-bottom-style:solid}[data-bcy=transparent]{border-top-color:transparent;border-bottom-color:transparent;border-top-style:solid;border-bottom-style:solid}[data-bct=white]{border-top-color:#f9fafb;border-top-style:solid}[data-bct=gray-100]{border-top-color:#f3f4f6;border-top-style:solid}[data-bct=gray-200]{border-top-color:#e5e7eb;border-top-style:solid}[data-bct=gray-300]{border-top-color:#d1d5db;border-top-style:solid}[data-bct=gray-400]{border-top-color:#9ca3af;border-top-style:solid}[data-bct=gray-500]{border-top-color:#6b7280;border-top-style:solid}[data-bct=gray-600]{border-top-color:#4b5563;border-top-style:solid}[data-bct=gray-700]{border-top-color:#374151;border-top-style:solid}[data-bct=gray-800]{border-top-color:#1f2937;border-top-style:solid}[data-bct=black]{border-top-color:#111827;border-top-style:solid}[data-bct=transparent]{border-top-color:transparent;border-top-style:solid}[data-bcr=white]{border-right-color:#f9fafb;border-right-style:solid}[data-bcr=gray-100]{border-right-color:#f3f4f6;border-right-style:solid}[data-bcr=gray-200]{border-right-color:#e5e7eb;border-right-style:solid}[data-bcr=gray-300]{border-right-color:#d1d5db;border-right-style:solid}[data-bcr=gray-400]{border-right-color:#9ca3af;border-right-style:solid}[data-bcr=gray-500]{border-right-color:#6b7280;border-right-style:solid}[data-bcr=gray-600]{border-right-color:#4b5563;border-right-style:solid}[data-bcr=gray-700]{border-right-color:#374151;border-right-style:solid}[data-bcr=gray-800]{border-right-color:#1f2937;border-right-style:solid}[data-bcr=black]{border-right-color:#111827;border-right-style:solid}[data-bcr=transparent]{border-right-color:transparent;border-right-style:solid}[data-bcb=white]{border-bottom-color:#f9fafb;border-bottom-style:solid}[data-bcb=gray-100]{border-bottom-color:#f3f4f6;border-bottom-style:solid}[data-bcb=gray-200]{border-bottom-color:#e5e7eb;border-bottom-style:solid}[data-bcb=gray-300]{border-bottom-color:#d1d5db;border-bottom-style:solid}[data-bcb=gray-400]{border-bottom-color:#9ca3af;border-bottom-style:solid}[data-bcb=gray-500]{border-bottom-color:#6b7280;border-bottom-style:solid}[data-bcb=gray-600]{border-bottom-color:#4b5563;border-bottom-style:solid}[data-bcb=gray-700]{border-bottom-color:#374151;border-bottom-style:solid}[data-bcb=gray-800]{border-bottom-color:#1f2937;border-bottom-style:solid}[data-bcb=black]{border-bottom-color:#111827;border-bottom-style:solid}[data-bcb=transparent]{border-bottom-color:transparent;border-bottom-style:solid}[data-bcl=white]{border-left-color:#f9fafb;border-left-style:solid}[data-bcl=gray-100]{border-left-color:#f3f4f6;border-left-style:solid}[data-bcl=gray-200]{border-left-color:#e5e7eb;border-left-style:solid}[data-bcl=gray-300]{border-left-color:#d1d5db;border-left-style:solid}[data-bcl=gray-400]{border-left-color:#9ca3af;border-left-style:solid}[data-bcl=gray-500]{border-left-color:#6b7280;border-left-style:solid}[data-bcl=gray-600]{border-left-color:#4b5563;border-left-style:solid}[data-bcl=gray-700]{border-left-color:#374151;border-left-style:solid}[data-bcl=gray-800]{border-left-color:#1f2937;border-left-style:solid}[data-bcl=black]{border-left-color:#111827;border-left-style:solid}[data-bcl=transparent]{border-left-color:transparent;border-left-style:solid}[data-bg=white]{background-color:#f9fafb}[data-bg=gray-100]{background-color:#f3f4f6}[data-bg=gray-200]{background-color:#e5e7eb}[data-bg=gray-300]{background-color:#d1d5db}[data-bg=gray-400]{background-color:#9ca3af}[data-bg=gray-500]{background-color:#6b7280}[data-bg=gray-600]{background-color:#4b5563}[data-bg=gray-700]{background-color:#374151}[data-bg=gray-800]{background-color:#1f2937}[data-bg=black]{background-color:#111827}[data-bg=green-100]{background-color:#caebc5}[data-bg=green-200]{background-color:#a7df9f}[data-bg=green-300]{background-color:#85d279}[data-bg=green-400]{background-color:#62c552}[data-bg=green-500]{background-color:#48ac39}[data-bg=green-600]{background-color:#38852c}[data-bg=green-700]{background-color:#285f1f}[data-bg=green-800]{background-color:#204c19}[data-bg=red-100]{background-color:#f9d4d1}[data-bg=red-200]{background-color:#f6b6b0}[data-bg=red-300]{background-color:hsl(5,80%,72.5%)}[data-bg=red-400]{background-color:hsl(5,80%,62.5%)}[data-bg=red-500]{background-color:hsl(5,80%,52.5%)}[data-bg=red-600]{background-color:#c02315}[data-bg=red-700]{background-color:hsl(5,80%,32.5%)}[data-bg=red-800]{background-color:hsl(5,80%,22.5%)}[data-bg=orange-100]{background-color:#fad3b7}[data-bg=orange-200]{background-color:#f7b587}[data-bg=orange-300]{background-color:#f49857}[data-bg=orange-400]{background-color:#f17b27}[data-bg=orange-500]{background-color:#d7610d}[data-bg=orange-600]{background-color:hsl(25,88%,37.5%)}[data-bg=orange-700]{background-color:hsl(25,88%,27.5%)}[data-bg=orange-800]{background-color:#5f2b06}[data-backdrop=black]::backdrop{background:rgba(0,0,0,.75)}[data-backdrop=none]::backdrop{background:0 0}[data-main=start]{justify-content:flex-start}[data-main=end]{justify-content:flex-end}[data-main=around]{justify-content:space-around}[data-main=evenly]{justify-content:space-evenly}[data-main=between]{justify-content:space-between}[data-main=center]{justify-content:center}[data-main=baseline]{justify-content:baseline}[data-cross=start]{align-items:flex-start}[data-cross=end]{align-items:flex-end}[data-cross=around]{align-items:space-around}[data-cross=evenly]{align-items:space-evenly}[data-cross=between]{align-items:space-between}[data-cross=center]{align-items:center}[data-cross=baseline]{align-items:baseline}[data-self=start]{align-self:flex-start}[data-self=end]{align-self:flex-end}[data-self=center]{align-self:center}[data-self=baseline]{align-self:baseline}@media (max-width:768px){[data-md-main=start]{justify-content:flex-start}[data-md-main=end]{justify-content:flex-end}[data-md-main=around]{justify-content:space-around}[data-md-main=evenly]{justify-content:space-evenly}[data-md-main=between]{justify-content:space-between}[data-md-main=center]{justify-content:center}[data-md-main=baseline]{justify-content:baseline}[data-md-cross=start]{align-items:flex-start}[data-md-cross=end]{align-items:flex-end}[data-md-cross=around]{align-items:space-around}[data-md-cross=evenly]{align-items:space-evenly}[data-md-cross=between]{align-items:space-between}[data-md-cross=center]{align-items:center}[data-md-cross=baseline]{align-items:baseline}[data-md-self=start]{align-self:flex-start}[data-md-self=end]{align-self:flex-end}[data-md-self=center]{align-self:center}[data-md-self=baseline]{align-self:baseline}}
|
package/dist/main.min.css.br
CHANGED
|
Binary file
|
package/dist/main.min.css.gz
CHANGED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bgord/design",
|
|
3
|
-
"version": "0.29.
|
|
3
|
+
"version": "0.29.2",
|
|
4
4
|
"author": "Bartosz Gordon",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/bgord-design.esm.js",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"@types/bun": "1.2.18",
|
|
12
12
|
"@types/lodash": "4.17.20",
|
|
13
13
|
"clean-css-cli": "5.6.3",
|
|
14
|
-
"cspell": "9.1.
|
|
14
|
+
"cspell": "9.1.5",
|
|
15
15
|
"doiuse": "6.0.5",
|
|
16
16
|
"gzip-cli": "1.2.0",
|
|
17
17
|
"knip": "5.61.3",
|
package/readme.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# bgord-design
|
|
2
|
+
|
|
3
|
+
## Configuration:
|
|
4
|
+
|
|
5
|
+
Clone the repository
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
git clone git@github.com:bgord/journal.git --recurse-submodules
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Install packages
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
bun i
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Run the tests
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
./bgord-scripts/test-run.sh
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Files:
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
src/
|
|
27
|
+
├── animations
|
|
28
|
+
│ ├── grow-fade-in.css
|
|
29
|
+
│ └── shrink-fade-out.css
|
|
30
|
+
├── generate-css.ts
|
|
31
|
+
├── generator.ts
|
|
32
|
+
├── generators
|
|
33
|
+
│ ├── axis-placements-generator.ts
|
|
34
|
+
│ ├── backdrops-generator.ts
|
|
35
|
+
│ ├── backgrounds-generator.ts
|
|
36
|
+
│ ├── border-colors-generator.ts
|
|
37
|
+
│ ├── border-radiuses-generator.ts
|
|
38
|
+
│ ├── border-widths-generator.ts
|
|
39
|
+
│ ├── cursors-generator.ts
|
|
40
|
+
│ ├── displays-generator.ts
|
|
41
|
+
│ ├── flex-directions-generator.ts
|
|
42
|
+
│ ├── flex-grows-generator.ts
|
|
43
|
+
│ ├── flex-shrinks-generator.ts
|
|
44
|
+
│ ├── flex-wraps-generator.ts
|
|
45
|
+
│ ├── font-colors-generator.ts
|
|
46
|
+
│ ├── font-size-generator.ts
|
|
47
|
+
│ ├── font-weight-generator.ts
|
|
48
|
+
│ ├── gap-generator.ts
|
|
49
|
+
│ ├── heights-generator.ts
|
|
50
|
+
│ ├── letter-spacings-generator.ts
|
|
51
|
+
│ ├── line-height-generator.ts
|
|
52
|
+
│ ├── margins-generator.ts
|
|
53
|
+
│ ├── max-heights-generator.ts
|
|
54
|
+
│ ├── max-widths-generator.ts
|
|
55
|
+
│ ├── object-fits-generator.ts
|
|
56
|
+
│ ├── object-positions-generator.ts
|
|
57
|
+
│ ├── overflows-generator.ts
|
|
58
|
+
│ ├── paddings-generator.ts
|
|
59
|
+
│ ├── pointer-events-generator.ts
|
|
60
|
+
│ ├── positioners-generator.ts
|
|
61
|
+
│ ├── positions-generator.ts
|
|
62
|
+
│ ├── rotates-generator.ts
|
|
63
|
+
│ ├── shadows-generator.ts
|
|
64
|
+
│ ├── transforms-generator.ts
|
|
65
|
+
│ ├── widths-generator.ts
|
|
66
|
+
│ └── z-index-generator.ts
|
|
67
|
+
├── interactions
|
|
68
|
+
│ ├── grow.css
|
|
69
|
+
│ ├── rotate-into-focus.css
|
|
70
|
+
│ └── subtle-scale.css
|
|
71
|
+
├── normalize.css
|
|
72
|
+
├── rules
|
|
73
|
+
│ ├── button-empty-content.css
|
|
74
|
+
│ ├── button-icon-title.css
|
|
75
|
+
│ ├── focusable-hidden-element.css
|
|
76
|
+
│ ├── image-alt.css
|
|
77
|
+
│ ├── input-missing-id.css
|
|
78
|
+
│ ├── input-missing-name.css
|
|
79
|
+
│ ├── invalid-list-element.css
|
|
80
|
+
│ ├── link-empty-href.css
|
|
81
|
+
│ ├── target-blank-referer.css
|
|
82
|
+
│ └── title-truncate.css
|
|
83
|
+
├── tokens.ts
|
|
84
|
+
└── ui
|
|
85
|
+
├── badge.css
|
|
86
|
+
├── button.css
|
|
87
|
+
├── checkbox.css
|
|
88
|
+
├── file-explorer.css
|
|
89
|
+
├── input.css
|
|
90
|
+
├── label.css
|
|
91
|
+
├── link.css
|
|
92
|
+
├── range.css
|
|
93
|
+
├── select.css
|
|
94
|
+
├── switch.css
|
|
95
|
+
├── textarea.css
|
|
96
|
+
└── visually-hidden.css
|
|
97
|
+
```
|
|
98
|
+
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/* grow-fade-in animation */
|
|
2
|
+
|
|
3
|
+
@keyframes grow-fade-in {
|
|
4
|
+
from {
|
|
5
|
+
opacity: 0.5;
|
|
6
|
+
scale: 0.9;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
to {
|
|
10
|
+
opacity: 1;
|
|
11
|
+
scale: 1;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
[data-exit="grow-fade-in"] {
|
|
16
|
+
animation: grow-fade-in 140ms ease forwards;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* ===================== */
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* shrink-fade-out animation */
|
|
2
|
+
|
|
3
|
+
@keyframes shrink-fade-out {
|
|
4
|
+
/* 140 ms → fade + scale */
|
|
5
|
+
to {
|
|
6
|
+
opacity: 0;
|
|
7
|
+
scale: 0.9;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
[data-exit="shrink-fade-out"] {
|
|
12
|
+
animation: shrink-fade-out 140ms ease forwards;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* ===================== */
|
package/src/generate-css.ts
CHANGED
|
@@ -26,6 +26,13 @@ class GeneratorProcessor {
|
|
|
26
26
|
output += await Bun.file("src/rules/button-icon-title.css").text();
|
|
27
27
|
output += await Bun.file("src/rules/invalid-list-element.css").text();
|
|
28
28
|
|
|
29
|
+
output += await Bun.file("src/interactions/grow.css").text();
|
|
30
|
+
output += await Bun.file("src/interactions/rotate-into-focus.css").text();
|
|
31
|
+
output += await Bun.file("src/interactions/subtle-scale.css").text();
|
|
32
|
+
|
|
33
|
+
output += await Bun.file("src/animations/shrink-fade-out.css").text();
|
|
34
|
+
output += await Bun.file("src/animations/grow-fade-in.css").text();
|
|
35
|
+
|
|
29
36
|
for (const generator of generators) {
|
|
30
37
|
output += generator.generateHeader();
|
|
31
38
|
output += generator.generateCss();
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/* rotate-into-focus interaction */
|
|
2
|
+
|
|
3
|
+
[data-interaction="rotate-into-focus"] {
|
|
4
|
+
transition:
|
|
5
|
+
transform 0.2s ease-in-out,
|
|
6
|
+
box-shadow 0.2s ease-in-out;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
[data-interaction="rotate-into-focus"]:hover {
|
|
10
|
+
transform: scale(1.05);
|
|
11
|
+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
[data-interaction="rotate-into-focus"]:active {
|
|
15
|
+
transform: scale(1.05);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-interaction="rotate-into-focus"] > * {
|
|
19
|
+
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
[data-interaction="rotate-into-focus"]:hover > * {
|
|
23
|
+
transform: rotate(90deg);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* ===================== */
|
package/README.md
DELETED
|
@@ -1,518 +0,0 @@
|
|
|
1
|
-
# @bgord/design
|
|
2
|
-
|
|
3
|
-
Breakpoints
|
|
4
|
-
|
|
5
|
-
| Definition | Value |
|
|
6
|
-
| ---------- | ------------------------------ |
|
|
7
|
-
| data-md-\* | @media (max-width: ${value}px) |
|
|
8
|
-
|
|
9
|
-
| Key | Value |
|
|
10
|
-
| --- | :-----------------------: |
|
|
11
|
-
| 768 | @media (max-width: 768px) |
|
|
12
|
-
|
|
13
|
-
> You can use almost all design tokens after `data-md`, e.g `data-md-mx`.
|
|
14
|
-
|
|
15
|
-
## Margins
|
|
16
|
-
|
|
17
|
-
| Definition | Value |
|
|
18
|
-
| ---------- | ------------------- |
|
|
19
|
-
| data-m | margin |
|
|
20
|
-
| data-mx | margin-{left,right} |
|
|
21
|
-
| data-my | margin-{top,bottom} |
|
|
22
|
-
| data-mt | margin-top |
|
|
23
|
-
| data-mr | margin-right |
|
|
24
|
-
| data-mb | margin-bottom |
|
|
25
|
-
| data-ml | margin-left |
|
|
26
|
-
|
|
27
|
-
| Key | Value |
|
|
28
|
-
| ----- | :---: |
|
|
29
|
-
| 0 | 0 |
|
|
30
|
-
| 3 | 3px |
|
|
31
|
-
| 6 | 6px |
|
|
32
|
-
| 12 | 12px |
|
|
33
|
-
| 24 | 24px |
|
|
34
|
-
| 36 | 36px |
|
|
35
|
-
| 48 | 48px |
|
|
36
|
-
| 72 | 72px |
|
|
37
|
-
| auto | auto |
|
|
38
|
-
| unset | unset |
|
|
39
|
-
|
|
40
|
-
## Paddings
|
|
41
|
-
|
|
42
|
-
| Definition | Value |
|
|
43
|
-
| ---------- | ---------------------- |
|
|
44
|
-
| data-p | padding |
|
|
45
|
-
| data-px | padding-{left,padding} |
|
|
46
|
-
| data-py | padding-{top,bottom} |
|
|
47
|
-
| data-pt | padding-top |
|
|
48
|
-
| data-pr | padding-right |
|
|
49
|
-
| data-pb | padding-bottom |
|
|
50
|
-
| data-pl | padding-left |
|
|
51
|
-
|
|
52
|
-
| Key | Value |
|
|
53
|
-
| ----- | :---: |
|
|
54
|
-
| | |
|
|
55
|
-
| 0 | 0 |
|
|
56
|
-
| 3 | 3px |
|
|
57
|
-
| 6 | 6px |
|
|
58
|
-
| 12 | 12px |
|
|
59
|
-
| 24 | 24px |
|
|
60
|
-
| 36 | 36px |
|
|
61
|
-
| 48 | 48px |
|
|
62
|
-
| 72 | 72px |
|
|
63
|
-
| auto | auto |
|
|
64
|
-
| unset | unset |
|
|
65
|
-
|
|
66
|
-
## Displays
|
|
67
|
-
|
|
68
|
-
| Definition | Value |
|
|
69
|
-
| ------------ | ------- |
|
|
70
|
-
| data-display | display |
|
|
71
|
-
|
|
72
|
-
| Key | Value |
|
|
73
|
-
| ------------ | :----------: |
|
|
74
|
-
| | |
|
|
75
|
-
| flex | flex |
|
|
76
|
-
| block | block |
|
|
77
|
-
| inline-block | inline-block |
|
|
78
|
-
| none | none |
|
|
79
|
-
|
|
80
|
-
## Axis placements
|
|
81
|
-
|
|
82
|
-
| Definition | Value |
|
|
83
|
-
| ---------- | --------------- |
|
|
84
|
-
| data-main | justify-content |
|
|
85
|
-
| data-cross | align-items |
|
|
86
|
-
| data-self | align-items |
|
|
87
|
-
|
|
88
|
-
| Key | Value | Available for data-self |
|
|
89
|
-
| -------- | :-----------: | :---------------------: |
|
|
90
|
-
| start | flex-start | yes |
|
|
91
|
-
| end | flex-end | yes |
|
|
92
|
-
| around | space-around | no |
|
|
93
|
-
| between | space-between | no |
|
|
94
|
-
| evenly | space-evenly | no |
|
|
95
|
-
| center | center | yes |
|
|
96
|
-
| baseline | baseline | yes |
|
|
97
|
-
|
|
98
|
-
## Positions
|
|
99
|
-
|
|
100
|
-
| Definition | Value |
|
|
101
|
-
| ------------- | -------- |
|
|
102
|
-
| data-position | position |
|
|
103
|
-
|
|
104
|
-
| Key | Value |
|
|
105
|
-
| -------- | :------: |
|
|
106
|
-
| static | static |
|
|
107
|
-
| relative | relative |
|
|
108
|
-
| absolute | absolute |
|
|
109
|
-
| fixed | fixed |
|
|
110
|
-
| sticky | sticky |
|
|
111
|
-
| unset | unset |
|
|
112
|
-
|
|
113
|
-
## Flex wraps
|
|
114
|
-
|
|
115
|
-
| Definition | Value |
|
|
116
|
-
| ---------- | --------- |
|
|
117
|
-
| data-wrap | flex-wrap |
|
|
118
|
-
|
|
119
|
-
| Key | Value |
|
|
120
|
-
| ------------ | :----------: |
|
|
121
|
-
| nowrap | nowrap |
|
|
122
|
-
| wrap | wrap |
|
|
123
|
-
| wrap-reverse | wrap-reverse |
|
|
124
|
-
| unset | unset |
|
|
125
|
-
|
|
126
|
-
## Z indexes
|
|
127
|
-
|
|
128
|
-
| Definition | Value |
|
|
129
|
-
| ---------- | ------- |
|
|
130
|
-
| data-z | z-index |
|
|
131
|
-
|
|
132
|
-
| Key | Value |
|
|
133
|
-
| --- | :---: |
|
|
134
|
-
| -1 | -1 |
|
|
135
|
-
| 0 | 0 |
|
|
136
|
-
| 1 | 1 |
|
|
137
|
-
| 2 | 2 |
|
|
138
|
-
| 3 | 3 |
|
|
139
|
-
|
|
140
|
-
## Widths
|
|
141
|
-
|
|
142
|
-
| Definition | Value |
|
|
143
|
-
| ---------- | ----- |
|
|
144
|
-
| data-width | width |
|
|
145
|
-
|
|
146
|
-
| Key | Value |
|
|
147
|
-
| ----- | :---: |
|
|
148
|
-
| 100% | 100% |
|
|
149
|
-
| auto | auto |
|
|
150
|
-
| unset | unset |
|
|
151
|
-
|
|
152
|
-
## Font sizes
|
|
153
|
-
|
|
154
|
-
| Definition | Value |
|
|
155
|
-
| ---------- | --------- |
|
|
156
|
-
| data-fs | font-size |
|
|
157
|
-
|
|
158
|
-
| Key | Value |
|
|
159
|
-
| --- | :---: |
|
|
160
|
-
| 12 | 12 |
|
|
161
|
-
| 14 | 14 |
|
|
162
|
-
| 16 | 16 |
|
|
163
|
-
| 20 | 20 |
|
|
164
|
-
| 24 | 24 |
|
|
165
|
-
| 32 | 32 |
|
|
166
|
-
| 36 | 36 |
|
|
167
|
-
|
|
168
|
-
## Font weights
|
|
169
|
-
|
|
170
|
-
| Definition | Value |
|
|
171
|
-
| ---------- | ----------- |
|
|
172
|
-
| data-fw | font-weight |
|
|
173
|
-
|
|
174
|
-
| Key | Value |
|
|
175
|
-
| ----- | :---: |
|
|
176
|
-
| 300 | 300 |
|
|
177
|
-
| 400 | 400 |
|
|
178
|
-
| 500 | 500 |
|
|
179
|
-
| 700 | 700 |
|
|
180
|
-
| 900 | 900 |
|
|
181
|
-
| unset | unset |
|
|
182
|
-
|
|
183
|
-
## Font colors
|
|
184
|
-
|
|
185
|
-
| Definition | Value |
|
|
186
|
-
| ---------- | ----- |
|
|
187
|
-
| data-color | color |
|
|
188
|
-
|
|
189
|
-
Possible values: see the Colors section.
|
|
190
|
-
|
|
191
|
-
## Line heights
|
|
192
|
-
|
|
193
|
-
| Definition | Value |
|
|
194
|
-
| ---------- | ----------- |
|
|
195
|
-
| data-lh | line-height |
|
|
196
|
-
|
|
197
|
-
| Key | Value |
|
|
198
|
-
| ----- | :---: |
|
|
199
|
-
| 12 | 12 |
|
|
200
|
-
| 16 | 16 |
|
|
201
|
-
| 20 | 20 |
|
|
202
|
-
| 24 | 24 |
|
|
203
|
-
| 32 | 32 |
|
|
204
|
-
| 36 | 36 |
|
|
205
|
-
| unset | unset |
|
|
206
|
-
|
|
207
|
-
## Flex directions
|
|
208
|
-
|
|
209
|
-
| Definition | Value |
|
|
210
|
-
| -------------- | -------------- |
|
|
211
|
-
| data-direction | flex-direction |
|
|
212
|
-
|
|
213
|
-
| Key | Value |
|
|
214
|
-
| -------------- | :------------: |
|
|
215
|
-
| row | row |
|
|
216
|
-
| row-reverse | row-reverse |
|
|
217
|
-
| column | column |
|
|
218
|
-
| column-reverse | column-reverse |
|
|
219
|
-
|
|
220
|
-
## Letter spacings
|
|
221
|
-
|
|
222
|
-
| Definition | Value |
|
|
223
|
-
| ---------- | -------------- |
|
|
224
|
-
| data-ls | letter-spacing |
|
|
225
|
-
|
|
226
|
-
| Key | Value |
|
|
227
|
-
| --- | :---: |
|
|
228
|
-
| 0.5 | 0.5 |
|
|
229
|
-
| 1 | 1 |
|
|
230
|
-
| 1.5 | 1.5 |
|
|
231
|
-
| 2 | 2 |
|
|
232
|
-
|
|
233
|
-
## Flex grows
|
|
234
|
-
|
|
235
|
-
| Definition | Value |
|
|
236
|
-
| ---------- | --------- |
|
|
237
|
-
| data-grow | flex-grow |
|
|
238
|
-
|
|
239
|
-
| Key | Value |
|
|
240
|
-
| ----- | :---: |
|
|
241
|
-
| 1 | 1 |
|
|
242
|
-
| unset | unset |
|
|
243
|
-
|
|
244
|
-
## Flex shrinks
|
|
245
|
-
|
|
246
|
-
| Definition | Value |
|
|
247
|
-
| ----------- | ----------- |
|
|
248
|
-
| data-shrink | flex-shrink |
|
|
249
|
-
|
|
250
|
-
| Key | Value |
|
|
251
|
-
| ----- | :---: |
|
|
252
|
-
| 0 | 0 |
|
|
253
|
-
| unset | unset |
|
|
254
|
-
|
|
255
|
-
## Border widths
|
|
256
|
-
|
|
257
|
-
| Definition | Value |
|
|
258
|
-
| ---------- | ------------------------- |
|
|
259
|
-
| data-bw | border-width |
|
|
260
|
-
| data-bwx | border-width-{right,left} |
|
|
261
|
-
| data-bwy | border-width-{top,bottom} |
|
|
262
|
-
| data-bwt | border-width-top |
|
|
263
|
-
| data-bwr | border-width-right |
|
|
264
|
-
| data-bwb | border-width-bottom |
|
|
265
|
-
| data-bwl | border-width-left |
|
|
266
|
-
|
|
267
|
-
| Key | Value |
|
|
268
|
-
| --- | :---: |
|
|
269
|
-
| 1 | 1 |
|
|
270
|
-
| 2 | 2 |
|
|
271
|
-
| 4 | 4 |
|
|
272
|
-
| 6 | 6 |
|
|
273
|
-
| 12 | 12 |
|
|
274
|
-
|
|
275
|
-
## Border radiuses
|
|
276
|
-
|
|
277
|
-
| Definition | Value |
|
|
278
|
-
| ---------- | ------------- |
|
|
279
|
-
| data-br | border-radius |
|
|
280
|
-
|
|
281
|
-
| Key | Value |
|
|
282
|
-
| --- | :---: |
|
|
283
|
-
| 0 | 0 |
|
|
284
|
-
| 1 | 1px |
|
|
285
|
-
| 2 | 2px |
|
|
286
|
-
| 4 | 4px |
|
|
287
|
-
| 50% | 50% |
|
|
288
|
-
|
|
289
|
-
## Max widths
|
|
290
|
-
|
|
291
|
-
| Definition | Value |
|
|
292
|
-
| -------------- | --------- |
|
|
293
|
-
| data-max-width | max-width |
|
|
294
|
-
|
|
295
|
-
| Key | Value |
|
|
296
|
-
| ----- | :----: |
|
|
297
|
-
| 100% | 100% |
|
|
298
|
-
| 1296 | 1296px |
|
|
299
|
-
| 768 | 768px |
|
|
300
|
-
| 528 | 528px |
|
|
301
|
-
| 320 | 320px |
|
|
302
|
-
| unset | unset |
|
|
303
|
-
|
|
304
|
-
## Transforms
|
|
305
|
-
|
|
306
|
-
| Definition | Value |
|
|
307
|
-
| -------------- | -------------- |
|
|
308
|
-
| data-direction | flex-direction |
|
|
309
|
-
|
|
310
|
-
| Key | Value |
|
|
311
|
-
| ----------- | :---------: |
|
|
312
|
-
| uppercase | uppercase |
|
|
313
|
-
| lowercase | lowercase |
|
|
314
|
-
| capitalize | capitalize |
|
|
315
|
-
| upper-first | upper-first |
|
|
316
|
-
| truncate | truncate |
|
|
317
|
-
| center | center |
|
|
318
|
-
| none | none |
|
|
319
|
-
|
|
320
|
-
## Overflows
|
|
321
|
-
|
|
322
|
-
| Definition | Value |
|
|
323
|
-
| ------------- | -------- |
|
|
324
|
-
| data-overflow | overflow |
|
|
325
|
-
|
|
326
|
-
| Key | Value |
|
|
327
|
-
| ------ | :----: |
|
|
328
|
-
| auto | auto |
|
|
329
|
-
| scroll | scroll |
|
|
330
|
-
| hidden | hidden |
|
|
331
|
-
|
|
332
|
-
## Heights
|
|
333
|
-
|
|
334
|
-
| Definition | Value |
|
|
335
|
-
| ----------- | ------ |
|
|
336
|
-
| data-height | height |
|
|
337
|
-
|
|
338
|
-
| Key | Value |
|
|
339
|
-
| ----- | :---: |
|
|
340
|
-
| 100% | 100% |
|
|
341
|
-
| auto | auto |
|
|
342
|
-
| unset | unset |
|
|
343
|
-
|
|
344
|
-
## Positioners
|
|
345
|
-
|
|
346
|
-
| Definition | Value |
|
|
347
|
-
| ----------- | ------ |
|
|
348
|
-
| data-top | top |
|
|
349
|
-
| data-right | right |
|
|
350
|
-
| data-bottom | bottom |
|
|
351
|
-
| data-left | left |
|
|
352
|
-
| data-inset | inset |
|
|
353
|
-
|
|
354
|
-
| Key | Value |
|
|
355
|
-
| --- | :---: |
|
|
356
|
-
| 0 | 0 |
|
|
357
|
-
|
|
358
|
-
## Transform
|
|
359
|
-
|
|
360
|
-
> Accepts multiple values.
|
|
361
|
-
|
|
362
|
-
| Definition | Value |
|
|
363
|
-
| -------------- | -------------- |
|
|
364
|
-
| data-transform | text-transform |
|
|
365
|
-
| data-transform | \* |
|
|
366
|
-
|
|
367
|
-
| Key | Value |
|
|
368
|
-
| ----------- | :------------------------------------------------------------: |
|
|
369
|
-
| uppercase | uppercase |
|
|
370
|
-
| lowercase | lowercase |
|
|
371
|
-
| capitalize | capitalize |
|
|
372
|
-
| upper-first | :first-letter { text-transform: uppercase } |
|
|
373
|
-
| center | text-align: center |
|
|
374
|
-
| none | none |
|
|
375
|
-
| truncate | overflow: hidden, white-space: nowrap, text-overflow: ellipsis |
|
|
376
|
-
|
|
377
|
-
## Backgrounds
|
|
378
|
-
|
|
379
|
-
| Definition | Value |
|
|
380
|
-
| ---------- | ---------------- |
|
|
381
|
-
| data-bg | background-color |
|
|
382
|
-
|
|
383
|
-
Possible values: see the Colors section.
|
|
384
|
-
|
|
385
|
-
## Border colors
|
|
386
|
-
|
|
387
|
-
| Definition | Value |
|
|
388
|
-
| ---------- | ------------------------- |
|
|
389
|
-
| data-bc | border-color |
|
|
390
|
-
| data-bcx | border-color-{right,left} |
|
|
391
|
-
| data-bcy | border-color-{top,bottom} |
|
|
392
|
-
| data-bct | border-color-top |
|
|
393
|
-
| data-bcr | border-color-right |
|
|
394
|
-
| data-bcb | border-color-bottom |
|
|
395
|
-
| data-bcl | border-color-left |
|
|
396
|
-
|
|
397
|
-
Possible values: see the Colors section.
|
|
398
|
-
|
|
399
|
-
## Colors
|
|
400
|
-
|
|
401
|
-
Grayscale
|
|
402
|
-
|
|
403
|
-
| Key | Value |
|
|
404
|
-
| -------- | :-----: |
|
|
405
|
-
| white | #F9FAFB |
|
|
406
|
-
| gray-100 | #F3F4F6 |
|
|
407
|
-
| gray-200 | #E5E7EB |
|
|
408
|
-
| gray-300 | #D1D5DB |
|
|
409
|
-
| gray-400 | #9CA3AF |
|
|
410
|
-
| gray-500 | #6B7280 |
|
|
411
|
-
| gray-600 | #4B5563 |
|
|
412
|
-
| gray-700 | #374151 |
|
|
413
|
-
| gray-800 | #1F2937 |
|
|
414
|
-
| black | #111827 |
|
|
415
|
-
|
|
416
|
-
Green
|
|
417
|
-
|
|
418
|
-
| Key | Value |
|
|
419
|
-
| --------- | :----------------: |
|
|
420
|
-
| green-100 | hsl(112, 50%, 85%) |
|
|
421
|
-
| green-200 | hsl(112, 50%, 75%) |
|
|
422
|
-
| green-300 | hsl(112, 50%, 65%) |
|
|
423
|
-
| green-400 | hsl(112, 50%, 55%) |
|
|
424
|
-
| green-500 | hsl(112, 50%, 45%) |
|
|
425
|
-
| green-600 | hsl(112, 50%, 35%) |
|
|
426
|
-
| green-700 | hsl(112, 50%, 25%) |
|
|
427
|
-
| green-800 | hsl(112, 50%, 20%) |
|
|
428
|
-
|
|
429
|
-
Red
|
|
430
|
-
|
|
431
|
-
| Key | Value |
|
|
432
|
-
| ------- | :----------------: |
|
|
433
|
-
| red-100 | hsl(5, 80%, 90%) |
|
|
434
|
-
| red-200 | hsl(5, 80%, 83%) |
|
|
435
|
-
| red-300 | hsl(5, 80%, 72.5%) |
|
|
436
|
-
| red-400 | hsl(5, 80%, 62.5%) |
|
|
437
|
-
| red-500 | hsl(5, 80%, 52.5%) |
|
|
438
|
-
| red-600 | hsl(5, 80%, 42%) |
|
|
439
|
-
| red-700 | hsl(5, 80%, 32.5%) |
|
|
440
|
-
| red-800 | hsl(5, 80%, 22.5%) |
|
|
441
|
-
|
|
442
|
-
Orange
|
|
443
|
-
|
|
444
|
-
| Key | Value |
|
|
445
|
-
| ---------- | :-----------------: |
|
|
446
|
-
| orange-100 | hsl(25, 88%, 85%) |
|
|
447
|
-
| orange-200 | hsl(25, 88%, 75%) |
|
|
448
|
-
| orange-300 | hsl(25, 88%, 65%) |
|
|
449
|
-
| orange-400 | hsl(25, 88%, 55%) |
|
|
450
|
-
| orange-500 | hsl(25, 88%, 45%) |
|
|
451
|
-
| orange-600 | hsl(25, 88%, 37.5%) |
|
|
452
|
-
| orange-700 | hsl(25, 88%, 27.5%) |
|
|
453
|
-
| orange-800 | hsl(25, 88%, 20%) |
|
|
454
|
-
|
|
455
|
-
## Cursors
|
|
456
|
-
|
|
457
|
-
| Definition | Value |
|
|
458
|
-
| ----------- | ------ |
|
|
459
|
-
| data-cursor | cursor |
|
|
460
|
-
|
|
461
|
-
| Key | Value |
|
|
462
|
-
| ----------- | :---------: |
|
|
463
|
-
| wait | wait |
|
|
464
|
-
| auto | auto |
|
|
465
|
-
| pointer | pointer |
|
|
466
|
-
| not-allowed | not-allowed |
|
|
467
|
-
|
|
468
|
-
## Backdrops
|
|
469
|
-
|
|
470
|
-
| Definition | Value |
|
|
471
|
-
| ------------- | -------- |
|
|
472
|
-
| data-backdrop | backdrop |
|
|
473
|
-
|
|
474
|
-
| Key | Value |
|
|
475
|
-
| ----- | :-----------------: |
|
|
476
|
-
| black | rgba(0, 0, 0, 0.75) |
|
|
477
|
-
| none | none |
|
|
478
|
-
|
|
479
|
-
## Object fits
|
|
480
|
-
|
|
481
|
-
| Definition | Value |
|
|
482
|
-
| --------------- | ---------- |
|
|
483
|
-
| data-object-fit | object-fit |
|
|
484
|
-
|
|
485
|
-
| Key | Value |
|
|
486
|
-
| ---------- | :--------: |
|
|
487
|
-
| contain | contain |
|
|
488
|
-
| cover | cover |
|
|
489
|
-
| fill | fill |
|
|
490
|
-
| scale-down | scale-down |
|
|
491
|
-
| none | none |
|
|
492
|
-
|
|
493
|
-
## Object positions
|
|
494
|
-
|
|
495
|
-
| Definition | Value |
|
|
496
|
-
| -------------------- | --------------- |
|
|
497
|
-
| data-object-position | object-position |
|
|
498
|
-
|
|
499
|
-
| Key | Value |
|
|
500
|
-
| ------ | :----: |
|
|
501
|
-
| top | top |
|
|
502
|
-
| bottom | bottom |
|
|
503
|
-
| left | left |
|
|
504
|
-
| right | right |
|
|
505
|
-
| center | center |
|
|
506
|
-
|
|
507
|
-
## Rotates
|
|
508
|
-
|
|
509
|
-
| Definition | Value |
|
|
510
|
-
| ----------- | ------------------------ |
|
|
511
|
-
| data-rotate | transform: rotate(x deg) |
|
|
512
|
-
|
|
513
|
-
| Key | Value |
|
|
514
|
-
| --- | :---: |
|
|
515
|
-
| 0 | 0 |
|
|
516
|
-
| 90 | 90 |
|
|
517
|
-
| 180 | 180 |
|
|
518
|
-
| 270 | 270 |
|