@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

package/dist/collection/components/eds-input-field/eds-input-field.css

@@ -1,21 +1,3 @@
-@font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-  src: url("../fonts/Inter.var.woff2") format("woff2-variations"),
-  url("../fonts/Inter.var.woff2") format("woff2");
-  src: url("../fonts/Inter.var.woff2") format("woff2") tech("variations");
-}
-@font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  src: url("../fonts/Inter-Italic.var.woff2") format("woff2-variations"),
-  url("../fonts/Inter-Italic.var.woff2") format("woff2");
-  src: url("../fonts/Inter-Italic.var.woff2") format("woff2") tech("variations");
-}
 :root {
   font-optical-sizing: auto;
 }
@@ -642,9 +624,6 @@ video {
     --spacing-space-03: 7.5rem;
   }
 }
-.pt-space-04 {
-  padding-top: var(--spacing-space-04);
-}
 :root {
   --sans: Inter, Helvetica, Arial, sans-serif;
   --f-heading-01-fontFamily: var(--sans);
@@ -1003,10 +982,70 @@ video {
   grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
   grid-gap: var(--inner-gutter);
 }
+.grid-col-span-2 {
+  --container-grid-columns: 2;
+  grid-column: span 2 / span 2;
+}
+.grid-col-span-3 {
+  --container-grid-columns: 3;
+  grid-column: span 3 / span 3;
+}
+.grid-col-span-4 {
+  --container-grid-columns: 4;
+  grid-column: span 4 / span 4;
+}
+.grid-col-span-6 {
+  --container-grid-columns: 6;
+  grid-column: span 6 / span 6;
+}
+.grid-col-span-8 {
+  --container-grid-columns: 8;
+  grid-column: span 8 / span 8;
+}
+.grid-col-span-10 {
+  --container-grid-columns: 10;
+  grid-column: span 10 / span 10;
+}
 .grid-col-span-12 {
   --container-grid-columns: 12;
   grid-column: span 12 / span 12;
 }
+.grid-col-start-1 {
+  grid-column-start: 1;
+}
+.grid-col-start-2 {
+  grid-column-start: 2;
+}
+.grid-col-start-3 {
+  grid-column-start: 3;
+}
+.grid-col-start-4 {
+  grid-column-start: 4;
+}
+.grid-col-start-5 {
+  grid-column-start: 5;
+}
+.grid-col-start-6 {
+  grid-column-start: 6;
+}
+.grid-col-start-7 {
+  grid-column-start: 7;
+}
+.grid-col-start-8 {
+  grid-column-start: 8;
+}
+.grid-col-start-9 {
+  grid-column-start: 9;
+}
+.grid-col-start-10 {
+  grid-column-start: 10;
+}
+.grid-col-start-11 {
+  grid-column-start: 11;
+}
+.grid-col-start-12 {
+  grid-column-start: 12;
+}
 [class*="grid-line-"] > * {
   position: relative;
 }
@@ -1016,6 +1055,396 @@ video {
   z-index: 0;
   pointer-events: none;
 }
+.grid-cols-1[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-1[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+}
+.grid-cols-1[class*="grid-line-x"] > *:nth-child(1n+1)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-1[class*="grid-line-x"] > *:nth-child(1n+1):nth-last-child(-n+1)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-1[class*="grid-line-x"] > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-2[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-2[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+2)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+2)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+2)::after {
+  top: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {
+  bottom: 0;
+}
+.grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-3[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-3[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+3)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+1):nth-last-child(-n+3)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-3[class*="grid-line-x"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(3n+3)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+3)::after {
+  top: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(3n+1):nth-last-child(-n+3)::after {
+  bottom: 0;
+}
+.grid-cols-3[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(3n+1):nth-last-child(-n+3) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-4[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-4[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+4)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+4)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+4)::after {
+  top: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {
+  bottom: 0;
+}
+.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-5[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-5[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+5)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+5)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+5)::after {
+  top: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {
+  bottom: 0;
+}
+.grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-6[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-6[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+6)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+1):nth-last-child(-n+6)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-6[class*="grid-line-x"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(6n+6)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+6)::after {
+  top: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(6n+1):nth-last-child(-n+6)::after {
+  bottom: 0;
+}
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(6n+1):nth-last-child(-n+6) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-7[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-7[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+7)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+1):nth-last-child(-n+7)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-7[class*="grid-line-x"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(7n+7)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+7)::after {
+  top: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(7n+1):nth-last-child(-n+7)::after {
+  bottom: 0;
+}
+.grid-cols-7[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(7n+1):nth-last-child(-n+7) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-8[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-8[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+8)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+1):nth-last-child(-n+8)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-8[class*="grid-line-x"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(8n+8)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+8)::after {
+  top: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(8n+1):nth-last-child(-n+8)::after {
+  bottom: 0;
+}
+.grid-cols-8[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(8n+1):nth-last-child(-n+8) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-9[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-9[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+9)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+1):nth-last-child(-n+9)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-9[class*="grid-line-x"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(9n+9)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+9)::after {
+  top: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(9n+1):nth-last-child(-n+9)::after {
+  bottom: 0;
+}
+.grid-cols-9[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(9n+1):nth-last-child(-n+9) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-10[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-10[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+10)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+1):nth-last-child(-n+10)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-10[class*="grid-line-x"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(10n+10)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+10)::after {
+  top: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(10n+1):nth-last-child(-n+10)::after {
+  bottom: 0;
+}
+.grid-cols-10[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(10n+1):nth-last-child(-n+10) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-11[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-11[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+11)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1):nth-last-child(-n+11)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-11[class*="grid-line-x"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+11)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+11)::after {
+  top: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+1):nth-last-child(-n+11)::after {
+  bottom: 0;
+}
+.grid-cols-11[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(11n+1):nth-last-child(-n+11) ~ li::after {
+  bottom: 0;
+}
+.grid-cols-12[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+.grid-cols-12[class*="grid-line-xfull"] > *:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+1)::before {
+  inset-inline-start: 0;
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+12)::before {
+  inset-inline-end: 0;
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+1):nth-last-child(-n+12)::before {
+  border-bottom-width: 0;
+}
+.grid-cols-12[class*="grid-line-x"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {
+  border-bottom-width: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(12n+12)::after {
+  border-inline-end-width: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+12)::after {
+  top: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(12n+1):nth-last-child(-n+12)::after {
+  bottom: 0;
+}
+.grid-cols-12[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(12n+1):nth-last-child(-n+12) ~ li::after {
+  bottom: 0;
+}
 @media (min-width: 750px) {
   [class*="grid-line-"] > * {
     position: relative;
@@ -5399,14 +5828,14 @@ video {
     }
   }
 .input-label {
-  font-family: var(--f-ui-03-fontFamily);
-  font-weight: var(--f-ui-03-fontWeight);
-  font-size: var(--f-ui-03-fontSize);
-  line-height: var(--f-ui-03-lineHeight);
-  letter-spacing: var(--f-ui-03-letterSpacing);
+  font-family: var(--f-ui-04-fontFamily);
+  font-weight: var(--f-ui-04-fontWeight);
+  font-size: var(--f-ui-04-fontSize);
+  line-height: var(--f-ui-04-lineHeight);
+  letter-spacing: var(--f-ui-04-letterSpacing);
 }
 .input-label b,.input-label strong {
-  font-weight: var(--f-ui-03---bold-weight, bold);
+  font-weight: var(--f-ui-04---bold-weight, bold);
 }
 .input {
   -webkit-appearance: none;
@@ -5565,6 +5994,15 @@ video {
     color: var(--red-700);
   }
 }
+input[type="range"]::-webkit-slider-thumb {
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 9999px;
+    outline: 2px solid var(--green-400); /* This adds an outline */
+    background-color: var(--green-500);
+      -webkit-appearance: none;
+              appearance: none; /* Ensure the thumb can be styled */
+}
 .loader {
   box-sizing: border-box;
   display: inline-block;
@@ -5659,6 +6097,24 @@ video {
       background-size: 16px 16px;
     }
   }
+.effect-bg-behind {
+  position: relative;
+}
+.effect-bg-behind::before {
+  position: absolute;
+  inset: 0rem;
+  z-index: -1;
+  --tw-content: '';
+  content: var(--tw-content);
+}
+.effect-bg-behind {
+
+    &:before {
+      background-size: calc(100% + 6px) calc(100% + 6px) !important;
+      background-position: -4px -4px !important;
+      background-repeat: no-repeat !important;
+    }
+  }
 .effect-bg-behind-link {
   position: relative;
 }
@@ -5728,6 +6184,12 @@ video {
 .bottom-0 {
   bottom: 0rem;
 }
+.bottom-20 {
+  bottom: 1.25rem;
+}
+.bottom-4 {
+  bottom: 0.25rem;
+}
 .bottom-8 {
   bottom: 0.5rem;
 }
@@ -5737,6 +6199,9 @@ video {
 .left-1\/2 {
   left: 50%;
 }
+.left-20 {
+  left: 1.25rem;
+}
 .left-4 {
   left: 0.25rem;
 }
@@ -5746,12 +6211,18 @@ video {
 .right-0 {
   right: 0rem;
 }
+.right-20 {
+  right: 1.25rem;
+}
 .right-4 {
   right: 0.25rem;
 }
 .right-8 {
   right: 0.5rem;
 }
+.right-\[4px\] {
+  right: 4px;
+}
 .right-\[6px\] {
   right: 6px;
 }
@@ -5764,9 +6235,15 @@ video {
 .top-16 {
   top: 1rem;
 }
+.top-20 {
+  top: 1.25rem;
+}
 .top-full {
   top: 100%;
 }
+.z-0 {
+  z-index: 0;
+}
 .z-1 {
   z-index: 1;
 }
@@ -5812,6 +6289,14 @@ video {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
 }
+.my-4 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.my-8 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 .-ml-16 {
   margin-left: -1rem;
 }
@@ -5998,6 +6483,9 @@ video {
 .h-96 {
   height: 6rem;
 }
+.h-\[85px\] {
+  height: 85px;
+}
 .h-auto {
   height: auto;
 }
@@ -6037,6 +6525,9 @@ video {
 .min-h-screen {
   min-height: 100vh;
 }
+.w-1\/2 {
+  width: 50%;
+}
 .w-20 {
   width: 1.25rem;
 }
@@ -6046,11 +6537,14 @@ video {
 .w-32 {
   width: 2rem;
 }
+.w-4 {
+  width: 0.25rem;
+}
 .w-44 {
   width: 2.75rem;
 }
-.w-\[130px\] {
-  width: 130px;
+.w-\[200px\] {
+  width: 200px;
 }
 .w-\[300px\] {
   width: 300px;
@@ -6058,6 +6552,9 @@ video {
 .w-\[54px\] {
   width: 54px;
 }
+.w-auto {
+  width: auto;
+}
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -6112,6 +6609,47 @@ video {
 .resize {
   resize: both;
 }
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.grid-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+.grid-cols-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+.grid-cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
 .flex-row {
   flex-direction: row;
 }
@@ -6124,6 +6662,9 @@ video {
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-center {
   align-items: center;
 }
@@ -6173,6 +6714,11 @@ video {
 .gap-y-8 {
   row-gap: 0.5rem;
 }
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.0625rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.125rem * var(--tw-space-x-reverse));
@@ -6183,22 +6729,22 @@ video {
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+.space-y-16 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
-.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
 }
-.space-y-4 {
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
-.space-y-8 {
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
@@ -6406,6 +6952,9 @@ video {
 .bg-warning {
   background-color: var(--yellow-200);
 }
+.bg-opacity-90 {
+  --tw-bg-opacity: 0.9;
+}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -6426,6 +6975,9 @@ video {
 .p-16 {
   padding: 1rem;
 }
+.p-2 {
+  padding: 0.125rem;
+}
 .p-20 {
   padding: 1.25rem;
 }
@@ -6473,6 +7025,10 @@ video {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+.px-6 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .py-1 {
   padding-top: 0.0625rem;
   padding-bottom: 0.0625rem;
@@ -6576,6 +7132,10 @@ video {
 .text-center {
   text-align: center;
 }
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -6586,6 +7146,9 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
+.lowercase {
+  text-transform: lowercase;
+}
 .\!text-current {
   color: currentColor !important;
 }
@@ -6671,6 +7234,11 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-small {
   --tw-shadow: 0px 1.5px 2px rgba(0, 0, 0, 0.1);
   --tw-shadow-colored: 0px 1.5px 2px var(--tw-shadow-color);
@@ -6783,6 +7351,12 @@ video {
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.before\:effect-opacity::before {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
 @media (min-width: 750px) {
   .md\:grid-col-span-4 {
     --container-grid-columns: 4;
@@ -6899,11 +7473,6 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.focus-visible\:ring:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -7055,6 +7624,30 @@ video {
 .before\:bg-gradient-y::before {
     background: linear-gradient(to bottom, transparent, ease-in-out, black);
   }
+.before\:bg-gradient-01-top::before {
+    background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-01-bottom::before {
+    background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-02-top::before {
+    background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-02-bottom::before {
+    background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-03-top::before {
+    background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-03-bottom::before {
+    background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-04-top::before {
+    background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);
+  }
+.before\:bg-gradient-04-bottom::before {
+    background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);
+  }
 .hover\:before\:opacity-100:hover::before {
   opacity: 1;
 }
@@ -7078,12 +7671,26 @@ video {
   }
 }
 @media (min-width: 750px) {
+  .md\:left-1\/2 {
+    left: 50%;
+  }
   .md\:flex {
     display: flex;
   }
   .md\:hidden {
     display: none;
   }
+  .md\:w-\[300px\] {
+    width: 300px;
+  }
+  .md\:-translate-x-1\/2 {
+    --tw-translate-x: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  .md\:-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
   .md\:gap-y-12 {
     row-gap: 0.75rem;
   }
@@ -7110,8 +7717,8 @@ video {
   .lg\:hidden {
     display: none;
   }
-  .lg\:w-\[150px\] {
-    width: 150px;
+  .lg\:w-\[500px\] {
+    width: 500px;
   }
   .lg\:w-auto {
     width: auto;
@@ -7151,11 +7758,3 @@ video {
   }
 }
 
-input[type="range"]::-webkit-slider-thumb {
-  height: 1.5rem;
-  width: 1.5rem;
-  border-radius: 9999px;
-  background-color: var(--green-500);
-    -webkit-appearance: none;
-            appearance: none; /* Ensure the thumb can be styled */
-}