@charset "UTF-8"; /** * @file _mixins.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 30.07.2025 * @@VERSION@@ * @brief Styles und wiederverwendbare Snippets für mehrere Komponenten. * * Diese Datei enthält wiederverwendbare Snippets, die in mehrere Komponenten * eingesetzt werden können. */ /** * @file _icons.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 26.05.2025 * @@VERSION@@ * @brief SVG-Icon werden hier definiert. * * Diese Datei enthält Definitionen, um die SVG-Icon als Styles zu laden. */ *, *:before, *:after { box-sizing: border-box; } html { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } body { background-color: var(--kern-color-layout-background-default); } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } [data-kern-theme=dark], .kern-dark, [data-kern-theme=light], .kern-light { background-color: var(--kern-color-layout-background-default); } body:has(.kern-dialog[open]) { overflow: hidden; } *:not(i) { font-family: var(--kern-typography-font-family-default); } area[href]:not([tabindex="-1"]):focus, iframe:not([tabindex="-1"]):focus, [tabindex]:not([tabindex="-1"]):focus, [contentEditable=true]:not([tabindex="-1"]):focus { border-radius: var(--kern-metric-border-radius-default, 0.25rem); outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 2px; } area[href]:not([tabindex="-1"]):focus:focus-visible, iframe:not([tabindex="-1"]):focus:focus-visible, [tabindex]:not([tabindex="-1"]):focus:focus-visible, [contentEditable=true]:not([tabindex="-1"]):focus:focus-visible { outline: 0; } .kern-sr-only { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .kern-sr-only:not(caption) { position: absolute !important; } .kern-sr-only-mobile { display: inline; } @media (max-width: 575px) { .kern-sr-only-mobile { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .kern-sr-only-mobile:not(caption) { position: absolute !important; } } .kern-error { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; display: flex; gap: var(--kern-metric-space-small, 8px); align-items: flex-start; align-self: stretch; } .kern-error .kern-icon { background-color: var(--kern-color-feedback-danger-contextual, #BD0F09); margin: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); } .kern-number { display: flex; width: 28px; min-width: 28px; height: 28px; padding: 2px 0px; justify-content: center; align-items: center; border-radius: var(--kern-metric-border-radius-circle, 50%); border: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-layout-text-default-contextual, #131525); color: var(--kern-color-layout-text-default-contextual, #131525); } /** * @file _colors.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 17.04.2025 * @modified 23.05.2025 * @@VERSION@@ * @brief Tokens für die Colors. * * Diese Datei enthält die Tokens für die Colors * Colors sind als OKLCH-Eizelwerte (lightness, chroma, und hue) bereitgestellt. */ :root { /* darkblue */ --kern-color-darkblue-025: oklch(96.31% 0.0103 261.79); --kern-color-darkblue-050: oklch(93.90% 0.0174 264.48); --kern-color-darkblue-100: oklch(90.87% 0.0277 265.44); --kern-color-darkblue-150: oklch(86.51% 0.0418 264.33); --kern-color-darkblue-200: oklch(81.90% 0.0559 264.70); --kern-color-darkblue-250: oklch(78.13% 0.0676 264.07); --kern-color-darkblue-300: oklch(75.39% 0.0772 264.66); --kern-color-darkblue-350: oklch(70.76% 0.0907 264.94); --kern-color-darkblue-400: oklch(67.03% 0.1028 264.82); --kern-color-darkblue-450: oklch(63.26% 0.1139 264.43); --kern-color-darkblue-500: oklch(57.16% 0.1315 264.93); --kern-color-darkblue-550: oklch(53.53% 0.1422 265.06); --kern-color-darkblue-600: oklch(50.50% 0.1495 265.20); --kern-color-darkblue-650: oklch(47.12% 0.1573 264.89); --kern-color-darkblue-700: oklch(42.84% 0.1689 265.02); --kern-color-darkblue-750: oklch(39.11% 0.1752 265.00); --kern-color-darkblue-800: oklch(34.91% 0.1828 264.89); --kern-color-darkblue-850: oklch(31.01% 0.1884 265.02); --kern-color-darkblue-900: oklch(27.08% 0.1859 264.98); --kern-color-darkblue-950: oklch(21.98% 0.1473 267.52); /* lightblue */ --kern-color-lightblue-025: oklch(96.17% 0.0297 215.06); --kern-color-lightblue-050: oklch(93.28% 0.0544 213.68); --kern-color-lightblue-100: oklch(90.60% 0.0724 214.75); --kern-color-lightblue-150: oklch(85.58% 0.1038 219.26); --kern-color-lightblue-200: oklch(80.89% 0.1292 223.93); --kern-color-lightblue-250: oklch(77.12% 0.1345 224.30); --kern-color-lightblue-300: oklch(74.26% 0.1379 224.36); --kern-color-lightblue-350: oklch(69.88% 0.1312 225.07); --kern-color-lightblue-400: oklch(66.04% 0.1263 226.04); --kern-color-lightblue-450: oklch(62.15% 0.1198 226.81); --kern-color-lightblue-500: oklch(55.99% 0.1088 227.62); --kern-color-lightblue-550: oklch(52.49% 0.1019 227.58); --kern-color-lightblue-600: oklch(49.29% 0.0962 228.10); --kern-color-lightblue-650: oklch(45.73% 0.0901 228.95); --kern-color-lightblue-700: oklch(41.33% 0.0811 228.63); --kern-color-lightblue-750: oklch(37.54% 0.0738 228.69); --kern-color-lightblue-800: oklch(32.97% 0.0653 229.48); --kern-color-lightblue-850: oklch(28.88% 0.0565 228.24); --kern-color-lightblue-900: oklch(24.71% 0.0483 228.26); --kern-color-lightblue-950: oklch(19.96% 0.0393 228.96); /* turquois */ --kern-color-turquois-025: oklch(96.29% 0.0226 168.75); --kern-color-turquois-050: oklch(93.09% 0.0428 170.49); --kern-color-turquois-100: oklch(90.42% 0.0601 170.96); --kern-color-turquois-150: oklch(85.17% 0.0907 170.67); --kern-color-turquois-200: oklch(80.35% 0.1104 170.77); --kern-color-turquois-250: oklch(76.30% 0.1224 170.61); --kern-color-turquois-300: oklch(73.59% 0.1268 171.13); --kern-color-turquois-350: oklch(68.99% 0.1317 170.81); --kern-color-turquois-400: oklch(65.26% 0.1254 169.92); --kern-color-turquois-450: oklch(61.33% 0.1213 170.08); --kern-color-turquois-500: oklch(55.40% 0.1112 168.74); --kern-color-turquois-550: oklch(51.78% 0.1045 168.33); --kern-color-turquois-600: oklch(48.73% 0.0985 168.19); --kern-color-turquois-650: oklch(45.02% 0.0907 168.48); --kern-color-turquois-700: oklch(40.58% 0.0817 168.44); --kern-color-turquois-750: oklch(36.99% 0.0749 168.02); --kern-color-turquois-800: oklch(32.66% 0.0660 168.16); --kern-color-turquois-850: oklch(28.50% 0.0583 167.21); --kern-color-turquois-900: oklch(24.21% 0.0493 167.63); --kern-color-turquois-950: oklch(19.73% 0.0398 168.29); /* green */ --kern-color-green-025: oklch(96.12% 0.0142 148.78); --kern-color-green-050: oklch(93.64% 0.0252 149.08); --kern-color-green-100: oklch(90.45% 0.0380 148.89); --kern-color-green-150: oklch(85.67% 0.0581 148.14); --kern-color-green-200: oklch(80.93% 0.0773 148.18); --kern-color-green-250: oklch(76.96% 0.0936 148.58); --kern-color-green-300: oklch(73.99% 0.1032 148.33); --kern-color-green-350: oklch(69.41% 0.1198 148.48); --kern-color-green-400: oklch(65.41% 0.1316 148.26); --kern-color-green-450: oklch(61.24% 0.1388 148.46); --kern-color-green-500: oklch(55.03% 0.1478 148.57); --kern-color-green-550: oklch(51.45% 0.1476 148.34); --kern-color-green-600: oklch(48.41% 0.1429 147.27); --kern-color-green-650: oklch(45.03% 0.1366 146.27); --kern-color-green-700: oklch(40.35% 0.1250 145.53); --kern-color-green-750: oklch(36.85% 0.1157 145.05); --kern-color-green-800: oklch(32.28% 0.1024 144.71); --kern-color-green-850: oklch(28.22% 0.0911 144.14); --kern-color-green-900: oklch(24.03% 0.0777 144.09); --kern-color-green-950: oklch(19.64% 0.0648 143.46); /* limette */ --kern-color-limette-025: oklch(95.77% 0.1008 120.73); --kern-color-limette-050: oklch(92.48% 0.1459 120.88); --kern-color-limette-100: oklch(90.27% 0.1619 121.11); --kern-color-limette-150: oklch(85.28% 0.1845 121.19); --kern-color-limette-200: oklch(80.72% 0.1895 120.92); --kern-color-limette-250: oklch(76.83% 0.1845 121.07); --kern-color-limette-300: oklch(74.15% 0.1783 121.20); --kern-color-limette-350: oklch(69.66% 0.1677 121.33); --kern-color-limette-400: oklch(65.97% 0.1595 121.67); --kern-color-limette-450: oklch(62.06% 0.1495 121.34); --kern-color-limette-500: oklch(55.80% 0.1345 121.45); --kern-color-limette-550: oklch(52.30% 0.1260 121.35); --kern-color-limette-600: oklch(49.27% 0.1197 122.10); --kern-color-limette-650: oklch(45.74% 0.1103 121.48); --kern-color-limette-700: oklch(41.27% 0.1004 122.21); --kern-color-limette-750: oklch(37.49% 0.0911 122.16); --kern-color-limette-800: oklch(32.95% 0.0795 121.53); --kern-color-limette-850: oklch(28.54% 0.0689 121.50); --kern-color-limette-900: oklch(24.37% 0.0586 121.25); --kern-color-limette-950: oklch(20.00% 0.0479 120.85); /* yellow */ --kern-color-yellow-025: oklch(96.11% 0.1392 105.66); --kern-color-yellow-050: oklch(93.44% 0.1649 102.38); --kern-color-yellow-100: oklch(90.78% 0.1781 98.73); --kern-color-yellow-150: oklch(86.42% 0.1773 94.42); --kern-color-yellow-200: oklch(81.99% 0.1662 93.08); --kern-color-yellow-250: oklch(77.86% 0.1594 93.03); --kern-color-yellow-300: oklch(75.33% 0.1542 92.75); --kern-color-yellow-350: oklch(70.73% 0.1448 92.81); --kern-color-yellow-400: oklch(66.88% 0.1368 92.05); --kern-color-yellow-450: oklch(62.87% 0.1286 91.73); --kern-color-yellow-500: oklch(56.84% 0.1163 92.56); --kern-color-yellow-550: oklch(53.11% 0.1086 91.66); --kern-color-yellow-600: oklch(49.86% 0.1020 91.69); --kern-color-yellow-650: oklch(46.46% 0.0943 92.37); --kern-color-yellow-700: oklch(41.81% 0.0855 90.94); --kern-color-yellow-750: oklch(38.00% 0.0777 90.65); --kern-color-yellow-800: oklch(33.46% 0.0685 92.46); --kern-color-yellow-850: oklch(29.16% 0.0596 90.54); --kern-color-yellow-900: oklch(24.96% 0.0510 89.96); --kern-color-yellow-950: oklch(20.01% 0.0409 90.84); /* orange */ --kern-color-orange-025: oklch(96.75% 0.0328 83.71); --kern-color-orange-050: oklch(93.57% 0.0683 84.88); --kern-color-orange-100: oklch(91.38% 0.0878 83.19); --kern-color-orange-150: oklch(86.68% 0.1248 80.17); --kern-color-orange-200: oklch(82.35% 0.1554 75.28); --kern-color-orange-250: oklch(78.92% 0.1708 69.47); --kern-color-orange-300: oklch(76.26% 0.1674 68.00); --kern-color-orange-350: oklch(71.59% 0.1586 66.66); --kern-color-orange-400: oklch(67.76% 0.1511 65.79); --kern-color-orange-450: oklch(63.88% 0.1435 64.80); --kern-color-orange-500: oklch(57.52% 0.1303 63.77); --kern-color-orange-550: oklch(53.84% 0.1218 63.95); --kern-color-orange-600: oklch(50.70% 0.1152 63.44); --kern-color-orange-650: oklch(47.04% 0.1072 63.06); --kern-color-orange-700: oklch(42.48% 0.0974 62.41); --kern-color-orange-750: oklch(38.49% 0.0882 62.49); --kern-color-orange-800: oklch(33.89% 0.0774 62.89); --kern-color-orange-850: oklch(29.66% 0.0676 63.09); --kern-color-orange-900: oklch(25.26% 0.0574 63.38); --kern-color-orange-950: oklch(20.44% 0.0473 61.31); /* red */ --kern-color-red-025: oklch(96.56% 0.0154 27.28); --kern-color-red-050: oklch(93.89% 0.0292 28.12); --kern-color-red-100: oklch(91.47% 0.0423 28.78); --kern-color-red-150: oklch(87.06% 0.0660 30.06); --kern-color-red-200: oklch(82.74% 0.0890 29.37); --kern-color-red-250: oklch(79.13% 0.1050 29.01); --kern-color-red-300: oklch(76.59% 0.1184 28.99); --kern-color-red-350: oklch(72.20% 0.1378 29.00); --kern-color-red-400: oklch(68.64% 0.1543 29.27); --kern-color-red-450: oklch(64.84% 0.1691 29.35); --kern-color-red-500: oklch(58.94% 0.1860 29.26); --kern-color-red-550: oklch(55.43% 0.1950 29.29); --kern-color-red-600: oklch(52.37% 0.2002 29.28); --kern-color-red-650: oklch(48.75% 0.2000 29.23); --kern-color-red-700: oklch(43.91% 0.1802 29.23); --kern-color-red-750: oklch(39.99% 0.1641 29.23); --kern-color-red-800: oklch(35.10% 0.1440 29.23); --kern-color-red-850: oklch(30.71% 0.1260 29.23); --kern-color-red-900: oklch(26.16% 0.1073 29.23); --kern-color-red-950: oklch(21.15% 0.0868 29.23); /* violet */ --kern-color-violet-025: oklch(96.67% 0.0163 313.62); --kern-color-violet-050: oklch(94.00% 0.0283 313.35); --kern-color-violet-100: oklch(91.24% 0.0438 314.15); --kern-color-violet-150: oklch(87.16% 0.0639 313.53); --kern-color-violet-200: oklch(82.72% 0.0876 313.60); --kern-color-violet-250: oklch(78.95% 0.1069 313.55); --kern-color-violet-300: oklch(76.59% 0.1183 313.68); --kern-color-violet-350: oklch(72.26% 0.1378 313.51); --kern-color-violet-400: oklch(68.58% 0.1556 313.60); --kern-color-violet-450: oklch(64.91% 0.1686 313.65); --kern-color-violet-500: oklch(59.11% 0.1935 313.28); --kern-color-violet-550: oklch(55.65% 0.2029 313.35); --kern-color-violet-600: oklch(52.68% 0.2121 313.77); --kern-color-violet-650: oklch(49.10% 0.2175 313.14); --kern-color-violet-700: oklch(44.80% 0.2219 313.44); --kern-color-violet-750: oklch(40.78% 0.2032 312.85); --kern-color-violet-800: oklch(35.88% 0.1795 312.06); --kern-color-violet-850: oklch(31.30% 0.1572 311.28); --kern-color-violet-900: oklch(26.72% 0.1345 310.92); --kern-color-violet-950: oklch(21.66% 0.1095 310.10); /* grey */ --kern-color-grey-025: oklch(96.42% 0.0000 0); --kern-color-grey-050: oklch(93.70% 0.0000 0); --kern-color-grey-100: oklch(91.28% 0.0000 0); --kern-color-grey-150: oklch(86.69% 0.0000 0); --kern-color-grey-200: oklch(81.72% 0.0000 0); --kern-color-grey-250: oklch(77.94% 0.0000 0); --kern-color-grey-300: oklch(75.32% 0.0011 197.13); --kern-color-grey-350: oklch(70.58% 0.0000 0); --kern-color-grey-400: oklch(66.98% 0.0000 0); --kern-color-grey-450: oklch(63.01% 0.0000 0); --kern-color-grey-500: oklch(56.58% 0.0000 0); --kern-color-grey-550: oklch(53.13% 0.0000 0); --kern-color-grey-600: oklch(49.97% 0.0000 0); --kern-color-grey-650: oklch(46.40% 0.0000 0); --kern-color-grey-700: oklch(41.69% 0.0016 286.33); --kern-color-grey-750: oklch(37.91% 0.0000 0); --kern-color-grey-800: oklch(33.29% 0.0000 0); --kern-color-grey-850: oklch(29.21% 0.0014 197.08); --kern-color-grey-900: oklch(24.78% 0.0000 0); --kern-color-grey-950: oklch(20.02% 0.0000 0); /* neutral */ --kern-color-neutral-025: oklch(96.72% 0.0041 271.37); --kern-color-neutral-050: oklch(93.50% 0.0081 278.63); --kern-color-neutral-100: oklch(91.08% 0.0124 276.09); --kern-color-neutral-150: oklch(86.57% 0.0195 276.31); --kern-color-neutral-200: oklch(82.04% 0.0253 278.29); --kern-color-neutral-250: oklch(78.01% 0.0315 277.47); --kern-color-neutral-300: oklch(75.46% 0.0348 276.22); --kern-color-neutral-350: oklch(70.79% 0.0412 277.31); --kern-color-neutral-400: oklch(66.96% 0.0447 277.68); --kern-color-neutral-450: oklch(62.99% 0.0486 276.60); --kern-color-neutral-500: oklch(56.94% 0.0532 275.53); --kern-color-neutral-550: oklch(53.33% 0.0570 276.95); --kern-color-neutral-600: oklch(50.20% 0.0579 276.79); --kern-color-neutral-650: oklch(46.61% 0.0574 276.44); --kern-color-neutral-700: oklch(42.13% 0.0539 275.67); --kern-color-neutral-750: oklch(38.09% 0.0534 276.53); --kern-color-neutral-800: oklch(33.39% 0.0479 277.01); --kern-color-neutral-850: oklch(29.38% 0.0439 277.87); --kern-color-neutral-900: oklch(25.07% 0.0381 276.75); --kern-color-neutral-950: oklch(20.23% 0.0321 277.67); /* balck & whote */ --kern-color-black: oklch(0% 0 0); --kern-color-white: oklch(100% 0 0); /* brand-colorpalette-1 */ --kern-color-brand-colorpalette-1-025: oklch(96.37% 0.0120 286.17); --kern-color-brand-colorpalette-1-050: oklch(93.77% 0.0202 282.95); --kern-color-brand-colorpalette-1-100: oklch(91.23% 0.0285 283.64); --kern-color-brand-colorpalette-1-150: oklch(86.69% 0.0441 284.02); --kern-color-brand-colorpalette-1-200: oklch(82.09% 0.0588 283.95); --kern-color-brand-colorpalette-1-250: oklch(78.36% 0.0723 283.72); --kern-color-brand-colorpalette-1-300: oklch(75.72% 0.0800 283.52); --kern-color-brand-colorpalette-1-350: oklch(71.21% 0.0956 284.39); --kern-color-brand-colorpalette-1-400: oklch(67.47% 0.1084 284.34); --kern-color-brand-colorpalette-1-450: oklch(63.68% 0.1199 284.14); --kern-color-brand-colorpalette-1-500: oklch(57.63% 0.1382 284.13); --kern-color-brand-colorpalette-1-550: oklch(54.19% 0.1482 283.98); --kern-color-brand-colorpalette-1-600: oklch(51.11% 0.1564 284.24); --kern-color-brand-colorpalette-1-650: oklch(47.73% 0.1645 284.16); --kern-color-brand-colorpalette-1-700: oklch(43.43% 0.1747 283.96); --kern-color-brand-colorpalette-1-750: oklch(39.85% 0.1806 284.19); --kern-color-brand-colorpalette-1-800: oklch(35.68% 0.1863 284.27); --kern-color-brand-colorpalette-1-850: oklch(31.65% 0.1863 283.91); --kern-color-brand-colorpalette-1-900: oklch(27.01% 0.1607 282.38); --kern-color-brand-colorpalette-1-950: oklch(22.00% 0.1316 281.61); /* brand-colorpalette-2 */ --kern-color-brand-colorpalette-2-025: oklch(95.54% 0.0636 175.31); --kern-color-brand-colorpalette-2-050: oklch(92.30% 0.1006 174.46); --kern-color-brand-colorpalette-2-100: oklch(89.54% 0.1168 174.27); --kern-color-brand-colorpalette-2-150: oklch(84.82% 0.1314 174.24); --kern-color-brand-colorpalette-2-200: oklch(80.11% 0.1350 174.34); --kern-color-brand-colorpalette-2-250: oklch(76.20% 0.1345 173.91); --kern-color-brand-colorpalette-2-300: oklch(73.59% 0.1315 174.51); --kern-color-brand-colorpalette-2-350: oklch(68.93% 0.1261 174.58); --kern-color-brand-colorpalette-2-400: oklch(65.38% 0.1220 174.29); --kern-color-brand-colorpalette-2-450: oklch(61.43% 0.1125 174.59); --kern-color-brand-colorpalette-2-500: oklch(55.32% 0.1050 174.21); --kern-color-brand-colorpalette-2-550: oklch(51.71% 0.0981 174.26); --kern-color-brand-colorpalette-2-600: oklch(48.66% 0.0921 174.59); --kern-color-brand-colorpalette-2-650: oklch(45.20% 0.0861 173.88); --kern-color-brand-colorpalette-2-700: oklch(40.77% 0.0771 174.63); --kern-color-brand-colorpalette-2-750: oklch(36.85% 0.0696 174.75); --kern-color-brand-colorpalette-2-800: oklch(32.48% 0.0614 174.69); --kern-color-brand-colorpalette-2-850: oklch(28.31% 0.0534 174.87); --kern-color-brand-colorpalette-2-900: oklch(24.36% 0.0457 175.47); --kern-color-brand-colorpalette-2-950: oklch(19.81% 0.0379 173.28); } /** * @file _font.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 17.04.2025 * @modified 23.05.2025 * @@VERSION@@ * @brief Tokens für die Font. * * Diese Datei enthält die Tokens für die Font */ :root { /* primitive-font-familiy */ --kern-typography-font-family-fira-sans: "Fira Sans", sans-serif; --kern-typography-font-family-fira-mono: "Fira Mono", monospace; /* primitive-font-size */ --kern-font-size-12: 0.75rem; --kern-font-size-16: 1rem; --kern-font-size-18: 1.125rem; --kern-font-size-20: 1.25rem; --kern-font-size-21: 1.3125rem; --kern-font-size-24: 1.5rem; --kern-font-size-26: 1.625rem; --kern-font-size-32: 2rem; --kern-font-size-40: 2.5rem; --kern-font-size-48: 3rem; --kern-font-size-56: 3.5rem; --kern-font-size-72: 4.5rem; --kern-font-size-80: 5rem; } /** * @file _sizes.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 17.04.2025 * @modified 23.05.2025 * @@VERSION@@ * @brief Tokens für die Sizes. * * Diese Datei enthält die Tokens für die Sizes */ :root { /* primitive-number */ --kern-0: 0rem; --kern-1: 0.0625rem; --kern-2: 0.125rem; --kern-3: 0.1875rem; --kern-4: 0.25rem; --kern-5: 0.3125rem; --kern-6: 0.375rem; --kern-7: 0.4375rem; --kern-8: 0.5rem; --kern-9: 0.5625rem; --kern-10: 0.625rem; --kern-14: 0.875rem; --kern-12: 0.75rem; --kern-16: 1rem; --kern-18: 1.125rem; --kern-20: 1.25rem; --kern-24: 1.5rem; --kern-32: 2rem; --kern-40: 2.5rem; --kern-48: 3rem; --kern-56: 3.5rem; --kern-64: 4rem; --kern-80: 5rem; --kern-96: 6rem; --kern-96: 6rem; --kern-112: 7rem; --kern-128: 8rem; --kern-160: 10rem; --kern-192: 12rem; --kern-224: 14rem; --kern-240: 15rem; --kern-256: 16rem; --kern-352: 22rem; --kern-360: 22.5rem; --kern-384: 24rem; --kern-480: 30rem; --kern-512: 32rem; --kern-736: 46rem; --kern-768: 48rem; --kern-992: 62rem; --kern-1024: 64rem; --kern-1140: 71.25rem; --kern-1248: 78rem; --kern-1280: 80rem; --kern-1504: 94rem; --kern-1536: 96rem; --kern-1600: 100rem; --kern-1920: 120rem; } /** * @file _variables.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 29.08.2025 * @@VERSION@@ * @brief Token für mertics, components, typography. * * Diese Datei enthält core-Token, um die Sizes zu definieren. * Hier werden die spezifischen Theme-Token, die in jeweiligen Theme definiert sind, übergeben. * Bsp: "--kern-metric-border-radius-default" wird an "--kern-metric-border-radius-default" übergeben. * Variationen (Mobile und Desktop). */ :root { --kern-metric-border-width-none: var(--kern-0); --kern-metric-border-width-light: var(--kern-1); --kern-metric-border-width-default: var(--kern-2); --kern-metric-border-width-bold: var(--kern-4); --kern-metric-border-width-heavy: var(--kern-8); --kern-metric-border-radius-none: var(--kern-0); --kern-metric-border-radius-small: var(--kern-2); --kern-metric-border-radius-default: var(--kern-4); --kern-metric-border-radius-large: var(--kern-8); --kern-metric-border-radius-circle: 50%; --kern-component-badge-space-left: var(--kern-12); --kern-component-description-list-term-max-width: var(--kern-352); --kern-component-alert-icon-size: var(--kern-32); --kern-component-kopfzeile-font-family: "Fira Sans", "Fira Sans Regular", "Noto Sans", "Noto Sans Regular", "SF Pro Text", "Segoe UI", SegoeUI, Roboto, Arial, Helvetica, sans-serif; --kern-component-kopfzeile-font-size: var(--kern-font-size-14); --kern-component-kopfzeile-line-height: var(--kern-font-size-16); --kern-component-kopfzeile-padding: var(--kern-7); --kern-metric-dimension-2x-small: var(--kern-8); --kern-metric-dimension-x-small: var(--kern-16); --kern-metric-dimension-small: var(--kern-20); --kern-metric-dimension-default: var(--kern-24); --kern-metric-dimension-large: var(--kern-32); --kern-metric-dimension-x-large: var(--kern-48); --kern-metric-dimension-2x-large: var(--kern-56); --kern-metric-dimension-3x-large: var(--kern-64); --kern-metric-dimension-4x-large: var(--kern-80); --kern-metric-dimension-5x-large: var(--kern-96); --kern-metric-dimension-6x-large: var(--kern-120); --kern-metric-dimension-7x-large: var(--kern-144); --kern-metric-dimension-media-small: var(--kern-96); --kern-metric-dimension-media-default: var(--kern-160); --kern-metric-dimension-media-large: var(--kern-240); --kern-metric-screen-size: var(--kern-360); --kern-metric-space-none: var(--kern-0); --kern-metric-space-2x-small: var(--kern-2); --kern-metric-space-x-small: var(--kern-4); --kern-metric-space-small: var(--kern-8); --kern-metric-space-default: var(--kern-16); --kern-metric-space-large: var(--kern-24); --kern-metric-space-x-large: var(--kern-32); --kern-metric-space-2x-large: var(--kern-40); --kern-metric-space-3x-large: var(--kern-48); --kern-metric-space-4x-large: var(--kern-56); --kern-metric-space-5x-large: var(--kern-64); --kern-metric-space-6x-large: var(--kern-80); --kern-metric-space-7x-large: var(--kern-96); --kern-metric-space-8x-large: var(--kern-112); --kern-metric-space-9x-large: var(--kern-128); --kern-metric-space-10x-large: var(--kern-160); --kern-metric-space-11x-large: var(--kern-192); --kern-typography-font-family-default: var(--kern-typography-font-family-fira-sans); --kern-typography-line-height-medium-static: var(--kern-font-size-24); --kern-typography-line-height-large-static: var(--kern-font-size-32); --kern-typography-line-height-medium-adaptive: var(--kern-font-size-24); --kern-typography-line-height-large-adaptive: var(--kern-font-size-32); --kern-typography-line-height-x-large-adaptive: var(--kern-font-size-40); --kern-typography-line-height-2x-large-adaptive: var(--kern-font-size-56); --kern-typography-font-size-small-static: var(--kern-font-size-16); --kern-typography-font-size-medium-static: var(--kern-font-size-18); --kern-typography-font-size-large-static: var(--kern-font-size-21); --kern-typography-font-size-medium-adaptive: var(--kern-font-size-21); --kern-typography-font-size-large-adaptive: var(--kern-font-size-26); --kern-typography-font-size-x-large-adaptive: var(--kern-font-size-32); --kern-typography-font-size-2x-large-adaptive: var(--kern-font-size-48); --kern-metric-baseline-body-default-padding-top: var(--kern-6); --kern-metric-baseline-body-default-padding-bottom: var(--kern-2); --kern-metric-baseline-body-large-padding-top: var(--kern-1); --kern-metric-baseline-body-large-padding-bottom: var(--kern-7); --kern-metric-baseline-body-small-padding-top: var(--kern-7); --kern-metric-baseline-body-small-padding-bottom: var(--kern-1); --kern-metric-baseline-heading-display-padding-top: var(--kern-12); --kern-metric-baseline-heading-display-padding-bottom: var(--kern-12); --kern-metric-baseline-heading-x-large-padding-top: var(--kern-9); --kern-metric-baseline-heading-x-large-padding-bottom: var(--kern-7); --kern-metric-baseline-heading-large-padding-top: var(--kern-7); --kern-metric-baseline-heading-large-padding-bottom: var(--kern-9); --kern-metric-baseline-heading-medium-padding-top: var(--kern-5); --kern-metric-baseline-heading-medium-padding-bottom: var(--kern-3); --kern-metric-baseline-heading-small-padding-top: var(--kern-6); --kern-metric-baseline-heading-small-padding-bottom: var(--kern-2); --kern-metric-baseline-title-large-padding-top: var(--kern-7); --kern-metric-baseline-title-large-padding-bottom: var(--kern-9); --kern-metric-baseline-title-default-padding-top: var(--kern-5); --kern-metric-baseline-title-default-padding-bottom: var(--kern-3); --kern-metric-baseline-title-small-padding-top: var(--kern-6); --kern-metric-baseline-title-small-padding-bottom: var(--kern-2); --kern-metric-baseline-preline-large-padding-top: var(--kern-1); --kern-metric-baseline-preline-large-padding-bottom: var(--kern-7); --kern-metric-baseline-preline-default-padding-top: var(--kern-6); --kern-metric-baseline-preline-default-padding-bottom: var(--kern-2); --kern-metric-baseline-preline-small-padding-top: var(--kern-7); --kern-metric-baseline-preline-small-padding-bottom: var(--kern-1); --kern-metric-baseline-subline-large-padding-top: var(--kern-1); --kern-metric-baseline-subline-large-padding-bottom: var(--kern-7); --kern-metric-baseline-subline-default-padding-top: var(--kern-6); --kern-metric-baseline-subline-default-padding-bottom: var(--kern-2); --kern-metric-baseline-subline-small-padding-top: var(--kern-7); --kern-metric-baseline-subline-small-padding-bottom: var(--kern-9); --kern-metric-baseline-label-large-padding-top: var(--kern-1); --kern-metric-baseline-label-large-padding-bottom: var(--kern-7); --kern-metric-baseline-label-default-padding-top: var(--kern-6); --kern-metric-baseline-label-default-padding-bottom: var(--kern-2); --kern-metric-baseline-label-small-padding-top: var(--kern-7); --kern-metric-baseline-label-small-padding-bottom: var(--kern-1); --kern-typography-font-weight-regular: 400; --kern-typography-font-weight-medium: 500; --kern-typography-font-weight-semi-bold: 600; --kern-typography-font-weight-heading-default: var(--kern-typography-font-weight-semi-bold); --kern-typography-font-weight-heading-balanced: var(--kern-typography-font-weight-medium); --kern-typography-font-weight-title-default: var(--kern-typography-font-weight-semi-bold); --kern-typography-font-weight-body-default: var(--kern-typography-font-weight-regular); --kern-typography-font-weight-body-strong: var(--kern-typography-font-weight-semi-bold); --kern-typography-font-weight-preline-default: var(--kern-typography-font-weight-regular); --kern-typography-font-weight-subline-default: var(--kern-typography-font-weight-medium); --kern-typography-font-weight-label-subtle: var(--kern-typography-font-weight-regular); --kern-typography-font-weight-label-default: var(--kern-typography-font-weight-semi-bold); } @media (min-width: 768px) { :root { --kern-component-kopfzeile-padding: var(--kern-7); --kern-component-alert-icon-size: var(--kern-40); --kern-component-kopfzeile-font-size: var(--kern-font-size-16); --kern-component-kopfzeile-line-height: var(--kern-font-size-20); --kern-component-kopfzeile-padding: var(--kern-5); --kern-metric-dimension-media-small: var(--kern-128); --kern-metric-dimension-media-default: var(--kern-192); --kern-metric-dimension-media-large: var(--kern-360); --kern-metric-screen-size: var(--kern-1920); --kern-typography-line-height-medium-adaptive: var(--kern-font-size-32); --kern-typography-line-height-large-adaptive: var(--kern-font-size-40); --kern-typography-line-height-x-large-adaptive: var(--kern-font-size-56); --kern-typography-line-height-2x-large-adaptive: var(--kern-font-size-80); --kern-typography-font-size-medium-adaptive: var(--kern-font-size-24); --kern-typography-font-size-large-adaptive: var(--kern-font-size-32); --kern-typography-font-size-x-large-adaptive: var(--kern-font-size-48); --kern-typography-font-size-2x-large-adaptive: var(--kern-font-size-72); --kern-metric-baseline-heading-x-large-padding-top: var(--kern-12); --kern-metric-baseline-heading-x-large-padding-bottom: var(--kern-12); --kern-metric-baseline-heading-large-padding-top: var(--kern-9); --kern-metric-baseline-heading-large-padding-bottom: var(--kern-7); --kern-metric-baseline-heading-medium-padding-top: var(--kern-8); --kern-metric-baseline-heading-medium-padding-bottom: var(--kern-8); --kern-metric-baseline-heading-display-padding-top: var(--kern-16); --kern-metric-baseline-heading-display-padding-bottom: var(--kern-16); --kern-metric-baseline-title-large-padding-top: var(--kern-9); --kern-metric-baseline-title-large-padding-bottom: var(--kern-7); --kern-metric-baseline-title-default-padding-top: var(--kern-8); --kern-metric-baseline-title-default-padding-bottom: var(--kern-8); } } /** * @file _themes.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 07.05.2026 * @@VERSION@@ * @brief Token für Colors. * * Diese Datei enthält core-Token, um die Colors zu definieren. * Variationen (Light und Dark). */ @media (prefers-color-scheme: dark) { :root { /* layout */ --kern-color-layout-border: var(--kern-color-neutral-500); --kern-color-layout-border-level-1: var(--kern-color-neutral-450); --kern-color-layout-border-level-2: var(--kern-color-neutral-400); /* layout-text */ --kern-color-layout-text-default: var(--kern-color-neutral-025); --kern-color-layout-text-muted: var(--kern-color-neutral-250); --kern-color-layout-text-inverse: var(--kern-color-neutral-950); /* layout-background */ --kern-color-layout-background-default: var(--kern-color-black); --kern-color-layout-background-hued: var(--kern-color-neutral-950); --kern-color-layout-background-default-surface: var(--kern-color-neutral-950); --kern-color-layout-background-level-1: var(--kern-color-neutral-950); --kern-color-layout-background-level-1-surface: var(--kern-color-neutral-900); --kern-color-layout-background-level-2: var(--kern-color-neutral-900); --kern-color-layout-background-level-2-surface: var(--kern-color-neutral-950); /* action */ --kern-color-action-default: var(--kern-color-darkblue-300); --kern-color-action-on-default: var(--kern-color-black); --kern-color-action-visited: var(--kern-color-violet-300); /* action-focus */ --kern-color-action-focus-default: var(--kern-color-neutral-300); /* action-state-opacity */ --kern-color-action-state-opacity-hover: 88%; --kern-color-action-state-opacity-active: 76%; --kern-color-action-state-opacity-pressed: 0.32; --kern-color-action-state-opacity-selected: 0.12; --kern-color-action-state-opacity-disabled: 0.4; --kern-color-action-state-opacity-overlay: 0.72; /* action-state-indicator */ --kern-color-action-state-indicator-default: var(--kern-color-action-default); --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default); --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default); /* form-inputs */ --kern-color-form-input-border: var(--kern-color-neutral-050); /* feedback */ --kern-color-feedback-default: var(--kern-color-neutral-050); --kern-color-feedback-default-background: var(--kern-color-neutral-700); --kern-color-feedback-danger: var(--kern-color-red-400); --kern-color-feedback-danger-background: var(--kern-color-red-900); --kern-color-feedback-info: var(--kern-color-lightblue-400); --kern-color-feedback-info-background: var(--kern-color-lightblue-900); --kern-color-feedback-success: var(--kern-color-turquois-400); --kern-color-feedback-success-background: var(--kern-color-turquois-900); --kern-color-feedback-warning: var(--kern-color-orange-400); --kern-color-feedback-warning-background: var(--kern-color-orange-900); /* decorative-brand */ --kern-color-decorative-brand-default: var(--kern-color-neutral-300); /* decorative-border */ --kern-color-decorative-border-default: var(--kern-color-neutral-700); --kern-color-decorative-border-level-1: var(--kern-color-neutral-650); --kern-color-decorative-border-level-2: var(--kern-color-neutral-600); /* layout-background */ --kern-color-layout-background-inverted: var(--kern-color-white); --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-black) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); /* form-inputs */ --kern-color-form-input-background: var(--kern-color-neutral-900); --kern-color-action-state-indicator-shade-hover: color-mix(in oklch, var(--kern-color-action-default), black calc(100% - var(--kern-color-action-state-opacity-hover))); --kern-color-action-state-indicator-shade-active: color-mix(in oklch, var(--kern-color-action-default), black calc(100% - var(--kern-color-action-state-opacity-active))); --kern-color-action-state-indicator-tint-hover-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-hover)); --kern-color-action-state-indicator-tint-active-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-active)); } } @media (prefers-color-scheme: light) { :root { /* layout */ --kern-color-layout-border: var(--kern-color-neutral-500); --kern-color-layout-border-level-1: var(--kern-color-neutral-600); --kern-color-layout-border-level-2: var(--kern-color-neutral-500); /* layout-text */ --kern-color-layout-text-default: var(--kern-color-neutral-950); --kern-color-layout-text-muted: var(--kern-color-neutral-650); --kern-color-layout-text-inverse: var(--kern-color-neutral-025); /* layout-background */ --kern-color-layout-background-default: var(--kern-color-white); --kern-color-layout-background-hued: var(--kern-color-neutral-025); --kern-color-layout-background-default-surface: var(--kern-color-neutral-025); --kern-color-layout-background-level-1: var(--kern-color-neutral-025); --kern-color-layout-background-level-1-surface: var(--kern-color-white); --kern-color-layout-background-level-2: var(--kern-color-white); --kern-color-layout-background-level-2-surface: var(--kern-color-neutral-025); /* action */ --kern-color-action-default: var(--kern-color-darkblue-700); --kern-color-action-on-default: var(--kern-color-white); --kern-color-action-visited: var(--kern-color-violet-700); /* action-focus */ --kern-color-action-focus-default: var(--kern-color-neutral-700); /* action-state-opacity */ --kern-color-action-state-opacity-hover: 92%; --kern-color-action-state-opacity-active: 84%; --kern-color-action-state-opacity-pressed: 0.32; --kern-color-action-state-opacity-selected: 0.12; --kern-color-action-state-opacity-disabled: 0.4; --kern-color-action-state-opacity-overlay: 0.72; /* action-state-indicator */ --kern-color-action-state-indicator-default: var(--kern-color-action-default); --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default); --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default); /* form-inputs */ --kern-color-form-input-border: var(--kern-color-neutral-900); /* feedback */ --kern-color-feedback-default: var(--kern-color-neutral-700); --kern-color-feedback-default-background: var(--kern-color-neutral-100); --kern-color-feedback-danger: var(--kern-color-red-600); --kern-color-feedback-danger-background: var(--kern-color-red-050); --kern-color-feedback-info: var(--kern-color-lightblue-600); --kern-color-feedback-info-background: var(--kern-color-lightblue-050); --kern-color-feedback-success: var(--kern-color-turquois-600); --kern-color-feedback-success-background: var(--kern-color-turquois-050); --kern-color-feedback-warning: var(--kern-color-orange-600); --kern-color-feedback-warning-background: var(--kern-color-orange-050); /* decorative-brand */ --kern-color-decorative-brand-default: var(--kern-color-neutral-700); /* decorative-border */ --kern-color-decorative-border-default: var(--kern-color-neutral-200); --kern-color-decorative-border-level-1: var(--kern-color-neutral-300); --kern-color-decorative-border-level-2: var(--kern-color-neutral-200); /* layout-background */ --kern-color-layout-background-inverted: var(--kern-color-black); --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-white) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); /* form-inputs */ --kern-color-form-input-background: var(--kern-color-neutral-025); --kern-color-action-state-indicator-shade-hover: color-mix(in oklch, var(--kern-color-action-default), white calc(100% - var(--kern-color-action-state-opacity-hover))); --kern-color-action-state-indicator-shade-active: color-mix(in oklch, var(--kern-color-action-default), white calc(100% - var(--kern-color-action-state-opacity-active))); --kern-color-action-state-indicator-tint-hover-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-hover)); --kern-color-action-state-indicator-tint-active-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-active)); } } [data-kern-theme=light], .kern-light { /* layout */ --kern-color-layout-border: var(--kern-color-neutral-500); --kern-color-layout-border-level-1: var(--kern-color-neutral-600); --kern-color-layout-border-level-2: var(--kern-color-neutral-500); /* layout-text */ --kern-color-layout-text-default: var(--kern-color-neutral-950); --kern-color-layout-text-muted: var(--kern-color-neutral-650); --kern-color-layout-text-inverse: var(--kern-color-neutral-025); /* layout-background */ --kern-color-layout-background-default: var(--kern-color-white); --kern-color-layout-background-hued: var(--kern-color-neutral-025); --kern-color-layout-background-default-surface: var(--kern-color-neutral-025); --kern-color-layout-background-level-1: var(--kern-color-neutral-025); --kern-color-layout-background-level-1-surface: var(--kern-color-white); --kern-color-layout-background-level-2: var(--kern-color-white); --kern-color-layout-background-level-2-surface: var(--kern-color-neutral-025); /* action */ --kern-color-action-default: var(--kern-color-darkblue-700); --kern-color-action-on-default: var(--kern-color-white); --kern-color-action-visited: var(--kern-color-violet-700); /* action-focus */ --kern-color-action-focus-default: var(--kern-color-neutral-700); /* action-state-opacity */ --kern-color-action-state-opacity-hover: 92%; --kern-color-action-state-opacity-active: 84%; --kern-color-action-state-opacity-pressed: 0.32; --kern-color-action-state-opacity-selected: 0.12; --kern-color-action-state-opacity-disabled: 0.4; --kern-color-action-state-opacity-overlay: 0.72; /* action-state-indicator */ --kern-color-action-state-indicator-default: var(--kern-color-action-default); --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default); --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default); /* form-inputs */ --kern-color-form-input-border: var(--kern-color-neutral-900); /* feedback */ --kern-color-feedback-default: var(--kern-color-neutral-700); --kern-color-feedback-default-background: var(--kern-color-neutral-100); --kern-color-feedback-danger: var(--kern-color-red-600); --kern-color-feedback-danger-background: var(--kern-color-red-050); --kern-color-feedback-info: var(--kern-color-lightblue-600); --kern-color-feedback-info-background: var(--kern-color-lightblue-050); --kern-color-feedback-success: var(--kern-color-turquois-600); --kern-color-feedback-success-background: var(--kern-color-turquois-050); --kern-color-feedback-warning: var(--kern-color-orange-600); --kern-color-feedback-warning-background: var(--kern-color-orange-050); /* decorative-brand */ --kern-color-decorative-brand-default: var(--kern-color-neutral-700); /* decorative-border */ --kern-color-decorative-border-default: var(--kern-color-neutral-200); --kern-color-decorative-border-level-1: var(--kern-color-neutral-300); --kern-color-decorative-border-level-2: var(--kern-color-neutral-200); /* layout-background */ --kern-color-layout-background-inverted: var(--kern-color-black); --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-white) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); /* form-inputs */ --kern-color-form-input-background: var(--kern-color-neutral-025); --kern-color-action-state-indicator-shade-hover: color-mix(in oklch, var(--kern-color-action-default), white calc(100% - var(--kern-color-action-state-opacity-hover))); --kern-color-action-state-indicator-shade-active: color-mix(in oklch, var(--kern-color-action-default), white calc(100% - var(--kern-color-action-state-opacity-active))); --kern-color-action-state-indicator-tint-hover-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-hover)); --kern-color-action-state-indicator-tint-active-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-active)); } [data-kern-theme=dark], .kern-dark { /* layout */ --kern-color-layout-border: var(--kern-color-neutral-500); --kern-color-layout-border-level-1: var(--kern-color-neutral-450); --kern-color-layout-border-level-2: var(--kern-color-neutral-400); /* layout-text */ --kern-color-layout-text-default: var(--kern-color-neutral-025); --kern-color-layout-text-muted: var(--kern-color-neutral-250); --kern-color-layout-text-inverse: var(--kern-color-neutral-950); /* layout-background */ --kern-color-layout-background-default: var(--kern-color-black); --kern-color-layout-background-hued: var(--kern-color-neutral-950); --kern-color-layout-background-default-surface: var(--kern-color-neutral-950); --kern-color-layout-background-level-1: var(--kern-color-neutral-950); --kern-color-layout-background-level-1-surface: var(--kern-color-neutral-900); --kern-color-layout-background-level-2: var(--kern-color-neutral-900); --kern-color-layout-background-level-2-surface: var(--kern-color-neutral-950); /* action */ --kern-color-action-default: var(--kern-color-darkblue-300); --kern-color-action-on-default: var(--kern-color-black); --kern-color-action-visited: var(--kern-color-violet-300); /* action-focus */ --kern-color-action-focus-default: var(--kern-color-neutral-300); /* action-state-opacity */ --kern-color-action-state-opacity-hover: 88%; --kern-color-action-state-opacity-active: 76%; --kern-color-action-state-opacity-pressed: 0.32; --kern-color-action-state-opacity-selected: 0.12; --kern-color-action-state-opacity-disabled: 0.4; --kern-color-action-state-opacity-overlay: 0.72; /* action-state-indicator */ --kern-color-action-state-indicator-default: var(--kern-color-action-default); --kern-color-action-state-indicator-tint: var(--kern-color-action-on-default); --kern-color-action-state-indicator-shade: var(--kern-color-layout-text-default); /* form-inputs */ --kern-color-form-input-border: var(--kern-color-neutral-050); /* feedback */ --kern-color-feedback-default: var(--kern-color-neutral-050); --kern-color-feedback-default-background: var(--kern-color-neutral-700); --kern-color-feedback-danger: var(--kern-color-red-400); --kern-color-feedback-danger-background: var(--kern-color-red-900); --kern-color-feedback-info: var(--kern-color-lightblue-400); --kern-color-feedback-info-background: var(--kern-color-lightblue-900); --kern-color-feedback-success: var(--kern-color-turquois-400); --kern-color-feedback-success-background: var(--kern-color-turquois-900); --kern-color-feedback-warning: var(--kern-color-orange-400); --kern-color-feedback-warning-background: var(--kern-color-orange-900); /* decorative-brand */ --kern-color-decorative-brand-default: var(--kern-color-neutral-300); /* decorative-border */ --kern-color-decorative-border-default: var(--kern-color-neutral-700); --kern-color-decorative-border-level-1: var(--kern-color-neutral-650); --kern-color-decorative-border-level-2: var(--kern-color-neutral-600); /* layout-background */ --kern-color-layout-background-inverted: var(--kern-color-white); --kern-color-layout-background-overlay: color-mix(in oklch, var(--kern-color-black) calc(var(--kern-color-action-state-opacity-overlay) * 100%), transparent); /* form-inputs */ --kern-color-form-input-background: var(--kern-color-neutral-900); --kern-color-action-state-indicator-shade-hover: color-mix(in oklch, var(--kern-color-action-default), black calc(100% - var(--kern-color-action-state-opacity-hover))); --kern-color-action-state-indicator-shade-active: color-mix(in oklch, var(--kern-color-action-default), black calc(100% - var(--kern-color-action-state-opacity-active))); --kern-color-action-state-indicator-tint-hover-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-hover)); --kern-color-action-state-indicator-tint-active-opacity: color-mix(in oklch, var(--kern-color-action-default), transparent var(--kern-color-action-state-opacity-active)); } /** * @file _layers.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 17.04.2025 * @modified 23.05.2025 * @@VERSION@@ * @brief Styles für die Layers und das Kontextuelle Verhalten der Komponenten. */ [class*=kern-]:not([class*=kern-level-]), .kern-level-0 { --kern-color-layout-text-default-contextual: var(--kern-color-layout-text-default); --kern-color-layout-text-muted-contextual: var(--kern-color-layout-text-muted); --kern-color-layout-text-inverse-contextual: var(--kern-color-layout-text-inverse); --kern-color-layout-layer-surface-contextual: var(--kern-color-layout-background-default-surface); --kern-color-layout-background-default-contextual: var(--kern-color-layout-background-default); --kern-color-layout-border-contextual: var(--kern-color-layout-border); --kern-color-action-default-contextual: var(--kern-color-action-default); --kern-color-action-on-default-contextual: var(--kern-color-action-on-default); --kern-color-color-action-state-indicator-default-contextual: var(--kern-color-action-state-indicator-default); --kern-color-action-state-indicator-tint-contextual: var(--kern-color-action-state-indicator-tint); --kern-color-action-visited-contextual: var(--kern-color-action-visited); --kern-color-action-focus-default-contextual: var(--kern-color-action-focus-default); --kern-color-decorative-brand-contextual: var(--kern-color-decorative-brand-default); --kern-color-form-input-border-contextual: var(--kern-color-form-input-border); --kern-color-decorative-border-contextual: var(--kern-color-decorative-border-default); --kern-color-feedback-info-contextual: var(--kern-color-feedback-info); --kern-color-feedback-info-background-contextual: var(--kern-color-feedback-info-background); --kern-color-feedback-success-contextual: var(--kern-color-feedback-success); --kern-color-feedback-success-background-contextual: var(--kern-color-feedback-success-background); --kern-color-feedback-warning-contextual: var(--kern-color-feedback-warning); --kern-color-feedback-warning-background-contextual: var(--kern-color-feedback-warning-background); --kern-color-feedback-danger-contextual: var(--kern-color-feedback-danger); --kern-color-feedback-danger-background-contextual: var(--kern-color-feedback-danger-background); --kern-color-feedback-default-contextual: var(--kern-color-feedback-default); --kern-color-feedback-default-background-contextual: var(--kern-color-feedback-default-background); } .kern-level-1 { --kern-color-layout-text-default-contextual: var(--kern-color-layout-text-default); --kern-color-layout-text-muted-contextual: var(--kern-color-layout-text-muted); --kern-color-layout-text-inverse-contextual: var(--kern-color-layout-text-inverse); --kern-color-layout-layer-surface-contextual: var(--kern-color-layout-background-level-1-surface); --kern-color-layout-background-default-contextual: var(--kern-color-layout-background-level-1); --kern-color-layout-border-contextual: var(--kern-color-layout-border-level-1); --kern-color-action-default-contextual: var(--kern-color-action-default); --kern-color-action-on-default-contextual: var(--kern-color-action-on-default); --kern-color-action-state-indicator-default-contextual: var(--kern-color-action-state-indicator-default); --kern-color-action-state-indicator-tint-contextual: var(--kern-color-action-state-indicator-tint); --kern-color-action-visited-contextual: var(--kern-color-action-visited); --kern-color-action-focus-default-contextual: var(--kern-color-action-focus-default); --kern-color-decorative-brand-contextual: var(--kern-color-decorative-brand-default); --kern-color-form-input-border-contextual: var(--kern-color-form-input-border); --kern-color-decorative-border-contextual: var(--kern-color-decorative-border-level-1); --kern-color-feedback-info-contextual: var(--kern-color-feedback-info); --kern-color-feedback-info-background-contextual: var(--kern-color-feedback-info-background); --kern-color-feedback-success-contextual: var(--kern-color-feedback-success); --kern-color-feedback-success-background-contextual: var(--kern-color-feedback-success-background); --kern-color-feedback-warning-contextual: var(--kern-color-feedback-warning); --kern-color-feedback-warning-background-contextual: var(--kern-color-feedback-warning-background); --kern-color-feedback-danger-contextual: var(--kern-color-feedback-danger); --kern-color-feedback-danger-background-contextual: var(--kern-color-feedback-danger-background); --kern-color-feedback-default-contextual: var(--kern-color-feedback-default); --kern-color-feedback-default-background-contextual: var(--kern-color-feedback-default-background); } .kern-level-2 { --kern-color-layout-text-default-contextual: var(--kern-color-layout-text-default); --kern-color-layout-text-muted-contextual: var(--kern-color-layout-text-muted); --kern-color-layout-text-inverse-contextual: var(--kern-color-layout-text-inverse); --kern-color-layout-layer-surface-contextual: var(--kern-color-layout-background-level-2-surface); --kern-color-layout-background-default-contextual: var(--kern-color-layout-background-level-2); --kern-color-layout-border-contextual: var(--kern-color-layout-border-level-2); --kern-color-action-default-contextual: var(--kern-color-action-default); --kern-color-action-on-default-contextual: var(--kern-color-action-on-default); --kern-color-action-state-indicator-default-contextual: var(--kern-color-action-state-indicator-default); --kern-color-action-state-indicator-tint-contextual: var(--kern-color-action-state-indicator-tint); --kern-color-action-visited-contextual: var(--kern-color-action-visited); --kern-color-action-focus-default-contextual: var(--kern-color-action-focus-default); --kern-color-decorative-brand-contextual: var(--kern-color-decorative-brand-default); --kern-color-form-input-border-contextual: var(--kern-color-form-input-border); --kern-color-decorative-border-contextual: var(--kern-color-decorative-border-level-2); --kern-color-feedback-info-contextual: var(--kern-color-feedback-info); --kern-color-feedback-info-background-contextual: var(--kern-color-feedback-info-background); --kern-color-feedback-success-contextual: var(--kern-color-feedback-success); --kern-color-feedback-success-background-contextual: var(--kern-color-feedback-success-background); --kern-color-feedback-warning-contextual: var(--kern-color-feedback-warning); --kern-color-feedback-warning-background-contextual: var(--kern-color-feedback-warning-background); --kern-color-feedback-danger-contextual: var(--kern-color-feedback-danger); --kern-color-feedback-danger-background-contextual: var(--kern-color-feedback-danger-background); --kern-color-feedback-default-contextual: var(--kern-color-feedback-default); --kern-color-feedback-default-background-contextual: var(--kern-color-feedback-default-background); } .kern-layer { background-color: var(--kern-color-layout-background-default-contextual); } /** * @file _icon.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 16.12.2025 * @@VERSION@@ * @brief Styles für die Icon Komponente. * * Diese Datei enthält die CSS-Regeln, um die Icon Komponente * visuell darzustellen. Sie definiert das Grundaussehen. * Variationen (small, default, large und x-large). */ .kern-icon { display: inline-block; width: var(--kern-metric-dimension-default, 24px); height: var(--kern-metric-dimension-default, 24px); min-width: var(--kern-metric-dimension-default, 24px); min-height: var(--kern-metric-dimension-default, 24px); } .kern-icon--small { width: var(--kern-metric-dimension-small, 20px); min-width: var(--kern-metric-dimension-small, 20px); height: var(--kern-metric-dimension-small, 20px); min-height: var(--kern-metric-dimension-small, 20px); } .kern-icon--default { width: var(--kern-metric-dimension-default, 24px); min-width: var(--kern-metric-dimension-default, 24px); height: var(--kern-metric-dimension-default, 24px); min-height: var(--kern-metric-dimension-default, 24px); } .kern-icon--large { width: var(--kern-metric-dimension-large, 32px); min-width: var(--kern-metric-dimension-large, 32px); height: var(--kern-metric-dimension-large, 32px); min-height: var(--kern-metric-dimension-large, 32px); } .kern-icon--x-large { width: var(--kern-metric-dimension-x-large, 48px); min-width: var(--kern-metric-dimension-x-large, 48px); height: var(--kern-metric-dimension-x-large, 48px); min-height: var(--kern-metric-dimension-x-large, 48px); } .kern-icon--account-circle { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm146.5-204.5Q340-521 340-580t40.5-99.5Q421-720 480-720t99.5 40.5Q620-639 620-580t-40.5 99.5Q539-440 480-440t-99.5-40.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm146.5-204.5Q340-521 340-580t40.5-99.5Q421-720 480-720t99.5 40.5Q620-639 620-580t-40.5 99.5Q539-440 480-440t-99.5-40.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--account-circle { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--add { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--add { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--arrow-down { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--arrow-down { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--arrow-up { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--arrow-up { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--arrow-forward { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M647-440H200q-17 0-28.5-11.5T160-480q0-17 11.5-28.5T200-520h447L451-716q-12-12-11.5-28t12.5-28q12-11 28-11.5t28 11.5l264 264q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L508-188q-11 11-27.5 11T452-188q-12-12-12-28.5t12-28.5l195-195Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M647-440H200q-17 0-28.5-11.5T160-480q0-17 11.5-28.5T200-520h447L451-716q-12-12-11.5-28t12.5-28q12-11 28-11.5t28 11.5l264 264q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L508-188q-11 11-27.5 11T452-188q-12-12-12-28.5t12-28.5l195-195Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--arrow-forward { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--arrow-back { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m313-440 196 196q12 12 11.5 28T508-188q-12 11-28 11.5T452-188L188-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l264-264q11-11 27.5-11t28.5 11q12 12 12 28.5T508-715L313-520h447q17 0 28.5 11.5T800-480q0 17-11.5 28.5T760-440H313Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m313-440 196 196q12 12 11.5 28T508-188q-12 11-28 11.5T452-188L188-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l264-264q11-11 27.5-11t28.5 11q12 12 12 28.5T508-715L313-520h447q17 0 28.5 11.5T800-480q0 17-11.5 28.5T760-440H313Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--arrow-back { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--autorenew { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M240-478q0 16 2 31.5t7 30.5q5 17-1 32.5T227-361q-16 8-31.5 1.5T175-383q-8-23-11.5-47t-3.5-48q0-134 93-228t227-94h7l-36-36q-11-11-11-28t11-28q11-11 28-11t28 11l104 104q12 12 12 28t-12 28L507-628q-11 11-28 11t-28-11q-11-11-11-28t11-28l36-36h-7q-100 0-170 70.5T240-478Zm480-4q0-16-2-31.5t-7-30.5q-5-17 1-32.5t21-22.5q16-8 31.5-1.5T785-577q8 23 11.5 47t3.5 48q0 134-93 228t-227 94h-7l36 36q11 11 11 28t-11 28q-11 11-28 11t-28-11L349-172q-12-12-12-28t12-28l104-104q11-11 28-11t28 11q11 11 11 28t-11 28l-36 36h7q100 0 170-70.5T720-482Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M240-478q0 16 2 31.5t7 30.5q5 17-1 32.5T227-361q-16 8-31.5 1.5T175-383q-8-23-11.5-47t-3.5-48q0-134 93-228t227-94h7l-36-36q-11-11-11-28t11-28q11-11 28-11t28 11l104 104q12 12 12 28t-12 28L507-628q-11 11-28 11t-28-11q-11-11-11-28t11-28l36-36h-7q-100 0-170 70.5T240-478Zm480-4q0-16-2-31.5t-7-30.5q-5-17 1-32.5t21-22.5q16-8 31.5-1.5T785-577q8 23 11.5 47t3.5 48q0 134-93 228t-227 94h-7l36 36q11 11 11 28t-11 28q-11 11-28 11t-28-11L349-172q-12-12-12-28t12-28l104-104q11-11 28-11t28 11q11 11 11 28t-11 28l-36 36h7q100 0 170-70.5T720-482Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--autorenew { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--calendar-today { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--calendar-today { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--check { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--check { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--checklist { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m221-313 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-228q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm0-320 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-548q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm339 353q-17 0-28.5-11.5T520-320q0-17 11.5-28.5T560-360h280q17 0 28.5 11.5T880-320q0 17-11.5 28.5T840-280H560Zm0-320q-17 0-28.5-11.5T520-640q0-17 11.5-28.5T560-680h280q17 0 28.5 11.5T880-640q0 17-11.5 28.5T840-600H560Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m221-313 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-228q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm0-320 142-142q12-12 28-11.5t28 12.5q11 12 11 28t-11 28L250-548q-12 12-28 12t-28-12l-86-86q-11-11-11-28t11-28q11-11 28-11t28 11l57 57Zm339 353q-17 0-28.5-11.5T520-320q0-17 11.5-28.5T560-360h280q17 0 28.5 11.5T880-320q0 17-11.5 28.5T840-280H560Zm0-320q-17 0-28.5-11.5T520-640q0-17 11.5-28.5T560-680h280q17 0 28.5 11.5T880-640q0 17-11.5 28.5T840-600H560Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--checklist { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--chevron-left { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m432-480 156 156q11 11 11 28t-11 28q-11 11-28 11t-28-11L348-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 28-11t28 11q11 11 11 28t-11 28L432-480Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m432-480 156 156q11 11 11 28t-11 28q-11 11-28 11t-28-11L348-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 28-11t28 11q11 11 11 28t-11 28L432-480Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--chevron-left { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--chevron-right { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--chevron-right { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--close { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--close { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--content-copy { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360ZM200-80q-33 0-56.5-23.5T120-160v-520q0-17 11.5-28.5T160-720q17 0 28.5 11.5T200-680v520h400q17 0 28.5 11.5T640-120q0 17-11.5 28.5T600-80H200Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360ZM200-80q-33 0-56.5-23.5T120-160v-520q0-17 11.5-28.5T160-720q17 0 28.5 11.5T200-680v520h400q17 0 28.5 11.5T640-120q0 17-11.5 28.5T600-80H200Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--content-copy { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--danger { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-361q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-361q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--danger { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--dehaze { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M120-680v-80h720v80H120Zm0 480v-80h720v80H120Zm0-240v-80h720v80H120Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M120-680v-80h720v80H120Zm0 480v-80h720v80H120Zm0-240v-80h720v80H120Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--dehaze { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--delete { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M280-120q-33 0-56.5-23.5T200-200v-520q-17 0-28.5-11.5T160-760q0-17 11.5-28.5T200-800h160q0-17 11.5-28.5T400-840h160q17 0 28.5 11.5T600-800h160q17 0 28.5 11.5T800-760q0 17-11.5 28.5T760-720v520q0 33-23.5 56.5T680-120H280Zm120-160q17 0 28.5-11.5T440-320v-280q0-17-11.5-28.5T400-640q-17 0-28.5 11.5T360-600v280q0 17 11.5 28.5T400-280Zm160 0q17 0 28.5-11.5T600-320v-280q0-17-11.5-28.5T560-640q-17 0-28.5 11.5T520-600v280q0 17 11.5 28.5T560-280Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M280-120q-33 0-56.5-23.5T200-200v-520q-17 0-28.5-11.5T160-760q0-17 11.5-28.5T200-800h160q0-17 11.5-28.5T400-840h160q17 0 28.5 11.5T600-800h160q17 0 28.5 11.5T800-760q0 17-11.5 28.5T760-720v520q0 33-23.5 56.5T680-120H280Zm120-160q17 0 28.5-11.5T440-320v-280q0-17-11.5-28.5T400-640q-17 0-28.5 11.5T360-600v280q0 17 11.5 28.5T400-280Zm160 0q17 0 28.5-11.5T600-320v-280q0-17-11.5-28.5T560-640q-17 0-28.5 11.5T520-600v280q0 17 11.5 28.5T560-280Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--delete { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--download { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-337q-8 0-15-2.5t-13-8.5L308-492q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T365-549l75 75v-286q0-17 11.5-28.5T480-800q17 0 28.5 11.5T520-760v286l75-75q12-12 28.5-11.5T652-548q11 12 11.5 28T652-492L508-348q-6 6-13 8.5t-15 2.5ZM240-160q-33 0-56.5-23.5T160-240v-80q0-17 11.5-28.5T200-360q17 0 28.5 11.5T240-320v80h480v-80q0-17 11.5-28.5T760-360q17 0 28.5 11.5T800-320v80q0 33-23.5 56.5T720-160H240Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-337q-8 0-15-2.5t-13-8.5L308-492q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T365-549l75 75v-286q0-17 11.5-28.5T480-800q17 0 28.5 11.5T520-760v286l75-75q12-12 28.5-11.5T652-548q11 12 11.5 28T652-492L508-348q-6 6-13 8.5t-15 2.5ZM240-160q-33 0-56.5-23.5T160-240v-80q0-17 11.5-28.5T200-360q17 0 28.5 11.5T240-320v80h480v-80q0-17 11.5-28.5T760-360q17 0 28.5 11.5T800-320v80q0 33-23.5 56.5T720-160H240Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--download { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--draft { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v447q0 33-23.5 56.5T720-80H240Zm280-560q0 17 11.5 28.5T560-600h160L520-800v160Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v447q0 33-23.5 56.5T720-80H240Zm280-560q0 17 11.5 28.5T560-600h160L520-800v160Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--draft { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--drive-folder-upload { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h207q16 0 30.5 6t25.5 17l57 57h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm320-120q17 0 28.5-11.5T520-320v-128l36 36q11 11 28 11t28-11q11-11 11-28t-11-28L508-572q-12-12-28-12t-28 12L348-468q-11 11-11 28t11 28q11 11 28 11t28-11l36-36v128q0 17 11.5 28.5T480-280Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h207q16 0 30.5 6t25.5 17l57 57h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm320-120q17 0 28.5-11.5T520-320v-128l36 36q11 11 28 11t28-11q11-11 11-28t-11-28L508-572q-12-12-28-12t-28 12L348-468q-11 11-11 28t11 28q11 11 28 11t28-11l36-36v128q0 17 11.5 28.5T480-280Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--drive-folder-upload { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--easy-language { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M120-274v-286q0-32 23.5-54t55.5-20q79 12 150.5 46.5T480-498q59-55 130.5-89.5T761-634q32-2 55.5 20t23.5 54v286q0 32-21 54.5T766-195q-64 10-124 33t-112 61q-11 9-23.5 13.5T480-83q-14 0-26.5-4.5T430-101q-52-38-112-61t-124-33q-32-2-53-24.5T120-274Zm360-326q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M120-274v-286q0-32 23.5-54t55.5-20q79 12 150.5 46.5T480-498q59-55 130.5-89.5T761-634q32-2 55.5 20t23.5 54v286q0 32-21 54.5T766-195q-64 10-124 33t-112 61q-11 9-23.5 13.5T480-83q-14 0-26.5-4.5T430-101q-52-38-112-61t-124-33q-32-2-53-24.5T120-274Zm360-326q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--easy-language { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--edit { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-120q-17 0-28.5-11.5T120-160v-97q0-16 6-30.5t17-25.5l505-504q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L313-143q-11 11-25.5 17t-30.5 6h-97Zm544-528 56-56-56-56-56 56 56 56Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-120q-17 0-28.5-11.5T120-160v-97q0-16 6-30.5t17-25.5l505-504q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L313-143q-11 11-25.5 17t-30.5 6h-97Zm544-528 56-56-56-56-56 56 56 56Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--edit { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--home { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-200v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H600q-17 0-28.5-11.5T560-160v-200q0-17-11.5-28.5T520-400h-80q-17 0-28.5 11.5T400-360v200q0 17-11.5 28.5T360-120H240q-33 0-56.5-23.5T160-200Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-200v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H600q-17 0-28.5-11.5T560-160v-200q0-17-11.5-28.5T520-400h-80q-17 0-28.5 11.5T400-360v200q0 17-11.5 28.5T360-120H240q-33 0-56.5-23.5T160-200Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--home { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--help { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm2 160q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Zm4-172q25 0 43.5 16t18.5 40q0 22-13.5 39T502-525q-23 20-40.5 44T444-427q0 14 10.5 23.5T479-394q15 0 25.5-10t13.5-25q4-21 18-37.5t30-31.5q23-22 39.5-48t16.5-58q0-51-41.5-83.5T484-720q-38 0-72.5 16T359-655q-7 12-4.5 25.5T368-609q14 8 29 5t25-17q11-15 27.5-23t34.5-8Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm2 160q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Zm4-172q25 0 43.5 16t18.5 40q0 22-13.5 39T502-525q-23 20-40.5 44T444-427q0 14 10.5 23.5T479-394q15 0 25.5-10t13.5-25q4-21 18-37.5t30-31.5q23-22 39.5-48t16.5-58q0-51-41.5-83.5T484-720q-38 0-72.5 16T359-655q-7 12-4.5 25.5T368-609q14 8 29 5t25-17q11-15 27.5-23t34.5-8Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--help { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--info { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-280q17 0 28.5-11.5T520-320v-160q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480v160q0 17 11.5 28.5T480-280Zm0-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-280q17 0 28.5-11.5T520-320v-160q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480v160q0 17 11.5 28.5T480-280Zm0-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--info { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--keyboard-double-arrow-left { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--keyboard-double-arrow-left { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--keyboard-double-arrow-right { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M383-480 228-636q-11-11-11.5-27.5T228-692q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L284-268q-11 11-27.5 11.5T228-268q-11-11-11-28t11-28l155-156Zm264 0L492-636q-11-11-11.5-27.5T492-692q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L548-268q-11 11-27.5 11.5T492-268q-11-11-11-28t11-28l155-156Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M383-480 228-636q-11-11-11.5-27.5T228-692q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L284-268q-11 11-27.5 11.5T228-268q-11-11-11-28t11-28l155-156Zm264 0L492-636q-11-11-11.5-27.5T492-692q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L548-268q-11 11-27.5 11.5T492-268q-11-11-11-28t11-28l155-156Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--keyboard-double-arrow-right { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--logout { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h240q17 0 28.5 11.5T480-160q0 17-11.5 28.5T440-120H200Zm487-320H400q-17 0-28.5-11.5T360-480q0-17 11.5-28.5T400-520h287l-75-75q-11-11-11-27t11-28q11-12 28-12.5t29 11.5l143 143q12 12 12 28t-12 28L669-309q-12 12-28.5 11.5T612-310q-11-12-10.5-28.5T613-366l74-74Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h240q17 0 28.5 11.5T480-160q0 17-11.5 28.5T440-120H200Zm487-320H400q-17 0-28.5-11.5T360-480q0-17 11.5-28.5T400-520h287l-75-75q-11-11-11-27t11-28q11-12 28-12.5t29 11.5l143 143q12 12 12 28t-12 28L669-309q-12 12-28.5 11.5T612-310q-11-12-10.5-28.5T613-366l74-74Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--logout { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--language { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M325-111.5q-73-31.5-127.5-86t-86-127.5Q80-398 80-480.5t31.5-155q31.5-72.5 86-127t127.5-86Q398-880 480.5-880t155 31.5q72.5 31.5 127 86t86 127Q880-563 880-480.5T848.5-325q-31.5 73-86 127.5t-127 86Q563-80 480.5-80T325-111.5ZM480-162q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M325-111.5q-73-31.5-127.5-86t-86-127.5Q80-398 80-480.5t31.5-155q31.5-72.5 86-127t127.5-86Q398-880 480.5-880t155 31.5q72.5 31.5 127 86t86 127Q880-563 880-480.5T848.5-325q-31.5 73-86 127.5t-127 86Q563-80 480.5-80T325-111.5ZM480-162q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--language { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--mail { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-287q5 0 10.5-1.5T501-453l283-177q8-5 12-12.5t4-16.5q0-20-17-30t-35 1L480-520 212-688q-18-11-35-.5T160-659q0 10 4 17.5t12 11.5l283 177q5 3 10.5 4.5T480-447Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-287q5 0 10.5-1.5T501-453l283-177q8-5 12-12.5t4-16.5q0-20-17-30t-35 1L480-520 212-688q-18-11-35-.5T160-659q0 10 4 17.5t12 11.5l283 177q5 3 10.5 4.5T480-447Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--mail { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--more-vert { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--more-vert { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--open-in-new { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h560v-240q0-17 11.5-28.5T800-480q17 0 28.5 11.5T840-440v240q0 33-23.5 56.5T760-120H200Zm560-584L416-360q-11 11-28 11t-28-11q-11-11-11-28t11-28l344-344H600q-17 0-28.5-11.5T560-800q0-17 11.5-28.5T600-840h200q17 0 28.5 11.5T840-800v200q0 17-11.5 28.5T800-560q-17 0-28.5-11.5T760-600v-104Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h560v-240q0-17 11.5-28.5T800-480q17 0 28.5 11.5T840-440v240q0 33-23.5 56.5T760-120H200Zm560-584L416-360q-11 11-28 11t-28-11q-11-11-11-28t11-28l344-344H600q-17 0-28.5-11.5T560-800q0-17 11.5-28.5T600-840h200q17 0 28.5 11.5T840-800v200q0 17-11.5 28.5T800-560q-17 0-28.5-11.5T760-600v-104Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--open-in-new { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--question-mark { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M584-637q0-43-28.5-69T480-732q-29 0-52.5 12.5T387-683q-16 23-43.5 26.5T296-671q-14-13-15.5-32t9.5-36q32-48 81.5-74.5T480-840q97 0 157.5 55T698-641q0 45-19 81t-70 85q-37 35-50 54.5T542-376q-4 24-20.5 40T482-320q-23 0-39.5-15.5T426-374q0-39 17-71.5t57-68.5q51-45 67.5-69.5T584-637ZM480-80q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M584-637q0-43-28.5-69T480-732q-29 0-52.5 12.5T387-683q-16 23-43.5 26.5T296-671q-14-13-15.5-32t9.5-36q32-48 81.5-74.5T480-840q97 0 157.5 55T698-641q0 45-19 81t-70 85q-37 35-50 54.5T542-376q-4 24-20.5 40T482-320q-23 0-39.5-15.5T426-374q0-39 17-71.5t57-68.5q51-45 67.5-69.5T584-637ZM480-80q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--question-mark { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--search { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--search { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--sign-language { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-40q-17 0-28.5-11.5T160-80q0-17 11.5-28.5T200-120h160v-40H120q-17 0-28.5-11.5T80-200q0-17 11.5-28.5T120-240h240v-40H80q-17 0-28.5-11.5T40-320q0-17 11.5-28.5T80-360h280v-40H160q-17 0-28.5-11.5T120-440q0-17 11.5-28.5T160-480h244l-34-60q-12-21-9.5-44.5T380-625l4-3q11-11 25.5-12t26.5 8l236 176q23 17 35.5 42t12.5 54v200q0 50-35 85t-85 35H200Zm593-374q-10 0-18-5.5T763-436q-9-20-23-37t-32-31L524-641 303-807q-14-10-16-26t8-30q10-14 26-16.5t30 7.5l224 169 24-33-160-120q-14-10-16.5-26t7.5-30q10-14 26-16t30 8l196 146 9-69q3-24 19-41t39-21l6-1q15-2 27 6t17 22l84 283q8 27 3 55t-22 51l-48 64q-5 6-10.5 8.5T793-414ZM248-599q10-14 25.5-16t29.5 8q14 10 16.5 25.5T312-552q-10 14-26 16.5t-30-7.5q-14-10-16-26t8-30Zm15-88q-14-10-16-26t8-30q10-14 26-16t30 8l32 25q15 12 15.5 27t-8.5 27q-9 12-24 16t-30-7l-33-24Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M200-40q-17 0-28.5-11.5T160-80q0-17 11.5-28.5T200-120h160v-40H120q-17 0-28.5-11.5T80-200q0-17 11.5-28.5T120-240h240v-40H80q-17 0-28.5-11.5T40-320q0-17 11.5-28.5T80-360h280v-40H160q-17 0-28.5-11.5T120-440q0-17 11.5-28.5T160-480h244l-34-60q-12-21-9.5-44.5T380-625l4-3q11-11 25.5-12t26.5 8l236 176q23 17 35.5 42t12.5 54v200q0 50-35 85t-85 35H200Zm593-374q-10 0-18-5.5T763-436q-9-20-23-37t-32-31L524-641 303-807q-14-10-16-26t8-30q10-14 26-16.5t30 7.5l224 169 24-33-160-120q-14-10-16.5-26t7.5-30q10-14 26-16t30 8l196 146 9-69q3-24 19-41t39-21l6-1q15-2 27 6t17 22l84 283q8 27 3 55t-22 51l-48 64q-5 6-10.5 8.5T793-414ZM248-599q10-14 25.5-16t29.5 8q14 10 16.5 25.5T312-552q-10 14-26 16.5t-30-7.5q-14-10-16-26t8-30Zm15-88q-14-10-16-26t8-30q10-14 26-16t30 8l32 25q15 12 15.5 27t-8.5 27q-9 12-24 16t-30-7l-33-24Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--sign-language { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--success { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m424-408-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-408Zm56 328q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m424-408-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-408Zm56 328q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--success { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--visibility { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-134 0-244.5-72T61-462q-5-9-7.5-18.5T51-500q0-10 2.5-19.5T61-538q64-118 174.5-190T480-800q134 0 244.5 72T899-538q5 9 7.5 18.5T909-500q0 10-2.5 19.5T899-462q-64 118-174.5 190T480-200Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-134 0-244.5-72T61-462q-5-9-7.5-18.5T51-500q0-10 2.5-19.5T61-538q64-118 174.5-190T480-800q134 0 244.5 72T899-538q5 9 7.5 18.5T909-500q0 10-2.5 19.5T899-462q-64 118-174.5 190T480-200Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--visibility { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--visibility-off { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M764-84 624-222q-35 11-71 16.5t-73 5.5q-134 0-245-72T61-462q-5-9-7.5-18.5T51-500q0-10 2.5-19.5T61-538q22-39 47-76t58-66l-83-84q-11-11-11-27.5T84-820q11-11 28-11t28 11l680 680q11 11 11.5 27.5T820-84q-11 11-28 11t-28-11ZM480-320q11 0 21-1t20-4L305-541q-3 10-4 20t-1 21q0 75 52.5 127.5T480-320Zm0-480q134 0 245.5 72.5T900-537q5 8 7.5 17.5T910-500q0 10-2 19.5t-7 17.5q-19 37-42.5 70T806-331q-14 14-33 13t-33-15l-80-80q-7-7-9-16.5t1-19.5q4-13 6-25t2-26q0-75-52.5-127.5T480-680q-14 0-26 2t-25 6q-10 3-20 1t-17-9l-33-33q-19-19-12.5-44t31.5-32q25-5 50.5-8t51.5-3Zm79 226q11 13 18.5 28.5T587-513q1 8-6 11t-13-3l-82-82q-6-6-2.5-13t11.5-7q19 2 35 10.5t29 22.5Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M764-84 624-222q-35 11-71 16.5t-73 5.5q-134 0-245-72T61-462q-5-9-7.5-18.5T51-500q0-10 2.5-19.5T61-538q22-39 47-76t58-66l-83-84q-11-11-11-27.5T84-820q11-11 28-11t28 11l680 680q11 11 11.5 27.5T820-84q-11 11-28 11t-28-11ZM480-320q11 0 21-1t20-4L305-541q-3 10-4 20t-1 21q0 75 52.5 127.5T480-320Zm0-480q134 0 245.5 72.5T900-537q5 8 7.5 17.5T910-500q0 10-2 19.5t-7 17.5q-19 37-42.5 70T806-331q-14 14-33 13t-33-15l-80-80q-7-7-9-16.5t1-19.5q4-13 6-25t2-26q0-75-52.5-127.5T480-680q-14 0-26 2t-25 6q-10 3-20 1t-17-9l-33-33q-19-19-12.5-44t31.5-32q25-5 50.5-8t51.5-3Zm79 226q11 13 18.5 28.5T587-513q1 8-6 11t-13-3l-82-82q-6-6-2.5-13t11.5-7q19 2 35 10.5t29 22.5Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--visibility-off { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--warning { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm371-120q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm371-120q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--warning { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--brightness-medium { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M346-160H240q-33 0-56.5-23.5T160-240v-106l-77-78q-11-12-17-26.5T60-480q0-15 6-29.5T83-536l77-78v-106q0-33 23.5-56.5T240-800h106l78-77q12-11 26.5-17t29.5-6q15 0 29.5 6t26.5 17l78 77h106q33 0 56.5 23.5T800-720v106l77 78q11 12 17 26.5t6 29.5q0 15-6 29.5T877-424l-77 78v106q0 33-23.5 56.5T720-160H614l-78 77q-12 11-26.5 17T480-60q-15 0-29.5-6T424-83l-78-77Zm34-80 100 100 100-100h140v-140l100-100-100-100v-140H580L480-820 380-720H240v140L140-480l100 100v140h140Zm100-40q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680v400Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M346-160H240q-33 0-56.5-23.5T160-240v-106l-77-78q-11-12-17-26.5T60-480q0-15 6-29.5T83-536l77-78v-106q0-33 23.5-56.5T240-800h106l78-77q12-11 26.5-17t29.5-6q15 0 29.5 6t26.5 17l78 77h106q33 0 56.5 23.5T800-720v106l77 78q11 12 17 26.5t6 29.5q0 15-6 29.5T877-424l-77 78v106q0 33-23.5 56.5T720-160H614l-78 77q-12 11-26.5 17T480-60q-15 0-29.5-6T424-83l-78-77Zm34-80 100 100 100-100h140v-140l100-100-100-100v-140H580L480-820 380-720H240v140L140-480l100 100v140h140Zm100-40q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680v400Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--brightness-medium { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--light-mode { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM80-440q-17 0-28.5-11.5T40-480q0-17 11.5-28.5T80-520h80q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440H80Zm720 0q-17 0-28.5-11.5T760-480q0-17 11.5-28.5T800-520h80q17 0 28.5 11.5T920-480q0 17-11.5 28.5T880-440h-80ZM480-760q-17 0-28.5-11.5T440-800v-80q0-17 11.5-28.5T480-920q17 0 28.5 11.5T520-880v80q0 17-11.5 28.5T480-760Zm0 720q-17 0-28.5-11.5T440-80v-80q0-17 11.5-28.5T480-200q17 0 28.5 11.5T520-160v80q0 17-11.5 28.5T480-40ZM226-678l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226-678Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734-282l43 42q12 11 11.5 28T777-183q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678-734l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183-183q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282-226l-42 43q-11 12-28 11.5T183-183Zm297-297Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM80-440q-17 0-28.5-11.5T40-480q0-17 11.5-28.5T80-520h80q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440H80Zm720 0q-17 0-28.5-11.5T760-480q0-17 11.5-28.5T800-520h80q17 0 28.5 11.5T920-480q0 17-11.5 28.5T880-440h-80ZM480-760q-17 0-28.5-11.5T440-800v-80q0-17 11.5-28.5T480-920q17 0 28.5 11.5T520-880v80q0 17-11.5 28.5T480-760Zm0 720q-17 0-28.5-11.5T440-80v-80q0-17 11.5-28.5T480-200q17 0 28.5 11.5T520-160v80q0 17-11.5 28.5T480-40ZM226-678l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226-678Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734-282l43 42q12 11 11.5 28T777-183q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678-734l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183-183q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282-226l-42 43q-11 12-28 11.5T183-183Zm297-297Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--light-mode { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-icon--dark-mode { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-120q-151 0-255.5-104.5T120-480q0-138 90-239.5T440-838q13-2 23 3.5t16 14.5q6 9 6.5 21t-7.5 23q-17 26-25.5 55t-8.5 61q0 90 63 153t153 63q31 0 61.5-9t54.5-25q11-7 22.5-6.5T819-479q10 5 15.5 15t3.5 24q-14 138-117.5 229T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-120q-151 0-255.5-104.5T120-480q0-138 90-239.5T440-838q13-2 23 3.5t16 14.5q6 9 6.5 21t-7.5 23q-17 26-25.5 55t-8.5 61q0 90 63 153t153 63q31 0 61.5-9t54.5-25q11-7 22.5-6.5T819-479q10 5 15.5 15t3.5 24q-14 138-117.5 229T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-layout-text-default-contextual, #131525); } @media (forced-colors: active) { .kern-icon--dark-mode { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } /** * @file _accordion.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 07.04.2026 * @@VERSION@@ * @brief Styles für die Accordion-Komponente. * * Diese Datei enthält die CSS-Regeln, um die Accordion-Komponente * visuell darzustellen. Sie definiert das Grundaussehen, * Zuständ (:hover, :focus) */ .kern-accordion { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; border-radius: var(--kern-metric-border-radius-none, 0px); border-top: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-decorative-border-contextual, #C0C3D5); border-bottom: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-decorative-border-contextual, #C0C3D5); } .kern-accordion + .kern-accordion { margin-top: calc(var(--kern-metric-border-width-light) * -1); } .kern-accordion[open] > summary::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-action-default-contextual, #2044AA); } @media (forced-colors: active) { .kern-accordion[open] > summary::after { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-accordion[open] > summary:not([tabindex="-1"]):focus-visible { position: relative; z-index: 1; outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 2px; box-shadow: 0 -1px 0 0 var(--kern-color-decorative-border-contextual, #C0C3D5); } .kern-accordion__header { display: flex; justify-content: space-between; align-items: center; gap: var(--kern-metric-space-small, 8px); flex: 1 0 0; padding: var(--kern-metric-space-default, 16px) var(--kern-metric-space-x-small, 4px); list-style-type: none; } .kern-accordion__header::-webkit-details-marker, .kern-accordion__header::marker { display: none; } .kern-accordion__header::after { content: ""; width: var(--kern-metric-dimension-default, 24px); min-width: var(--kern-metric-dimension-default, 24px); height: var(--kern-metric-dimension-default, 24px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E"); mask-size: cover; mask-repeat: no-repeat; background-color: var(--kern-color-action-default-contextual, #2044AA); } @media (forced-colors: active) { .kern-accordion__header::after { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-accordion__header:hover { background: var(--kern-color-action-state-indicator-tint-hover-opacity); cursor: pointer; } .kern-accordion__header:not([tabindex="-1"]):focus-visible { position: relative; z-index: 1; outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 2px; box-shadow: 0 -1px 0 0 var(--kern-color-decorative-border-contextual, #C0C3D5), 0 1px 0 0 var(--kern-color-decorative-border-contextual, #C0C3D5); } @media (forced-colors: active) { .kern-accordion__header:not([tabindex="-1"]):focus-visible { outline: auto !important; outline-offset: 4px !important; outline-width: 3px !important; outline-color: transparent !important; } } .kern-accordion__header .kern-title { color: var(--kern-color-action-default-contextual, #2044AA); flex: 1; overflow-wrap: break-word; } .kern-accordion__body { padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px) var(--kern-metric-space-large, 24px) var(--kern-metric-space-x-small, 4px); } /** * @file _alert.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 08.04.2026 * @@VERSION@@ * @brief Styles für die Alert-Komponente. * * Diese Datei enthält die CSS-Regeln, um die Alert-Komponente * visuell darzustellen. Sie definiert das Grundaussehen. * Variationen (info, success, warning und danger) * Alle Variationen können mit und ohne body text dargestellt werden. */ .kern-alert { border-radius: var(--kern-metric-border-radius-default, 4px); outline: var(--kern-metric-border-width-default, 2px) solid transparent; } .kern-alert--info { outline-color: var(--kern-color-feedback-info-contextual, #006B8C); background-color: var(--kern-color-feedback-info-background-contextual, #C0F3FF); } .kern-alert--info .kern-icon--info { background-color: var(--kern-color-feedback-info-contextual, #006B8C); } @media (forced-colors: active) { .kern-alert--info .kern-icon--info { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-alert--info .kern-alert__body { outline: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-info-contextual, #006B8C); } .kern-alert--success { outline-color: var(--kern-color-feedback-success-contextual, #007155); background-color: var(--kern-color-feedback-success-background-contextual, #CDF2E4); } .kern-alert--success .kern-icon--success { background-color: var(--kern-color-feedback-success-contextual, #007155); } @media (forced-colors: active) { .kern-alert--success .kern-icon--success { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-alert--success .kern-alert__body { outline: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-success-contextual, #007155); } .kern-alert--warning { outline-color: var(--kern-color-feedback-warning-contextual, #925400); background-color: var(--kern-color-feedback-warning-background-contextual, #FFE7B6); } .kern-alert--warning .kern-icon--warning { background-color: var(--kern-color-feedback-warning-contextual, #925400); } @media (forced-colors: active) { .kern-alert--warning .kern-icon--warning { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-alert--warning .kern-alert__body { outline: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-warning-contextual, #925400); } .kern-alert--danger { outline-color: var(--kern-color-feedback-danger-contextual, #C31C13); background-color: var(--kern-color-feedback-danger-background-contextual, #FEE4E0); } .kern-alert--danger .kern-icon--danger { background-color: var(--kern-color-feedback-danger-contextual, #C31C13); } @media (forced-colors: active) { .kern-alert--danger .kern-icon--danger { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-alert--danger .kern-alert__body { outline: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-danger-contextual, #C31C13); } .kern-alert__header { display: flex; padding: var(--kern-metric-space-default, 16px); align-items: center; } .kern-alert__header .kern-icon { width: var(--kern-metric-dimension-large, 32px); height: var(--kern-metric-dimension-large, 32px); min-width: var(--kern-metric-dimension-large, 32px); min-height: var(--kern-metric-dimension-large, 32px); } .kern-alert .kern-title { padding-left: var(--kern-metric-space-small, 8px); padding-right: var(--kern-metric-space-small, 8px); } .kern-alert__body { padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-large, 24px) var(--kern-metric-space-default, 16px) var(--kern-metric-space-large, 24px); background: var(--kern-color-layout-background-default-contextual, #FFF); border-radius: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-border-radius-default, 4px) var(--kern-metric-border-radius-default, 4px); display: flex; flex-direction: column; gap: var(--kern-metric-space-small, 8px); } /** * @file _badge.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 08.04.2026 * @@VERSION@@ * @brief Styles für die Badge-Komponente. * * Diese Datei enthält die CSS-Regeln, um die Badge-Komponente * visuell darzustellen. Sie definiert das Grundaussehen. * Variationen (info, success, warning und danger) * Alle Variationen können mit und ohne Icon dargestellt werden. */ .kern-badge { display: inline-flex; align-items: center; padding: var(--kern-metric-space-2x-small, 2px) var(--kern-metric-space-default, 16px) var(--kern-metric-space-2x-small, 2px) var(--kern-component-badge-space-left, 12px); border-radius: var(--kern-metric-border-radius-default, 4px); min-height: var(--kern-metric-dimension-large, 32px); } .kern-badge .kern-label { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-label-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-label-default, 600); line-height: var(--kern-typography-line-height-medium-static, 24px); padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px); } .kern-badge .kern-icon { width: var(--kern-metric-dimension-default, 24px); height: var(--kern-metric-dimension-default, 24px); min-width: var(--kern-metric-dimension-default, 24px); min-height: var(--kern-metric-dimension-default, 24px); } .kern-badge--info { background: var(--kern-color-feedback-info-background-contextual, #C0F3FF); border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-info-contextual, #006B8C); } .kern-badge--info .kern-icon { background-color: var(--kern-color-feedback-info-contextual, #006B8C); } @media (forced-colors: active) { .kern-badge--info .kern-icon { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-badge--success { background: var(--kern-color-feedback-success-background-contextual, #DEF6ED); border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-success-contextual, #007155); } .kern-badge--success .kern-icon { background-color: var(--kern-color-feedback-success-contextual, #007155); } @media (forced-colors: active) { .kern-badge--success .kern-icon { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-badge--warning { background: var(--kern-color-feedback-warning-background-contextual, #FFE7B6); border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-warning-contextual, #925400); } .kern-badge--warning .kern-icon { background-color: var(--kern-color-feedback-warning-contextual, #925400); } @media (forced-colors: active) { .kern-badge--warning .kern-icon { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-badge--danger { background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0); border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-feedback-danger-contextual, #C31C13); } .kern-badge--danger .kern-icon { background-color: var(--kern-color-feedback-danger-contextual, #C31C13); } @media (forced-colors: active) { .kern-badge--danger .kern-icon { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-badge--small { padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-small, 8px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px); min-height: var(--kern-metric-dimension-default, 24px); border: none; } .kern-badge--small.kern-badge--info { box-shadow: inset 0 0 0 1px var(--kern-color-feedback-info-contextual, #006B8C); } .kern-badge--small.kern-badge--success { box-shadow: inset 0 0 0 1px var(--kern-color-feedback-success-contextual, #007155); } .kern-badge--small.kern-badge--warning { box-shadow: inset 0 0 0 1px var(--kern-color-feedback-warning-contextual, #925400); } .kern-badge--small.kern-badge--danger { box-shadow: inset 0 0 0 1px var(--kern-color-feedback-danger-contextual, #C31C13); } .kern-badge--small .kern-label { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-label-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-label-default, 600); line-height: var(--kern-typography-line-height-medium-static, 24px); padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px); } .kern-badge--small .kern-icon { width: var(--kern-metric-dimension-small, 20px); height: var(--kern-metric-dimension-small, 20px); min-width: var(--kern-metric-dimension-small, 20px); min-height: var(--kern-metric-dimension-small, 20px); } /** * @file _button.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 08.04.2026 * @@VERSION@@ * @brief Styles für die Button-Komponente. * * Diese Datei enthält die CSS-Regeln, um die Button-Komponente * visuell darzustellen. Sie definiert das Grundaussehen, * Zustände (:hover, :active, :focus, :disabled) und mögliche * Variationen (primary, secondary und tertiary). */ .kern-btn { display: inline-flex; min-height: var(--kern-metric-dimension-x-large, 48px); padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px); justify-content: center; align-items: center; vertical-align: top; gap: var(--kern-metric-space-none, 0px); border: none; border-radius: var(--kern-metric-border-radius-default, 4px); position: relative; } .kern-btn:has(.kern-sr-only) { width: var(--kern-metric-dimension-x-large, 48px); } @media (max-width: 575px) { .kern-btn:has(.kern-sr-only-mobile) { width: var(--kern-metric-dimension-x-large, 48px); } } .kern-btn .kern-label { padding: var(--kern-metric-space-small, 8px); } .kern-btn:not(:disabled):hover, .kern-btn:not([aria-disabled=true]):hover { cursor: pointer; } .kern-btn:not([disabled]):not([tabindex="-1"]):focus, .kern-btn:not([aria-disabled=true]):not([tabindex="-1"]):focus { border-radius: var(--kern-metric-border-radius-default, 0.25rem); outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 2px; } @media (forced-colors: active) { .kern-btn:not([disabled]):not([tabindex="-1"]):focus-visible, .kern-btn:not([aria-disabled=true]):not([tabindex="-1"]):focus-visible { outline: auto !important; outline-offset: 4px !important; outline-width: 3px !important; outline-color: transparent !important; } } .kern-btn:disabled, .kern-btn[disabled], .kern-btn[aria-disabled=true] { cursor: not-allowed !important; } .kern-btn--block { width: 100%; } .kern-btn--primary { background: var(--kern-color-action-default-contextual, #2044AA); } @media (forced-colors: active) { .kern-btn--primary { border: 3px solid transparent; } } .kern-btn--primary .kern-label { color: var(--kern-color-action-on-default-contextual, #FFF); } .kern-btn--primary > .kern-icon { background-color: var(--kern-color-action-on-default-contextual, #FFF); } @media (forced-colors: active) { .kern-btn--primary > .kern-icon { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-btn--primary:not(:disabled):hover, .kern-btn--primary:not([aria-disabled=true]):hover { background: var(--kern-color-action-state-indicator-shade-hover); } .kern-btn--primary:active { background: var(--kern-color-action-state-indicator-shade-active); } .kern-btn--primary:disabled, .kern-btn--primary[disabled], .kern-btn--primary[aria-disabled=true] { background: var(--kern-color-action-default-contextual, #2044AA); opacity: var(--kern-color-action-state-opacity-disabled, 0.4); } .kern-btn--secondary { border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default-contextual, #2044AA); background: transparent; } .kern-btn--secondary .kern-label { color: var(--kern-color-action-default-contextual, #2044AA); } .kern-btn--secondary > .kern-icon { background-color: var(--kern-color-action-default-contextual, #2044AA); } @media (forced-colors: active) { .kern-btn--secondary > .kern-icon { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-btn--secondary:not(:disabled):hover, .kern-btn--secondary:not([aria-disabled=true]):hover { background: var(--kern-color-action-state-indicator-tint-hover-opacity); } .kern-btn--secondary:active { background: var(--kern-color-action-state-indicator-tint-active-opacity); } .kern-btn--secondary:disabled, .kern-btn--secondary[disabled], .kern-btn--secondary[aria-disabled=true] { opacity: var(--kern-color-action-state-opacity-disabled, 0.4); } @media (forced-colors: active) { .kern-btn--secondary { border: 1px solid transparent !important; } } .kern-btn--tertiary { background: transparent; } .kern-btn--tertiary .kern-label { color: var(--kern-color-action-default-contextual, #2044AA); } .kern-btn--tertiary > .kern-icon { background-color: var(--kern-color-action-default-contextual, #2044AA); } @media (forced-colors: active) { .kern-btn--tertiary > .kern-icon { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-btn--tertiary:not(:disabled):hover, .kern-btn--tertiary:not([aria-disabled=true]):hover { background: var(--kern-color-action-state-indicator-tint-hover-opacity); } .kern-btn--tertiary:active { background: var(--kern-color-action-state-indicator-tint-active-opacity); } .kern-btn--tertiary:disabled, .kern-btn--tertiary[disabled], .kern-btn--tertiary[aria-disabled=true] { opacity: var(--kern-color-action-state-opacity-disabled, 0.4); } .kern-btn--tertiary .kern-label { text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: var(--kern-3, 3px); } .kern-btn--tertiary:hover .kern-label { text-decoration-thickness: var(--kern-3, 3px); } .kern-btn--tertiary:hover:disabled .kern-label, .kern-btn--tertiary:hover[disabled] .kern-label, .kern-btn--tertiary:hover[aria-disabled=true] .kern-label { text-decoration-thickness: var(--kern-metric-border-width-light, 1px); } .kern-btn--tertiary:has(.kern-icon) .kern-label { text-decoration: none; } .kern-btn--x-small { position: relative; min-height: var(--kern-metric-dimension-large, 32px); padding: var(--kern-metric-space-none, 0) var(--kern-metric-space-small, 8px); margin-top: var(--kern-metric-space-small, 8px); margin-bottom: var(--kern-metric-space-small, 8px); } .kern-btn--x-small .kern-label { font-size: var(--kern-typography-font-size-small-static, 16px); padding: var(--kern-metric-space-none, 0) var(--kern-metric-space-small, 8px) var(--kern-metric-space-none, 0) var(--kern-metric-space-x-small, 4px); } .kern-btn--x-small .kern-icon { width: var(--kern-metric-dimension-small, 20px); height: var(--kern-metric-dimension-small, 20px); min-width: var(--kern-metric-dimension-small, 20px); min-height: var(--kern-metric-dimension-small, 20px); } .kern-btn--x-small::before { content: ""; display: block; position: absolute; top: calc(var(--kern-metric-space-small, 8px) * -1); right: var(--kern-metric-space-none, 0); bottom: calc(var(--kern-metric-space-small, 8px) * -1); left: var(--kern-metric-space-none, 0); background: transparent; } .kern-btn--x-small:has(.kern-sr-only) { width: var(--kern-metric-dimension-large, 32px); margin: var(--kern-metric-space-small, 8px); } .kern-btn--x-small:has(.kern-sr-only)::before { right: calc(var(--kern-metric-space-small, 8px) * -1); left: calc(var(--kern-metric-space-small, 8px) * -1); } @media (max-width: 575px) { .kern-btn--x-small:has(.kern-sr-only-mobile) { width: var(--kern-metric-dimension-large, 32px); margin: var(--kern-metric-space-small, 8px); } .kern-btn--x-small:has(.kern-sr-only-mobile)::before { right: calc(var(--kern-metric-space-small, 8px) * -1); left: calc(var(--kern-metric-space-small, 8px) * -1); } } .kern-btn-wrapper { display: flex; gap: var(--kern-metric-space-small, 8px); flex-wrap: wrap; } .kern-btn-wrapper:has(.kern-btn--x-small):has(.kern-sr-only) { gap: var(--kern-metric-space-none, 0px); } @media (max-width: 575px) { .kern-btn-wrapper:has(.kern-btn--x-small):has(.kern-sr-only-mobile) { gap: var(--kern-metric-space-none, 0px); } } /** * @file _card.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 29.11.2024 * @modified 08.04.2026 * @@VERSION@@ * @brief Styles für die Card-Komponente. * * Diese Datei enthält die CSS-Regeln, um die Card-Komponente * visuell darzustellen. Sie definiert das Grundaussehen. * Variationen (default, small, large und active) * Zustände active Card (:hover, :focus: :active), gesammte Card ist als Link klickbar. * Cards innerhalb einer Zeile werden gleiche höhe dargestellt, * Mit Modifier (hug) hat Cards eigene höhe. */ .kern-card { display: flex; padding: var(--kern-metric-space-none, 0px); flex-direction: column; align-items: flex-start; gap: var(--kern-metric-space-none, 0px); flex-shrink: 0; border-radius: var(--kern-metric-border-radius-default, 4px); border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-decorative-border-contextual, #C0C3D5); background: var(--kern-color-layout-background-default-contextual, #FFF); } .kern-card:has(.kern-link--stretched:hover) { background: var(--kern-color-layout-background-default-contextual, #FFF); } .kern-card { height: 100%; } .kern-card--hug { height: auto; } .kern-card--hug .kern-card__container { height: auto; } .kern-card__media { display: flex; padding: 0px var(--kern-metric-space-none, 0px); justify-content: center; align-items: center; align-self: stretch; } .kern-card__media * { width: 100%; overflow: hidden; border-top-left-radius: var(--kern-metric-border-radius-default, 4px); border-top-right-radius: var(--kern-metric-border-radius-default, 4px); } .kern-card__container { display: flex; padding: var(--kern-metric-space-large, 24px); flex-direction: column; align-items: flex-start; gap: var(--kern-metric-space-default, 16px); align-self: stretch; height: 100%; } .kern-card__header { display: flex; padding: var(--kern-metric-space-none, 0px); flex-direction: column; align-items: flex-start; gap: var(--kern-metric-space-none, 0px); align-self: stretch; } .kern-card__body { display: flex; padding: var(--kern-metric-space-none, 0px); flex-direction: column; align-items: flex-start; gap: var(--kern-metric-space-small, 8px); align-self: stretch; flex: 1 1 auto; } .kern-card__footer { display: flex; flex-direction: row; flex-wrap: wrap; padding-top: var(--kern-metric-space-default, 16px); align-items: flex-start; gap: var(--kern-metric-space-default, 16px); align-self: stretch; } .kern-card__footer .kern-btn { flex: 1 1 0; min-width: fit-content; } .kern-card--active, .kern-card--interactive { position: relative; } .kern-card--active .kern-link--stretched, .kern-card--interactive .kern-link--stretched { color: var(--kern-color-action-default-contextual, #2044AA); letter-spacing: var(--kern-metric-space-none, 0px); text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: var(--kern-1, 1px); /* 4.762% */ text-decoration-skip-ink: none; text-underline-offset: var(--kern-3, 3px); /* 9.524% */ } .kern-card--active .kern-link--stretched:after, .kern-card--interactive .kern-link--stretched:after { position: absolute; top: var(--kern-metric-space-none, 0px); right: var(--kern-metric-space-none, 0px); bottom: var(--kern-metric-space-none, 0px); left: var(--kern-metric-space-none, 0px); z-index: 1; pointer-events: auto; content: ""; background-color: transparent; } .kern-card--active .kern-link--stretched:hover, .kern-card--interactive .kern-link--stretched:hover { text-decoration-thickness: 3px; /* 14.286% */ } .kern-card--active .kern-link--stretched:hover:after, .kern-card--interactive .kern-link--stretched:hover:after { background: var(--kern-color-action-state-indicator-tint-hover-opacity); } .kern-card--active .kern-link--stretched:active:after, .kern-card--interactive .kern-link--stretched:active:after { background: var(--kern-color-action-state-indicator-tint-active-opacity); } .kern-card--active .kern-link--stretched:focus-visible, .kern-card--interactive .kern-link--stretched:focus-visible { outline: none; } .kern-card--active .kern-link--stretched:focus-visible:after, .kern-card--interactive .kern-link--stretched:focus-visible:after { border-radius: var(--kern-metric-border-radius-default, 0.25rem); outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 0; } @media (forced-colors: active) { .kern-card--active .kern-link--stretched:focus-visible:after, .kern-card--interactive .kern-link--stretched:focus-visible:after { outline: auto !important; outline-offset: 4px !important; outline-width: 3px !important; outline-color: transparent !important; } } .kern-card--small .kern-card__container { padding: var(--kern-metric-space-default, 16px); gap: var(--kern-metric-space-small, 8px); } .kern-card--small .kern-card__container .kern-card__header .kern-preline { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); color: var(--kern-color-layout-text-muted-contextual, #51577A); padding: var(--kern-metric-baseline-preline-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-preline-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-card--small .kern-card__container .kern-card__header .kern-title { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-title-small-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-small-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-title-default, 600); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-card--small .kern-card__container .kern-card__header .kern-subline { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); color: var(--kern-color-layout-text-muted-contextual, #51577A); padding: var(--kern-metric-baseline-subline-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-small-padding-bottom, 9px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-subline-default, 500); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-card--small .kern-card__container .kern-card__body .kern-body { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-card--large .kern-card__container { padding: var(--kern-metric-space-x-large, 32px); gap: var(--kern-metric-space-large, 24px); } .kern-card--large .kern-card__container .kern-card__header .kern-preline { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); color: var(--kern-color-layout-text-muted-contextual, #51577A); padding: var(--kern-metric-baseline-preline-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-large-static, 21px); font-weight: var(--kern-typography-font-weight-preline-default, 400); line-height: var(--kern-typography-line-height-large-static, 32px); } .kern-card--large .kern-card__container .kern-card__header .kern-title { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-title-large-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-large-padding-bottom, 9px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-large-adaptive, 26px); font-weight: var(--kern-typography-font-weight-title-default, 600); line-height: var(--kern-typography-line-height-large-adaptive, 32px); } .kern-card--large .kern-card__container .kern-card__header .kern-subline { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); color: var(--kern-color-layout-text-muted-contextual, #51577A); padding: var(--kern-metric-baseline-subline-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-large-static, 21px); font-weight: var(--kern-typography-font-weight-subline-default, 500); line-height: var(--kern-typography-line-height-large-static, 32px); } .kern-card--large .kern-card__container .kern-card__body .kern-body { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-large-static, 21px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-large-static, 32px); } .kern-card--surface { background: var(--kern-color-layout-layer-surface-contextual, #F7F7F9); } /** * @file _check.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 09.04.2026 * @@VERSION@@ * @brief Styles für die Checkbox und Radio Komponente. * * Diese Datei enthält gemeinsame CSS-Regeln, um die Checkbox und Radio Komponente * visuell darzustellen. Sie definiert das Grundaussehen, * Zuständ (:hover, :focus, :checked, disabled) */ .kern-form-check { display: grid; grid-template-columns: var(--kern-metric-dimension-large, 32px) auto; align-items: start; padding-right: var(--kern-metric-space-default, 16px); } .kern-form-check__radio, .kern-form-check__checkbox { width: var(--kern-metric-dimension-large, 32px); height: var(--kern-metric-dimension-large, 32px); border: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border-contextual, #1D2034); background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7); margin: var(--kern-metric-space-none, 0px); appearance: none; } .kern-form-check__radio:hover, .kern-form-check__checkbox:hover { border: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border-contextual, #1D2034); } .kern-form-check__radio:focus, .kern-form-check__radio:focus-visible, .kern-form-check__checkbox:focus, .kern-form-check__checkbox:focus-visible { outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 0; border: var(--kern-metric-border-width-none, 0px); forced-color-adjust: none; } @media (forced-colors: active) { .kern-form-check__radio:focus, .kern-form-check__radio:focus-visible, .kern-form-check__checkbox:focus, .kern-form-check__checkbox:focus-visible { outline: auto !important; outline-offset: 4px !important; outline-width: 3px !important; outline-color: transparent !important; } } .kern-form-check__radio:focus:hover, .kern-form-check__radio:focus-visible:hover, .kern-form-check__checkbox:focus:hover, .kern-form-check__checkbox:focus-visible:hover { border: var(--kern-metric-border-width-none, 0px); } .kern-form-check__radio:checked:focus, .kern-form-check__radio:checked:focus-visible, .kern-form-check__checkbox:checked:focus, .kern-form-check__checkbox:checked:focus-visible { outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 0; border: var(--kern-metric-border-width-none, 0px); forced-color-adjust: none; } @media (forced-colors: active) { .kern-form-check__radio:checked:focus, .kern-form-check__radio:checked:focus-visible, .kern-form-check__checkbox:checked:focus, .kern-form-check__checkbox:checked:focus-visible { outline: auto !important; outline-offset: 4px !important; outline-width: 3px !important; outline-color: transparent !important; } } .kern-form-check__radio:checked:focus:hover, .kern-form-check__radio:checked:focus-visible:hover, .kern-form-check__checkbox:checked:focus:hover, .kern-form-check__checkbox:checked:focus-visible:hover { border: var(--kern-metric-border-width-none, 0px); } .kern-form-check__radio--error:focus, .kern-form-check__radio--error:focus-visible, .kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible { outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 0; outline-color: var(--kern-color-feedback-danger-contextual, #C31C13); } @media (forced-colors: active) { .kern-form-check__radio--error:focus, .kern-form-check__radio--error:focus-visible, .kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible { outline: auto !important; outline-offset: 4px !important; outline-width: 3px !important; outline-color: transparent !important; } } @media (forced-colors: active) { .kern-form-check__radio--error:focus, .kern-form-check__radio--error:focus-visible, .kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible { box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-layout-background-inverted) !important; background-color: var(--kern-color-layout-background-default) !important; } } .kern-form-check__radio--error:checked:focus, .kern-form-check__radio--error:checked:focus-visible, .kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible { outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 0; outline-color: var(--kern-color-feedback-danger-contextual, #C31C13); } @media (forced-colors: active) { .kern-form-check__radio--error:checked:focus, .kern-form-check__radio--error:checked:focus-visible, .kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible { outline: auto !important; outline-offset: 4px !important; outline-width: 3px !important; outline-color: transparent !important; } } @media (forced-colors: active) { .kern-form-check__radio--error:checked:focus, .kern-form-check__radio--error:checked:focus-visible, .kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible { box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-layout-background-inverted) !important; background-color: var(--kern-color-layout-background-default) !important; } } .kern-form-check__radio[disabled], .kern-form-check__radio[aria-disabled=true], .kern-form-check__checkbox[disabled], .kern-form-check__checkbox[aria-disabled=true] { outline: 0; opacity: var(--kern-color-action-state-opacity-disabled, 0.4); } .kern-form-check__radio[disabled]:checked, .kern-form-check__radio[aria-disabled=true]:checked, .kern-form-check__checkbox[disabled]:checked, .kern-form-check__checkbox[aria-disabled=true]:checked { outline: var(--kern-metric-border-width-none, 0px); } .kern-form-check__radio[disabled]:hover, .kern-form-check__radio[aria-disabled=true]:hover, .kern-form-check__checkbox[disabled]:hover, .kern-form-check__checkbox[aria-disabled=true]:hover { cursor: default; } .kern-form-check__radio[disabled] ~ .kern-label, .kern-form-check__radio[aria-disabled=true] ~ .kern-label, .kern-form-check__checkbox[disabled] ~ .kern-label, .kern-form-check__checkbox[aria-disabled=true] ~ .kern-label { opacity: var(--kern-color-action-state-opacity-disabled, 0.4); cursor: default; } .kern-form-check .kern-label { font-weight: var(--kern-typography-font-weight-label-subtle, 400); padding-top: var(--kern-metric-space-x-small, 4px); padding-left: var(--kern-metric-space-default, 16px); } .kern-form-check .kern-label:has(.kern-label__optional) { display: flex; align-items: center; align-content: center; gap: var(--kern-metric-space-none, 0px) var(--kern-metric-space-small, 8px); align-self: stretch; flex-wrap: wrap; } .kern-form-check .kern-label__optional { color: var(--kern-color-layout-text-muted-contextual, #404565); font-weight: var(--kern-typography-font-weight-label-subtle, 400); } .kern-form-check .kern-error { grid-column: span 2; padding-top: var(--kern-metric-space-small, 8px); } .kern-form-check .kern-error .kern-icon { width: var(--kern-metric-dimension-default, 24px); height: var(--kern-metric-dimension-default, 24px); min-width: var(--kern-metric-dimension-default, 24px); min-height: var(--kern-metric-dimension-default, 24px); } .kern-form-check--error { border-left: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-feedback-danger-contextual, #C31C13); padding-left: var(--kern-metric-space-default, 16px); } .kern-form-check--error .kern-form-check__checkbox--error { border-color: var(--kern-color-feedback-danger-contextual, #C31C13) !important; outline-color: var(--kern-color-feedback-danger-contextual, #C31C13) !important; background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0); } .kern-form-check--error .kern-form-check__radio:before { background-color: var(--kern-color-feedback-danger-contextual, #C31C13); } /** * @file _checkbox.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 09.04.2026 * @@VERSION@@ * @brief Styles für die Checkbox Komponente. * * Diese Datei enthält, von der _check.scss abweichende, CSS-Regeln, um die Checkbox Komponente * visuell darzustellen. */ .kern-form-check__checkbox { border-radius: var(--kern-metric-border-radius-small, 2px); } .kern-form-check__checkbox::before { content: ""; } .kern-form-check__checkbox:focus::before, .kern-form-check__checkbox:focus-visible::before { margin: var(--kern-6, 6px); } .kern-form-check__checkbox:checked::before { display: block; position: relative; left: var(--kern-3, 3px); top: var(--kern-8, 8px); transform: rotate(47deg) translate(-50%, -50%); background-color: transparent; border-width: var(--kern-metric-space-none, 0px) var(--kern-metric-border-width-default, 2px) var(--kern-metric-border-width-default, 2px) var(--kern-metric-space-none, 0px); border-color: var(--kern-color-form-input-border-contextual, #1D2034); border-style: solid; height: var(--kern-metric-dimension-x-small, 16px); width: var(--kern-metric-dimension-2x-small, 8px); margin: 4px; } .kern-form-check__checkbox:checked:hover::before { margin: var(--kern-metric-space-2x-small, 2px); } .kern-form-check__checkbox:checked:focus::before, .kern-form-check__checkbox:checked:focus-visible::before { margin: var(--kern-6, 6px); } .kern-form-check__checkbox--error { border-color: var(--kern-color-feedback-danger-contextual, #C31C13) !important; outline-color: var(--kern-color-feedback-danger-contextual, #C31C13) !important; background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0); } .kern-form-check__checkbox--error:checked::before { border-color: var(--kern-color-feedback-danger-contextual, #C31C13); } .kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible { box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger-contextual, #C31C13); outline: var(--kern-metric-border-width-none, 0px); border: var(--kern-metric-border-width-none, 0px); } @media (forced-colors: active) { .kern-form-check__checkbox--error:checked:focus, .kern-form-check__checkbox--error:checked:focus-visible { outline: auto !important; outline-offset: 4px !important; outline-width: 3px !important; outline-color: transparent !important; } } .kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible { box-shadow: 0 0 0 var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger-contextual, #C31C13); outline: var(--kern-metric-border-width-none, 0px); border: var(--kern-metric-border-width-none, 0px); } @media (forced-colors: active) { .kern-form-check__checkbox--error:focus, .kern-form-check__checkbox--error:focus-visible { outline: auto !important; outline-offset: 4px !important; outline-width: 3px !important; outline-color: transparent !important; } } /** * @file _dialog.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 09.04.2026 * @@VERSION@@ * @brief Styles für die Dialog Komponente. * * Diese Datei enthält die CSS-Regeln, um die Dialog Komponente * visuell darzustellen. Sie definiert das Grundaussehen. */ .kern-dialog { max-width: var(--kern-small, 768px); border-radius: var(--kern-metric-border-radius-large, 8px); border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border-contextual, #6E7597); background: var(--kern-color-layout-background-default-contextual, #FFF); padding: var(--kern-metric-space-none, 0px); } .kern-dialog__header { display: flex; justify-content: space-between; min-height: var(--kern-metric-dimension-3x-large, 64px); padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-small, 8px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-large, 32px); align-items: flex-start; gap: var(--kern-metric-space-default, 16px); } .kern-dialog .kern-title { display: flex; align-items: flex-start; gap: var(--kern-metric-space-none, 0px); flex: 1 0 0; } .kern-dialog__body { display: flex; padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-x-large, 32px) var(--kern-metric-space-large, 24px) var(--kern-metric-space-x-large, 32px); flex-direction: column; align-items: flex-start; gap: var(--kern-metric-space-default, 16px); } .kern-dialog__footer { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; align-items: flex-start; gap: var(--kern-metric-space-default, 16px); padding: var(--kern-metric-space-large, 24px) var(--kern-metric-space-x-large, 32px) var(--kern-metric-space-x-large, 32px) var(--kern-metric-space-x-large, 32px); border-top: 1px solid var(--kern-color-decorative-border-contextual, #C0C3D5); } @media (max-width: 576px) { .kern-dialog__footer { flex-direction: column; } } .kern-dialog__footer .kern-btn { flex-grow: 1; align-self: stretch; } .kern-dialog__footer .kern-btn + .kern-btn { margin-left: var(--kern-metric-space-none, 0px); } .kern-dialog::backdrop { background: var(--kern-color-black, #000); opacity: var(--kern-color-action-state-opacity-overlay, 0.72); } @media (max-width: 768px) { .kern-dialog { overflow-y: auto; min-width: 100%; max-width: 100%; margin-bottom: var(--kern-metric-space-none, 0px); border-radius: var(--border-radius-large, 8px) var(--kern-metric-border-radius-large, 8px) var(--kern-metric-border-radius-none, 0px) var(--kern-metric-border-radius-none, 0px); } } /** * @file _description-list.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 23.05.2025 * @@VERSION@@ * @brief Styles für die Description-list Komponente. * * Diese Datei enthält die CSS-Regeln, um die description-list Komponente * visuell darzustellen. Sie definiert das Grundaussehen. * Description-list ist ein Key / Value pairs darstellung * Variationen (horizontal und vertikal) */ .kern-description-list { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; display: flex; flex-direction: column; align-items: flex-start; gap: var(--kern-metric-space-small, 8px); } .kern-description-list p { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } .kern-description-list--col .kern-description-list-item { gap: var(--kern-metric-border-width-none, 0px); } .kern-description-list--col .kern-description-list-item__key, .kern-description-list--col .kern-description-list-item__value { width: 100%; max-width: 100%; } .kern-description-list-item { display: flex; padding: var(--kern-metric-space-none, 0px); align-items: flex-start; align-content: flex-start; gap: var(--kern-metric-space-none, 0px); align-self: stretch; flex-wrap: wrap; flex-direction: column; word-break: break-word; } @media (min-width: 768px) { .kern-description-list-item { flex-direction: row; gap: var(--kern-metric-space-x-large, 32px); } } .kern-description-list-item__key { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); font-weight: var(--kern-typography-font-weight-semi-bold, 600); } @media (min-width: 768px) { .kern-description-list-item__key { width: 30%; max-width: var(--kern-component-description-list-term-max-width, 352px); } } .kern-description-list-item__value { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-description-list-item__value ul { list-style: none; padding-left: var(--kern-metric-border-width-none, 0px); } @media (min-width: 768px) { .kern-description-list-item__value { width: calc(70% - var(--kern-metric-space-x-large, 32px)); } } /** * @file _divider.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 09.04.2026 * @@VERSION@@ * @brief Styles für die Divider Komponente. * * Diese Datei enthält die CSS-Regeln, um die Divider Komponente * visuell darzustellen. Sie definiert das Grundaussehen. */ .kern-divider { border: var(--kern-metric-border-radius-none, 0px); margin: var(--kern-metric-space-none, 0px); height: var(--kern-metric-border-width-light, 1px); background-color: var(--kern-color-layout-border-contextual, #6E7597); } @media (forced-colors: active) { .kern-divider { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-divider--decorative { background-color: var(--kern-color-decorative-border-contextual, #C0C3D5); } /** * @file _dropdown.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 29.08.2025 * @version 2.x.x * @brief Styles für die Dropdown Komponente. * * Diese Datei enthält die CSS-Regeln, um die Dropdown Komponente * visuell darzustellen. Sie definiert das Grundaussehen. * * Dropdown ist noch in der Entwicklungsphase und nicht teil des Desingn System CSS-Framworks!!! * */ .kern-dropdown { position: relative; } .kern-dropdown[open] .kern-dropdown__header::before { content: ""; width: 100vw; height: 100vh; position: fixed; top: var(--kern-metric-space-none, 0px); left: var(--kern-metric-space-none, 0px); cursor: auto; } .kern-dropdown__header { cursor: pointer; list-style-type: none; display: inline-flex; min-height: var(--kern-metric-dimension-x-large, 48px); justify-content: center; align-items: center; vertical-align: top; gap: var(--kern-metric-space-none, 0px); border: none; border-radius: var(--kern-metric-border-radius-default, 4px); color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px); color: var(--kern-color-action-default, #1A3DA5); } .kern-dropdown__header::after { content: ""; width: var(--kern-metric-dimension-default, 24px); min-width: var(--kern-metric-dimension-default, 24px); height: var(--kern-metric-dimension-default, 24px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E"); mask-size: cover; mask-repeat: no-repeat; background-color: var(--kern-color-action-default, #1A3DA5); } @media (forced-colors: active) { .kern-dropdown__header::after { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-dropdown__header:hover { background: var(--kern-color-action-state-indicator-tint-hover-opacity); cursor: pointer; } .kern-dropdown__header .kern-label { color: var(--kern-color-action-default, #1A3DA5); padding: var(--kern-metric-space-small, 8px); } .kern-dropdown__body { display: flex; z-index: 99; position: absolute; left: 0; flex-direction: column; border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default, #1A3DA5); margin: 2px; white-space: nowrap; background: var(--kern-color-layout-background-default); border-radius: var(--kern-metric-border-radius-default); } .kern-dropdown__body .kern-list { padding: 0; } .kern-dropdown__body .kern-list li { margin-bottom: var(--kern-metric-space-none, 0px); padding: 0.25rem 1rem 0.25rem 0; list-style: none; position: relative; } .kern-dropdown__body .kern-list li:hover { background: var(--kern-color-action-state-indicator-tint-hover-opacity); cursor: pointer; } .kern-dropdown__body .kern-list li .kern-link { text-decoration: none; } .kern-dropdown__body .kern-list li:has(input:checked):before { content: ""; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-action-default, #1A3DA5); position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; } @media (forced-colors: active) { .kern-dropdown__body .kern-list li:has(input:checked):before { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-dropdown__body .kern-list li label { width: 100%; display: block; padding-left: 2.5rem; color: var(--kern-color-action-default, #1A3DA5); } .kern-dropdown__body .kern-list li label input { all: unset; } /** * @file _fieldset.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 16.12.2025 * @@VERSION@@ * @brief Styles für die Fieldset Komponenten. * * Diese Datei enthält die CSS-Regeln, um die Fieldset Komponente * visuell darzustellen. Sie definiert das Grundaussehen, * Zuständ (kann Fehlermaeldung für mehrere Komponenten darstellen). */ .kern-fieldset { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; min-width: auto; } .kern-fieldset--error { border-left: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-feedback-danger-contextual, #C31C13); padding-left: var(--kern-metric-space-default, 16px); } .kern-fieldset legend { float: left; } .kern-fieldset legend.kern-label { margin-bottom: var(--kern-metric-space-small, 8px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); } .kern-fieldset:has(.kern-hint) legend.kern-label { margin-bottom: var(--kern-metric-space-none, 0px); } .kern-fieldset .kern-label:has(.kern-label__optional) { display: inline; flex-wrap: nowrap; } .kern-fieldset .kern-label__optional { color: var(--kern-color-layout-text-muted-contextual, #51577A); font-weight: var(--kern-typography-font-weight-label-subtle, 400); white-space: nowrap; } .kern-fieldset .kern-hint { clear: left; margin-bottom: var(--kern-metric-space-small, 8px); } .kern-fieldset__body { clear: left; width: 100%; display: flex; flex-direction: column; gap: var(--kern-metric-space-default, 16px); } .kern-fieldset__body--horizontal { flex-direction: row; flex-wrap: wrap; } .kern-fieldset .kern-error { margin-top: var(--kern-metric-space-small, 8px); } .kern-fieldset .kern-error .kern-icon { width: var(--kern-metric-dimension-default, 24px); height: var(--kern-metric-dimension-default, 24px); min-width: var(--kern-metric-dimension-default, 24px); min-height: var(--kern-metric-dimension-default, 24px); } /** * @file _input.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 08.04.2026 * @@VERSION@@ * @brief Styles für die Form Input Komponenten. * * Diese Datei enthält gemeinsame CSS-Regeln, um die Input Komponenten * visuell darzustellen. Sie definiert das Grundaussehen, * Zuständ (:hover, :focus, read-only, disabled) */ .kern-form-input { display: flex; padding: var(--kern-metric-space-none, 0px); flex-direction: column; align-items: flex-start; gap: var(--kern-metric-space-none, 0px); align-self: stretch; } .kern-form-input:has(input[disabled], textarea[disabled], input[aria-disabled=true], textarea[aria-disabled=true]) { cursor: not-allowed; } .kern-form-input:has(input[disabled], textarea[disabled], input[aria-disabled=true], textarea[aria-disabled=true]) .kern-label { cursor: not-allowed; } .kern-form-input .kern-label { margin-bottom: var(--kern-metric-space-small, 8px); } .kern-form-input .kern-label:has(.kern-label__optional) { display: flex; align-items: center; align-content: center; gap: var(--kern-metric-space-none, 0px) var(--kern-metric-space-small, 8px); align-self: stretch; flex-wrap: wrap; } .kern-form-input .kern-label__optional { color: var(--kern-color-layout-text-muted-contextual, #404565); font-weight: var(--kern-typography-font-weight-label-subtle, 400); } .kern-form-input:has(.kern-hint) .kern-label { margin-bottom: var(--kern-metric-space-none, 0px); } .kern-form-input .kern-hint { margin-bottom: var(--kern-metric-space-small, 8px); } .kern-form-input__input { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px); height: var(--kern-metric-dimension-x-large, 48px); align-items: center; align-self: stretch; width: 100%; border-radius: var(--kern-metric-border-radius-small, 2px); border: none; border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border-contextual, #171A2B); background: var(--kern-color-layout-layer-surface-contextual, #F7F7F9); -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; text-overflow: ellipsis; } @media (forced-colors: active) { .kern-form-input__input { border: 1px solid transparent !important; } } .kern-form-input__input:hover { border-width: var(--kern-metric-border-width-bold, 4px); padding-top: calc(var(--kern-metric-border-width-bold, 4px) - var(--kern-metric-border-width-default, 2px)); } .kern-form-input__input:focus { border-radius: var(--kern-metric-border-radius-small, 2px); background: var(--kern-color-layout-layer-surface-contextual, #F7F7F9); border: none; padding-bottom: calc(var(--kern-metric-border-width-bold, 4px) - var(--kern-metric-border-width-default, 2px)); outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 0; } .kern-form-input__input:focus:hover { padding-top: var(--kern-metric-space-none, 0px); } .kern-form-input__input[readonly], .kern-form-input__input[readonly=readonly] { border-radius: var(--kern-metric-border-radius-none, 0px); border-bottom: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border-contextual, #A5AAC3); background: inherit; cursor: not-allowed; } @media (forced-colors: active) { .kern-form-input__input[readonly], .kern-form-input__input[readonly=readonly] { border: 1px solid transparent !important; } } .kern-form-input__input[readonly]:hover, .kern-form-input__input[readonly=readonly]:hover { padding-top: var(--kern-metric-space-none, 0px); } .kern-form-input__input[readonly]:focus, .kern-form-input__input[readonly=readonly]:focus { border-radius: var(--kern-metric-border-radius-small, 2px); padding-top: var(--kern-metric-border-width-light, 1px); border-width: var(--kern-metric-border-width-none, 0); } .kern-form-input__input[disabled], .kern-form-input__input[disabled=disabled], .kern-form-input__input[aria-disabled=true] { opacity: var(--kern-color-action-state-opacity-disabled, 0.4); cursor: not-allowed; } .kern-form-input__input[disabled]:hover, .kern-form-input__input[disabled=disabled]:hover, .kern-form-input__input[aria-disabled=true]:hover { border-width: var(--kern-metric-border-width-default, 2px); padding-top: var(--kern-metric-space-none, 0px); } .kern-form-input__input--error { border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-feedback-danger-contextual, #BD0F09); background: var(--kern-color-feedback-danger-background-contextual, #FEECE8); } @media (forced-colors: active) { .kern-form-input__input--error { border: 1px solid transparent !important; } } .kern-form-input__input--error:focus { outline-color: var(--kern-color-feedback-danger-contextual, #BD0F09); background: var(--kern-color-feedback-danger-background-contextual, #FEECE8); border: none; } .kern-form-input__input--width-2 { max-width: var(--kern-metric-dimension-2x-large); } .kern-form-input__input--width-4 { max-width: var(--kern-metric-dimension-4x-large); } .kern-form-input { /* File-INPUT */ } .kern-form-input input[type=file].kern-form-input__input { order: 4; display: flex; padding: var(--kern-metric-space-large, 24px); gap: 16px var(--kern-metric-space-default, 16px); align-items: flex-start; align-self: stretch; border-radius: var(--kern-metric-border-radius-small, 2px); outline: var(--kern-metric-border-width-default, 2px) dashed var(--kern-color-form-input-border-contextual, #171A2B); border: none; height: inherit; } .kern-form-input input[type=file].kern-form-input__input:hover { outline: none; box-shadow: inset var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-border-width-bold, 4px) var(--kern-color-form-input-border-contextual, #171A2B); cursor: pointer; } @media (forced-colors: active) { .kern-form-input input[type=file].kern-form-input__input:hover { outline: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-layout-background-inverted); outline-offset: -4px; } } .kern-form-input input[type=file].kern-form-input__input:focus { outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 0; } .kern-form-input input[type=file].kern-form-input__input:focus:hover { box-shadow: none; } .kern-form-input input[type=file].kern-form-input__input[disabled], .kern-form-input input[type=file].kern-form-input__input[disabled=disabled], .kern-form-input input[type=file].kern-form-input__input[aria-disabled=true] { outline: var(--kern-metric-border-width-default, 2px) dashed var(--kern-color-form-input-border-contextual, #171A2B); box-shadow: none; cursor: not-allowed; } .kern-form-input input[type=file].kern-form-input__input::file-selector-button { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); margin-right: var(--kern-metric-space-default, 16px); min-height: var(--kern-metric-dimension-x-large, 48px); padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-default, 16px); border: none; border-radius: var(--kern-metric-border-radius-default, 4px); border: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-action-default-contextual, #1A3DA5); color: var(--kern-color-action-default-contextual, #1A3DA5); background: transparent; } .kern-form-input .kern-error { order: 5; margin-top: var(--kern-metric-space-small, 8px); } .kern-form-input .kern-error .kern-icon { width: var(--kern-metric-dimension-default, 24px); height: var(--kern-metric-dimension-default, 24px); min-width: var(--kern-metric-dimension-default, 24px); min-height: var(--kern-metric-dimension-default, 24px); } .kern-form-input--error { border-left: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-feedback-danger-contextual, #BD0F09); padding-left: var(--kern-metric-space-default, 16px); /* File-INPUT */ } .kern-form-input--error input[type=file].kern-form-input__input, .kern-form-input--error .kern-form-input__input[type=file] { outline-color: var(--kern-color-feedback-danger-contextual, #BD0F09); } .kern-form-input--error input[type=file].kern-form-input__input:hover, .kern-form-input--error .kern-form-input__input[type=file]:hover { background: var(--kern-color-feedback-danger-background-contextual, #FEECE8); box-shadow: inset var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-border-width-bold, 4px) var(--kern-color-feedback-danger-contextual, #BD0F09); } .kern-form-input--error input[type=file].kern-form-input__input:focus, .kern-form-input--error .kern-form-input__input[type=file]:focus { outline-color: var(--kern-color-feedback-danger-contextual, #BD0F09); } textarea { padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px) !important; min-height: var(--kern-metric-dimension-5x-large, 96px); } textarea.kern-form-input__input:hover { padding-top: var(--kern-metric-space-none, 0px); } input[type=checkbox], input[type=color], input[type=file], input[type=radio], input[type=range], input[type=file], input[type=file]::-webkit-file-upload-button, label, option, select { cursor: pointer; } /** * @file _input-group.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 09.04.2026 * @@VERSION@@ * @brief Styles für die Form Input Komponenten. * * Diese Datei enthält gemeinsame CSS-Regeln, um die Input Komponenten * visuell darzustellen. Sie definiert das Grundaussehen, * Zuständ (:hover, :focus, read-only, disabled) */ .kern-input-group { display: flex; align-items: stretch; width: 100%; gap: var(--kern-metric-space-x-small); flex-wrap: wrap; } .kern-input-group .kern-input-group-text { display: flex; align-items: center; border-radius: var(--kern-metric-border-radius-small, 2px); border-bottom-width: var(--kern-metric-border-width-default, 2px); padding-top: var(--kern-metric-space-none, 0px); padding-right: var(--kern-metric-space-default, 16px); padding-bottom: var(--kern-metric-space-none, 0px); padding-left: var(--kern-metric-space-default, 16px); border-bottom: 2px solid var(--kern-color-form-input-border-contextual, #1D2034); color: var(--kern-color-layout-text-muted-contextual, #51577A); height: var(--kern-metric-dimension-x-large, 48px); } .kern-input-group .kern-input-group-text--readonly { border-bottom: 1px solid var(--kern-color-layout-border-contextual, #6E7597); color: var(--kern-color-layout-text-muted-contextual, #51577A); } .kern-input-group .kern-input-group-text--disabled { opacity: var(--kern-color-action-state-opacity-disabled, 0.4); } .kern-input-group .kern-btn { flex: 1 0 auto; } .kern-input-group .kern-btn .kern-label { margin-bottom: 0; } .kern-input-group .kern-form-input__input { border-radius: var(--kern-metric-border-radius-small, 2px); flex: 999 1 220px; } /** * @file _kopfzeile.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 30.07.2025 * Version: @@VERSION@@ * @brief Styles für die Kopfzeile-Komponente. * * Diese Datei enthält die CSS-Regeln, um die Kopfzeile-Komponente * visuell darzustellen. Sie definiert das Grundaussehen. */ .kern-kopfzeile { background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7); padding: var(--kern-component-kopfzeile-padding, 5px) var(--kern-metric-space-none, 0px); } @media (forced-colors: active) { .kern-kopfzeile { border-bottom: 1px solid transparent; } } .kern-kopfzeile__content { display: flex; padding: var(--kern-1, 1px) var(--kern-metric-space-none, 0px); align-items: center; gap: var(--kern-metric-space-small, 8px); } .kern-kopfzeile__flagge { display: flex; width: var(--kern-metric-dimension-default, 24px); height: var(--kern-metric-dimension-small, 20px); padding: var(--kern-metric-space-2x-small, 2px) var(--kern-metric-space-none, 0px); } .kern-kopfzeile__flagge svg { vertical-align: baseline; outline: var(--kern-1, 1px) solid #FFFFFF; } .kern-kopfzeile__label { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-component-kopfzeile-font-family, "Fira Sans"); font-style: normal; font-weight: 400; font-size: var(--kern-component-kopfzeile-font-size, 16px); line-height: var(--kern-component-kopfzeile-line-height, 20px); } @media only screen and (max-width: 768px) { .kern-kopfzeile__flagge { width: var(--kern-18, 18px); height: var(--kern-16, 16px); } .kern-kopfzeile__label { font-size: var(--kern-14, 14px); line-height: var(--kern-16, 16px); } .kern-kopfzeile .kern-container, .kern-kopfzeile .kern-container-fluid { padding-left: var(--kern-metric-space-small, 8px); padding-right: var(--kern-metric-space-small, 8px); } } /** * @file _loader.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 09.04.2026 * @@VERSION@@ * @brief Styles für die Loader Komponente. * * Diese Datei enthält die CSS-Regeln, um die Loader Komponente * visuell darzustellen. Sie definiert das Grundaussehen. */ .kern-loader { display: none; box-sizing: border-box; border-width: var(--kern-10, 10px); border-style: solid; border-color: var(--kern-color-feedback-default-background-contextual, #DFE1EA) var(--kern-color-feedback-default-background-contextual, #DFE1EA) var(--kern-color-feedback-default-background-contextual, #DFE1EA) var(--kern-color-feedback-default-contextual, #454B6B); width: var(--kern-metric-dimension-5x-large, 96px); height: var(--kern-metric-dimension-5x-large, 96px); border-radius: 50%; animation: rotation 1.5s linear infinite; position: relative; } @media (forced-colors: active) { .kern-loader { border-color: var(--kern-color-layout-background-default) var(--kern-color-layout-background-default) var(--kern-color-layout-background-default) var(--kern-color-layout-background-inverted); forced-color-adjust: none; outline-color: transparent; box-shadow: 0 0 0 1px var(--kern-color-layout-background-inverted), inset 0 0 0 1px var(--kern-color-layout-background-inverted); } } .kern-loader:before, .kern-loader:after { content: ""; height: var(--kern-10, 10px); background: var(--kern-color-feedback-default-contextual, #454B6B); position: absolute; } .kern-loader:before { width: var(--kern-metric-border-radius-small, 2px); border-radius: var(--kern-metric-space-none, 0px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-space-none, 0px); left: var(--kern-7, 7px); top: var(--kern-metric-space-2x-small, 2px); transform: rotate(-45deg); } .kern-loader:after { width: var(--kern-metric-border-radius-small, 2px); border-radius: var(--kern-metric-space-none, 0px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-border-radius-small, 2px) var(--kern-metric-space-none, 0px); left: var(--kern-7, 7px); bottom: var(--kern-metric-space-2x-small, 2px); transform: rotate(45deg); } .kern-loader--visible { display: block; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /** * @file _progress.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 10.04.2026 * @@VERSION@@ * @brief Styles für die Progress Komponente. * * Diese Datei enthält die CSS-Regeln, um die Progress Komponente * visuell darzustellen. Sie definiert das Grundaussehen. */ .kern-progress { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kern-metric-space-small, 8px); } .kern-progress progress { /* Determinate: */ } .kern-progress progress[value] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; width: 100%; height: var(--kern-metric-dimension-2x-small, 8px); border-radius: var(--kern-metric-border-radius-small, 2px); background: var(--kern-color-feedback-default-background-contextual, #DFE1EA); color: var(--kern-color-feedback-default-contextual, #454B6B); } .kern-progress progress[value]::-webkit-progress-bar { background: var(--kern-color-feedback-default-background-contextual, #DFE1EA); border-radius: var(--kern-metric-border-radius-small, 2px); } .kern-progress progress[value]::-webkit-progress-value { background-color: var(--kern-color-feedback-default-contextual, #454B6B); border-radius: var(--kern-metric-border-radius-small, 2px); } .kern-progress progress[value]::-moz-progress-bar { background-color: var(--kern-color-feedback-default-contextual, #454B6B); border-radius: var(--kern-metric-border-radius-small, 2px); } @media (forced-colors: active) { .kern-progress progress[value] { background-color: var(--kern-color-layout-background-default); border: 1px solid var(--kern-color-layout-background-inverted); color: var(--kern-color-layout-background-inverted); forced-color-adjust: none; } .kern-progress progress[value]::-webkit-progress-bar { background-color: var(--kern-color-layout-background-default); } .kern-progress progress[value]::-webkit-progress-value { background-color: var(--kern-color-layout-background-inverted); } .kern-progress progress[value]::-moz-progress-bar { background-color: var(--kern-color-layout-background-inverted); } } /** * @file _radio.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 09.04.2026 * @@VERSION@@ * @brief Styles für die Radio Komponente. * * Diese Datei enthält, von der _check.scss abweichende, CSS-Regeln, um die Radio Komponente * visuell darzustellen. */ .kern-form-check__radio { display: flex; border-radius: 100%; } .kern-form-check__radio::before { border-radius: 100%; content: ""; margin: auto; } .kern-form-check__radio:checked::before { background-color: var(--kern-color-form-input-border-contextual, #1D2034); height: var(--kern-12, 12px); width: var(--kern-12, 12px); } .kern-form-check__radio--error { border-color: var(--kern-color-feedback-danger-contextual, #C31C13) !important; outline-color: var(--kern-color-feedback-danger, -contextual, #C31C13) !important; background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0); } .kern-form-check__radio--error.kern-form-check__radio:checked::before { background-color: var(--kern-color-feedback-danger-contextual, #C31C13); } /** * @file _select.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 09.04.2026 * @@VERSION@@ * @brief Styles für die Form Select Komponenten. * * Diese Datei enthält gemeinsame CSS-Regeln, um die Select Komponenten * visuell darzustellen. Sie definiert das Grundaussehen, * Zuständ (:hover, :focus, disabled) */ .kern-form-input:has(select[disabled]), .kern-form-input:has(select[aria-disabled=true]) { cursor: not-allowed; } .kern-form-input:has(select[disabled]) .kern-label, .kern-form-input:has(select[aria-disabled=true]) .kern-label { cursor: not-allowed; } .kern-form-input__select-wrapper:has(.kern-form-input__select--error) { border-color: var(--kern-color-feedback-danger-contextual, #C31C13); background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0); } .kern-form-input__select-wrapper:has(.kern-form-input__select--error)::after { background-color: var(--kern-color-feedback-danger-contextual, #C31C13); } .kern-form-input__select-wrapper:has(.kern-form-input__select--error):hover { border-color: var(--kern-color-feedback-danger-contextual, #C31C13); } .kern-form-input__select-wrapper { position: relative; display: flex; height: var(--kern-metric-dimension-x-large, 48px); gap: var(--kern-metric-space-none, 0px); align-self: stretch; border-radius: var(--kern-metric-border-radius-small, 2px); border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border-contextual, #1D2034); background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7); } @media (forced-colors: active) { .kern-form-input__select-wrapper { border: 1px solid transparent !important; } } .kern-form-input__select-wrapper:has(select[disabled]), .kern-form-input__select-wrapper:has(select[aria-disabled=true]) { opacity: var(--kern-color-action-state-opacity-disabled, 0.4); } .kern-form-input__select-wrapper:hover { border-bottom: var(--kern-metric-border-width-bold, 4px) solid var(--kern-color-form-input-border-contextual, #1D2034); } .kern-form-input__select-wrapper:hover .kern-form-input__select { padding: var(--kern-metric-space-small, 8px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px); } @media (forced-colors: active) { .kern-form-input__select-wrapper:hover .kern-form-input__select { padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px); } } .kern-form-input__select-wrapper:hover:has(.kern-form-input__select:focus) { border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border-contextual, #1D2034); } .kern-form-input__select-wrapper:hover:has(.kern-form-input__select:focus) .kern-form-input__select { padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px); } .kern-form-input__select-wrapper:hover:has(select[disabled]), .kern-form-input__select-wrapper:hover:has(select[aria-disabled=true]) { border-bottom: var(--kern-metric-border-width-default, 2px) solid var(--kern-color-form-input-border-contextual, #1D2034); } .kern-form-input__select-wrapper:hover:has(select[disabled]) .kern-form-input__select, .kern-form-input__select-wrapper:hover:has(select[aria-disabled=true]) .kern-form-input__select { padding: var(--kern-metric-space-small, 6px) var(--kern-metric-space-default, 16px) var(--kern-4, 4px) var(--kern-metric-space-default, 16px); } .kern-form-input__select-wrapper::after { content: " "; display: inline-block; position: absolute; right: var(--kern-metric-dimension-x-small, 16px); top: var(--kern-metric-dimension-default, 24px); transform: translateY(-50%); pointer-events: none; width: var(--kern-metric-dimension-default, 24px); height: var(--kern-metric-dimension-default, 24px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='' viewBox='0 -960 960 960' width='' fill='%23000000'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E"); background-color: var(--kern-color-action-default); } @media (forced-colors: active) { .kern-form-input__select-wrapper::after { background-color: var(--kern-color-white) !important; forced-color-adjust: none; } } .kern-form-input__select { background-color: transparent; box-sizing: border-box; width: 100%; border: none; appearance: none; text-overflow: ellipsis; overflow: hidden; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-40, 40px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-default, 16px); } .kern-form-input__select:focus { border-radius: var(--kern-metric-border-radius-small, 2px); outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 0; background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7); border: none; } .kern-form-input__select--error:focus { outline-color: var(--kern-color-feedback-danger-contextual, #C31C13); background: var(--kern-color-feedback-danger-background-contextual, #FEE4E0); } .kern-form-input__select option { margin: 40px; background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7); } .kern-form-input__select[disabled], .kern-form-input__select[disabled=disabled], .kern-form-input__select[aria-disabled=true] { opacity: 0.7; cursor: not-allowed; } /** * @file _summary.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 09.04.2026 * @@VERSION@@ * @brief Styles für die Summary Komponente.‚ * * Diese Datei enthält die CSS-Regeln, um die Summary Komponente * visuell darzustellen. Sie definiert das Grundaussehen. */ .kern-summary-group__header { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; padding: var(--kern-metric-baseline-heading-medium-padding-top, 8px) var(--kern-metric-space-none, 0px) calc(var(--kern-metric-baseline-heading-medium-padding-bottom, 8px) + var(--kern-metric-space-default, 16px)) var(--kern-metric-space-none, 0px); margin-top: var(--kern-metric-space-x-large, 32px); } .kern-summary-group__header:first-of-type { margin-top: var(--kern-metric-space-none, 0px); } .kern-summary__header { display: flex; padding: var(--kern-metric-space-default, 16px) var(--skern-pace-none, 0px); align-items: flex-start; gap: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px); align-self: stretch; } .kern-summary__header .kern-number { margin-top: var(--kern-metric-space-x-small, 4px); } .kern-summary .kern-title { font-weight: var(--kern-typography-font-weight-regular, 400); } .kern-summary__body { display: flex; padding: var(--kern-metric-space-default, 16px); flex-direction: column; gap: var(--kern-metric-space-x-large, 32px); border-radius: var(--kern-metric-border-radius-default, 4px); background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7); } @media (forced-colors: active) { .kern-summary__body { border: 1px solid transparent !important; } } /** * @file _table.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 09.04.2026 * @@VERSION@@ * @brief Styles für die Table Komponente. * * Diese Datei enthält die CSS-Regeln, um die Table Komponente * visuell darzustellen. Sie definiert das Grundaussehen. * Variationen (small, default und responsive). */ .kern-table { width: 100%; border-spacing: var(--kern-metric-space-none, 0px); border-collapse: collapse; } .kern-table--small .kern-title { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-heading-small-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-small-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-heading-default, 600); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-table--small .kern-table__header, .kern-table--small .kern-table__cell { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); padding: calc(var(--kern-metric-baseline-body-small-padding-top, 7px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)) calc(var(--kern-metric-baseline-body-small-padding-bottom, 1px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)); } .kern-table--small .kern-table__cell--action { padding: var(--kern-metric-space-none, 0px) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)); text-wrap: nowrap; } .kern-table--small .kern-table__header { font-weight: var(--kern-typography-font-weight-semi-bold, 600); } .kern-table--striped .kern-table__body .kern-table__row:nth-child(odd) .kern-table__header, .kern-table--striped .kern-table__body .kern-table__row:nth-child(odd) .kern-table__cell { background-color: var(--kern-color-layout-layer-surface-contextual, #F3F4F7); } .kern-table .kern-title { display: table-caption; text-align: left; } .kern-table__header, .kern-table__cell { text-align: left; vertical-align: top; box-shadow: inset 0 -1px 0 0 var(--kern-color-layout-border-contextual, #6E7597); color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); padding: calc(var(--kern-metric-baseline-body-default-padding-top, 6px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)) calc(var(--kern-metric-baseline-body-default-padding-bottom, 2px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)); } .kern-table__header--numeric, .kern-table__cell--numeric { text-align: right; text-wrap: nowrap; } .kern-table__header--action, .kern-table__cell--action { text-align: right; } @media (forced-colors: active) { .kern-table__header, .kern-table__cell { border-bottom: 1px solid transparent; } } .kern-table__cell--action { padding: var(--kern-metric-space-none, 0px) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)); text-wrap: nowrap; } .kern-table__header { font-weight: var(--kern-typography-font-weight-semi-bold, 600); } .kern-table__footer { box-shadow: inset 0 1px 0 0 var(--kern-color-layout-border-contextual, #6E7597); } .kern-table__footer .kern-table__cell { font-weight: var(--kern-typography-font-weight-semi-bold, 600); } .kern-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /** * @file _task-list.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 16.12.2024 * @modified 09.04.2026 * @@VERSION@@ * @brief Styles für die Tasklist-Komponente. * * Diese Datei enthält die CSS-Regeln, um die Tasklist-Komponente * visuell darzustellen. Sie definiert das Grundaussehen, * Zustände (:hover, :active, :focus) und mögliche */ .kern-task-list { display: block; } .kern-task-list-group { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-large, 32px); } .kern-task-list__header { display: flex; padding-bottom: var(--kern-metric-space-default, 16px); flex-direction: column; align-items: flex-start; gap: var(--kern-metric-space-default, 16px); align-self: stretch; margin-top: var(--kern-metric-space-x-large, 32px); } .kern-task-list__header:first-of-type { margin-top: var(--kern-metric-space-none, 0px); } .kern-task-list__header .kern-heading { display: flex; padding: var(--kern-metric-baseline-heading-medium-padding-top, 5px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-medium-padding-bottom, 3px) var(--kern-metric-space-none, 0px); align-items: flex-start; gap: var(--kern-metric-space-none, 0px); align-self: stretch; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-heading-medium-padding-top, 5px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-medium-padding-bottom, 3px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-adaptive, 21px); font-weight: var(--kern-typography-font-weight-heading-default, 600); line-height: var(--kern-typography-line-height-medium-adaptive, 24px); } .kern-task-list__list { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; display: flex; flex-direction: column; gap: var(--kern-metric-space-small, 8px); align-self: stretch; list-style: none; } .kern-task-list__item { display: flex; padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-default, 16px); align-items: flex-start; gap: var(--kern-metric-space-default, 16px); flex: 1 0 0; justify-content: space-between; position: relative; border-radius: var(--kern-metric-border-radius-default, 4px); background: var(--kern-color-layout-layer-surface-contextual, #F3F4F7); } @media (forced-colors: active) { .kern-task-list__item { border: 1px solid transparent !important; } } .kern-task-list__item .kern-number { margin-top: var(--kern-12, 12px); } .kern-task-list__item:has(.kern-link) { color: var(--kern-color-action-default-contextual, #2044AA); } .kern-task-list__item:has(.kern-link) .kern-number { color: var(--kern-color-action-default-contextual, #2044AA); border-color: var(--kern-color-action-default-contextual, #2044AA); } .kern-task-list__item .kern-link--stretched:after { position: absolute; top: var(--kern-metric-space-none, 0px); right: var(--kern-metric-space-none, 0px); bottom: var(--kern-metric-space-none, 0px); left: var(--kern-metric-space-none, 0px); z-index: 1; pointer-events: auto; content: ""; background-color: transparent; } .kern-task-list__item .kern-link--stretched:focus-visible { outline: none; } .kern-task-list__item .kern-link--stretched:focus-visible:after { border-radius: var(--kern-metric-border-radius-default, 0.25rem); outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 2px; } @media (forced-colors: active) { .kern-task-list__item .kern-link--stretched:focus-visible:after { outline: auto !important; outline-offset: 4px !important; outline-width: 3px !important; outline-color: transparent !important; } } .kern-task-list__item:has(.kern-link--stretched:hover) { background: var(--kern-color-action-state-indicator-tint-hover-opacity); } .kern-task-list__item:has(.kern-link--stretched:active) { background: var(--kern-color-action-state-indicator-tint-active-opacity); } .kern-task-list__title { display: flex; padding: var(--kern-metric-space-small, 8px) var(--kern-metric-space-none, 0px); align-items: flex-start; gap: var(--kern-metric-space-default, 16px); flex-grow: 1; flex-wrap: wrap; } @media all and (min-width: 768px) { .kern-task-list__title { flex-wrap: nowrap; } } .kern-task-list__title .kern-link:visited { color: var(--kern-color-action-default-contextual, #2044AA); } .kern-task-list__title .kern-link, .kern-task-list__title .kern-body { flex-grow: 1; } .kern-task-list__status { text-align: right; white-space: nowrap; } .kern-body { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-body--large { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-large-static, 21px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-large-static, 32px); } .kern-body--small { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-body--bold { font-weight: var(--kern-typography-font-weight-body-strong, 600); } .kern-body--muted { color: var(--kern-color-layout-text-muted, #404565); } .kern-hint { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-heading-display { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-heading-display-padding-top, 12px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-display-padding-bottom, 12px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-2x-large-adaptive, 48px); font-weight: var(--kern-typography-font-weight-heading-balanced, 500); line-height: var(--kern-typography-line-height-2x-large-adaptive, 56px); } .kern-heading-x-large { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-heading-x-large-padding-top, 9px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-x-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-x-large-adaptive, 32px); font-weight: var(--kern-typography-font-weight-heading-balanced, 500); line-height: var(--kern-typography-line-height-x-large-adaptive, 40px); } .kern-heading-large { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-heading-large-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-large-padding-bottom, 9px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-large-adaptive, 26px); font-weight: var(--kern-typography-font-weight-heading-default, 600); line-height: var(--kern-typography-line-height-large-adaptive, 32px); } .kern-heading-medium { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-heading-medium-padding-top, 5px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-medium-padding-bottom, 3px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-adaptive, 21px); font-weight: var(--kern-typography-font-weight-heading-default, 600); line-height: var(--kern-typography-line-height-medium-adaptive, 24px); } .kern-heading-small { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-heading-small-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-heading-small-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-heading-default, 600); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-label { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-label-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-label-default, 600); line-height: var(--kern-typography-line-height-medium-static, 24px); width: fit-content; } .kern-label--large { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-label-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-large-static, 21px); font-weight: var(--kern-typography-font-weight-label-default, 600); line-height: var(--kern-typography-line-height-large-static, 32px); } .kern-label--small { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-label-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-label-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-label-default, 600); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-link { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); color: var(--kern-color-action-default-contextual, #2044AA); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: var(--kern-1, 1px); /* 5.556% */ text-underline-offset: var(--kern-3, 3px); display: inline-flex; align-items: flex-start; gap: var(--kern-metric-space-x-small, 4px); } .kern-link .kern-icon { background-color: var(--kern-color-action-default-contextual, #2044AA); } .kern-link:has(.kern-icon) { text-decoration: none; } .kern-link:has(.kern-icon):active, .kern-link:has(.kern-icon):hover { text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: var(--kern-3, 3px); /* 16.667% */ text-underline-offset: var(--kern-3, 3px); } .kern-link:hover { text-decoration-thickness: var(--kern-3, 3px); /* 16.667% */ } .kern-link:active { color: var(--kern-color-action-default-contextual, #2044AA); text-decoration-thickness: var(--kern-3, 3px); /* 16.667% */ } .kern-link:active .kern-icon { background-color: var(--kern-color-action-default-contextual, #2044AA); } .kern-link:visited { color: var(--kern-color-action-visited, #75009E); } .kern-link:visited .kern-icon { background-color: var(--kern-color-action-visited, #75009E); } .kern-link--x-small { gap: var(--kern-metric-space-2x-small, 2px); color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); color: var(--kern-color-action-default-contextual, #2044AA); } .kern-link--x-small .kern-icon { width: var(--kern-metric-dimension-small, 20px); height: var(--kern-metric-dimension-small, 20px); min-width: var(--kern-metric-dimension-small, 20px); min-height: var(--kern-metric-dimension-small, 20px); } .kern-link:not(.kern-link--stretched):focus-visible { position: relative; z-index: 1; border-radius: var(--kern-metric-border-radius-small, 0.125rem); outline: 4px solid var(--kern-color-action-focus-default-contextual, #454B6B); outline-offset: 2px; } @media (forced-colors: active) { .kern-link:not(.kern-link--stretched):focus-visible { outline: auto !important; outline-offset: 4px !important; outline-width: 3px !important; outline-color: transparent !important; } } a.kern-btn { text-decoration: none; } .kern-list { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; list-style: none; display: flex; flex-direction: column; gap: var(--kern-metric-space-none, 0); color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); padding-left: var(--kern-metric-space-none, 0); } .kern-list--small { font-size: var(--kern-typography-font-size-small-static, 16px); line-height: var(--kern-typography-line-height-medium-static, 24px); /* 125% */ padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px); } .kern-list--small .kern-link { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-body-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-body-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); color: var(--kern-color-action-default, #1A3DA5); } .kern-list--small .kern-link .kern-icon { width: var(--kern-metric-dimension-small, 20px); height: var(--kern-metric-dimension-small, 20px); min-width: var(--kern-metric-dimension-small, 20px); min-height: var(--kern-metric-dimension-small, 20px); } .kern-list--large { font-size: var(--kern-typography-font-size-large-static, 21px); line-height: var(--kern-typography-line-height-large-static, 32px); /* 152.381% */ padding: var(--kern-metric-baseline-body-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-body-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px); } .kern-list--bullet { padding-left: var(--kern-metric-space-x-large, 32px); gap: var(--kern-metric-space-default, 16px); list-style-type: disc; } .kern-list--number { padding-left: var(--kern-metric-space-x-large, 32px); gap: var(--kern-metric-space-default, 16px); list-style-type: decimal; } .kern-list--horizontal { flex-direction: row; gap: var(--kern-metric-space-none, 0) var(--kern-metric-space-default, 16px); flex-wrap: wrap; } .kern-subline { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); color: var(--kern-color-layout-text-muted-contextual, #51577A); padding: var(--kern-metric-baseline-subline-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-subline-default, 500); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-subline--large { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); color: var(--kern-color-layout-text-muted-contextual, #51577A); padding: var(--kern-metric-baseline-subline-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-large-static, 21px); font-weight: var(--kern-typography-font-weight-subline-default, 500); line-height: var(--kern-typography-line-height-large-static, 32px); } .kern-subline--small { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); color: var(--kern-color-layout-text-muted-contextual, #51577A); padding: var(--kern-metric-baseline-subline-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-subline-small-padding-bottom, 9px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-subline-default, 500); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-preline { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); color: var(--kern-color-layout-text-muted-contextual, #51577A); padding: var(--kern-metric-baseline-preline-default-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-default-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-preline-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); width: fit-content; } .kern-preline--large { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); color: var(--kern-color-layout-text-muted-contextual, #51577A); padding: var(--kern-metric-baseline-preline-large-padding-top, 1px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-large-padding-bottom, 7px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-large-static, 21px); font-weight: var(--kern-typography-font-weight-preline-default, 400); line-height: var(--kern-typography-line-height-large-static, 32px); } .kern-preline--small { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); color: var(--kern-color-layout-text-muted-contextual, #51577A); padding: var(--kern-metric-baseline-preline-small-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-preline-small-padding-bottom, 1px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-small-static, 16px); font-weight: var(--kern-typography-font-weight-preline-default, 400); line-height: var(--kern-typography-line-height-medium-static, 24px); } .kern-title { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-title-default-padding-top, 5px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-default-padding-bottom, 3px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-adaptive, 21px); font-weight: var(--kern-typography-font-weight-title-default, 600); line-height: var(--kern-typography-line-height-medium-adaptive, 24px); } .kern-title--large { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-title-large-padding-top, 7px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-large-padding-bottom, 9px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-large-adaptive, 26px); font-weight: var(--kern-typography-font-weight-title-default, 600); line-height: var(--kern-typography-line-height-large-adaptive, 32px); } .kern-title--small { color: var(--kern-color-layout-text-default-contextual, #131525); font-family: var(--kern-typography-font-family-default, "Fira Sans"); font-style: normal; letter-spacing: var(--kern-metric-space-none, 0px); padding: var(--kern-metric-baseline-title-small-padding-top, 6px) var(--kern-metric-space-none, 0px) var(--kern-metric-baseline-title-small-padding-bottom, 2px) var(--kern-metric-space-none, 0px); font-size: var(--kern-typography-font-size-medium-static, 18px); font-weight: var(--kern-typography-font-weight-title-default, 600); line-height: var(--kern-typography-line-height-medium-static, 24px); } /** * @file _grid.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 17.04.2025 * @modified 23.05.2025 * @@VERSION@@ * @brief Styles für die Grid-Komponente. * * Diese Datei enthält die CSS-Regeln, um die Grid-Komponente * visuell darzustellen. Sie definiert das Grundaussehen, */ .kern-container-fluid, .kern-container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; } .kern-container { max-width: 1600px; } .kern-container .kern-row [class^=kern-col], .kern-container .kern-row [class*=kern-col] { padding: 1rem; box-sizing: border-box; } .kern-container-fluid .kern-row [class^=kern-col], .kern-container-fluid .kern-row [class*=kern-col] { padding: 1rem; box-sizing: border-box; } .kern-row { display: flex; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; box-sizing: border-box; } .kern-row > * { flex-shrink: 0; width: 100%; max-width: 100%; } .kern-col { flex: 1 0 0%; } .kern-row .kern-col-1 { flex: 0 0 auto; width: 8.3333333333%; } .kern-row .kern-col-offset-1 { margin-left: 8.3333333333%; } .kern-row .kern-col-2 { flex: 0 0 auto; width: 16.6666666667%; } .kern-row .kern-col-offset-2 { margin-left: 16.6666666667%; } .kern-row .kern-col-3 { flex: 0 0 auto; width: 25%; } .kern-row .kern-col-offset-3 { margin-left: 25%; } .kern-row .kern-col-4 { flex: 0 0 auto; width: 33.3333333333%; } .kern-row .kern-col-offset-4 { margin-left: 33.3333333333%; } .kern-row .kern-col-5 { flex: 0 0 auto; width: 41.6666666667%; } .kern-row .kern-col-offset-5 { margin-left: 41.6666666667%; } .kern-row .kern-col-6 { flex: 0 0 auto; width: 50%; } .kern-row .kern-col-offset-6 { margin-left: 50%; } .kern-row .kern-col-7 { flex: 0 0 auto; width: 58.3333333333%; } .kern-row .kern-col-offset-7 { margin-left: 58.3333333333%; } .kern-row .kern-col-8 { flex: 0 0 auto; width: 66.6666666667%; } .kern-row .kern-col-offset-8 { margin-left: 66.6666666667%; } .kern-row .kern-col-9 { flex: 0 0 auto; width: 75%; } .kern-row .kern-col-offset-9 { margin-left: 75%; } .kern-row .kern-col-10 { flex: 0 0 auto; width: 83.3333333333%; } .kern-row .kern-col-offset-10 { margin-left: 83.3333333333%; } .kern-row .kern-col-11 { flex: 0 0 auto; width: 91.6666666667%; } .kern-row .kern-col-offset-11 { margin-left: 91.6666666667%; } .kern-row .kern-col-12 { flex: 0 0 auto; width: 100%; } .kern-row .kern-col-offset-12 { margin-left: 100%; } @media (min-width: 576px) { .kern-container { max-width: 96%; } .kern-row .kern-col-sm-offset-0 { margin-left: 0; } .kern-row .kern-col-sm-1 { width: 8.3333333333%; } .kern-row .kern-col-sm-offset-1 { margin-left: 8.3333333333%; } .kern-row .kern-col-sm-2 { width: 16.6666666667%; } .kern-row .kern-col-sm-offset-2 { margin-left: 16.6666666667%; } .kern-row .kern-col-sm-3 { width: 25%; } .kern-row .kern-col-sm-offset-3 { margin-left: 25%; } .kern-row .kern-col-sm-4 { width: 33.3333333333%; } .kern-row .kern-col-sm-offset-4 { margin-left: 33.3333333333%; } .kern-row .kern-col-sm-5 { width: 41.6666666667%; } .kern-row .kern-col-sm-offset-5 { margin-left: 41.6666666667%; } .kern-row .kern-col-sm-6 { width: 50%; } .kern-row .kern-col-sm-offset-6 { margin-left: 50%; } .kern-row .kern-col-sm-7 { width: 58.3333333333%; } .kern-row .kern-col-sm-offset-7 { margin-left: 58.3333333333%; } .kern-row .kern-col-sm-8 { width: 66.6666666667%; } .kern-row .kern-col-sm-offset-8 { margin-left: 66.6666666667%; } .kern-row .kern-col-sm-9 { width: 75%; } .kern-row .kern-col-sm-offset-9 { margin-left: 75%; } .kern-row .kern-col-sm-10 { width: 83.3333333333%; } .kern-row .kern-col-sm-offset-10 { margin-left: 83.3333333333%; } .kern-row .kern-col-sm-11 { width: 91.6666666667%; } .kern-row .kern-col-sm-offset-11 { margin-left: 91.6666666667%; } .kern-row .kern-col-sm-12 { width: 100%; } .kern-row .kern-col-sm-offset-12 { margin-left: 100%; } } @media (min-width: 768px) { .kern-container { max-width: 96%; } .kern-row .kern-col-md-offset-0 { margin-left: 0; } .kern-row .kern-col-md-1 { width: 8.3333333333%; } .kern-row .kern-col-md-offset-1 { margin-left: 8.3333333333%; } .kern-row .kern-col-md-2 { width: 16.6666666667%; } .kern-row .kern-col-md-offset-2 { margin-left: 16.6666666667%; } .kern-row .kern-col-md-3 { width: 25%; } .kern-row .kern-col-md-offset-3 { margin-left: 25%; } .kern-row .kern-col-md-4 { width: 33.3333333333%; } .kern-row .kern-col-md-offset-4 { margin-left: 33.3333333333%; } .kern-row .kern-col-md-5 { width: 41.6666666667%; } .kern-row .kern-col-md-offset-5 { margin-left: 41.6666666667%; } .kern-row .kern-col-md-6 { width: 50%; } .kern-row .kern-col-md-offset-6 { margin-left: 50%; } .kern-row .kern-col-md-7 { width: 58.3333333333%; } .kern-row .kern-col-md-offset-7 { margin-left: 58.3333333333%; } .kern-row .kern-col-md-8 { width: 66.6666666667%; } .kern-row .kern-col-md-offset-8 { margin-left: 66.6666666667%; } .kern-row .kern-col-md-9 { width: 75%; } .kern-row .kern-col-md-offset-9 { margin-left: 75%; } .kern-row .kern-col-md-10 { width: 83.3333333333%; } .kern-row .kern-col-md-offset-10 { margin-left: 83.3333333333%; } .kern-row .kern-col-md-11 { width: 91.6666666667%; } .kern-row .kern-col-md-offset-11 { margin-left: 91.6666666667%; } .kern-row .kern-col-md-12 { width: 100%; } .kern-row .kern-col-md-offset-12 { margin-left: 100%; } } @media (min-width: 992px) { .kern-row .kern-col-lg-offset-0 { margin-left: 0; } .kern-row .kern-col-lg-1 { width: 8.3333333333%; } .kern-row .kern-col-lg-offset-1 { margin-left: 8.3333333333%; } .kern-row .kern-col-lg-2 { width: 16.6666666667%; } .kern-row .kern-col-lg-offset-2 { margin-left: 16.6666666667%; } .kern-row .kern-col-lg-3 { width: 25%; } .kern-row .kern-col-lg-offset-3 { margin-left: 25%; } .kern-row .kern-col-lg-4 { width: 33.3333333333%; } .kern-row .kern-col-lg-offset-4 { margin-left: 33.3333333333%; } .kern-row .kern-col-lg-5 { width: 41.6666666667%; } .kern-row .kern-col-lg-offset-5 { margin-left: 41.6666666667%; } .kern-row .kern-col-lg-6 { width: 50%; } .kern-row .kern-col-lg-offset-6 { margin-left: 50%; } .kern-row .kern-col-lg-7 { width: 58.3333333333%; } .kern-row .kern-col-lg-offset-7 { margin-left: 58.3333333333%; } .kern-row .kern-col-lg-8 { width: 66.6666666667%; } .kern-row .kern-col-lg-offset-8 { margin-left: 66.6666666667%; } .kern-row .kern-col-lg-9 { width: 75%; } .kern-row .kern-col-lg-offset-9 { margin-left: 75%; } .kern-row .kern-col-lg-10 { width: 83.3333333333%; } .kern-row .kern-col-lg-offset-10 { margin-left: 83.3333333333%; } .kern-row .kern-col-lg-11 { width: 91.6666666667%; } .kern-row .kern-col-lg-offset-11 { margin-left: 91.6666666667%; } .kern-row .kern-col-lg-12 { width: 100%; } .kern-row .kern-col-lg-offset-12 { margin-left: 100%; } } @media (min-width: 1200px) { .kern-container { max-width: 96%; } .kern-row .kern-col-xl-offset-0 { margin-left: 0; } .kern-row .kern-col-xl-1 { width: 8.3333333333%; } .kern-row .kern-col-xl-offset-1 { margin-left: 8.3333333333%; } .kern-row .kern-col-xl-2 { width: 16.6666666667%; } .kern-row .kern-col-xl-offset-2 { margin-left: 16.6666666667%; } .kern-row .kern-col-xl-3 { width: 25%; } .kern-row .kern-col-xl-offset-3 { margin-left: 25%; } .kern-row .kern-col-xl-4 { width: 33.3333333333%; } .kern-row .kern-col-xl-offset-4 { margin-left: 33.3333333333%; } .kern-row .kern-col-xl-5 { width: 41.6666666667%; } .kern-row .kern-col-xl-offset-5 { margin-left: 41.6666666667%; } .kern-row .kern-col-xl-6 { width: 50%; } .kern-row .kern-col-xl-offset-6 { margin-left: 50%; } .kern-row .kern-col-xl-7 { width: 58.3333333333%; } .kern-row .kern-col-xl-offset-7 { margin-left: 58.3333333333%; } .kern-row .kern-col-xl-8 { width: 66.6666666667%; } .kern-row .kern-col-xl-offset-8 { margin-left: 66.6666666667%; } .kern-row .kern-col-xl-9 { width: 75%; } .kern-row .kern-col-xl-offset-9 { margin-left: 75%; } .kern-row .kern-col-xl-10 { width: 83.3333333333%; } .kern-row .kern-col-xl-offset-10 { margin-left: 83.3333333333%; } .kern-row .kern-col-xl-11 { width: 91.6666666667%; } .kern-row .kern-col-xl-offset-11 { margin-left: 91.6666666667%; } .kern-row .kern-col-xl-12 { width: 100%; } .kern-row .kern-col-xl-offset-12 { margin-left: 100%; } } @media (min-width: 1600px) { .kern-container { max-width: 1536px; } .kern-row .kern-col-xxl-offset-0 { margin-left: 0; } .kern-row .kern-col-xxl-1 { width: 8.3333333333%; } .kern-row .kern-col-xxl-offset-1 { margin-left: 8.3333333333%; } .kern-row .kern-col-xxl-2 { width: 16.6666666667%; } .kern-row .kern-col-xxl-offset-2 { margin-left: 16.6666666667%; } .kern-row .kern-col-xxl-3 { width: 25%; } .kern-row .kern-col-xxl-offset-3 { margin-left: 25%; } .kern-row .kern-col-xxl-4 { width: 33.3333333333%; } .kern-row .kern-col-xxl-offset-4 { margin-left: 33.3333333333%; } .kern-row .kern-col-xxl-5 { width: 41.6666666667%; } .kern-row .kern-col-xxl-offset-5 { margin-left: 41.6666666667%; } .kern-row .kern-col-xxl-6 { width: 50%; } .kern-row .kern-col-xxl-offset-6 { margin-left: 50%; } .kern-row .kern-col-xxl-7 { width: 58.3333333333%; } .kern-row .kern-col-xxl-offset-7 { margin-left: 58.3333333333%; } .kern-row .kern-col-xxl-8 { width: 66.6666666667%; } .kern-row .kern-col-xxl-offset-8 { margin-left: 66.6666666667%; } .kern-row .kern-col-xxl-9 { width: 75%; } .kern-row .kern-col-xxl-offset-9 { margin-left: 75%; } .kern-row .kern-col-xxl-10 { width: 83.3333333333%; } .kern-row .kern-col-xxl-offset-10 { margin-left: 83.3333333333%; } .kern-row .kern-col-xxl-11 { width: 91.6666666667%; } .kern-row .kern-col-xxl-offset-11 { margin-left: 91.6666666667%; } .kern-row .kern-col-xxl-12 { width: 100%; } .kern-row .kern-col-xxl-offset-12 { margin-left: 100%; } } /** * @file _spacing.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 05.09.2025 * @modified 26.11.2025 * @@VERSION@@ * @brief Styles für die Spacing-Komponente. */ .kern-m-auto { margin: auto; } .kern-mt-auto { margin-top: auto; } .kern-mr-auto { margin-right: auto; } .kern-mb-auto { margin-bottom: auto; } .kern-ml-auto { margin-left: auto; } .kern-mx-auto { margin-left: auto; margin-right: auto; } .kern-my-auto { margin-top: auto; margin-bottom: auto; } .kern-m-none { margin: var(--kern-metric-space-none); } .kern-mt-none { margin-top: var(--kern-metric-space-none); } .kern-mr-none { margin-right: var(--kern-metric-space-none); } .kern-mb-none { margin-bottom: var(--kern-metric-space-none); } .kern-ml-none { margin-left: var(--kern-metric-space-none); } .kern-mx-none { margin-left: var(--kern-metric-space-none); margin-right: var(--kern-metric-space-none); } .kern-my-none { margin-top: var(--kern-metric-space-none); margin-bottom: var(--kern-metric-space-none); } .kern-m-xxs { margin: var(--kern-metric-space-2x-small); } .kern-mt-xxs { margin-top: var(--kern-metric-space-2x-small); } .kern-mr-xxs { margin-right: var(--kern-metric-space-2x-small); } .kern-mb-xxs { margin-bottom: var(--kern-metric-space-2x-small); } .kern-ml-xxs { margin-left: var(--kern-metric-space-2x-small); } .kern-mx-xxs { margin-left: var(--kern-metric-space-2x-small); margin-right: var(--kern-metric-space-2x-small); } .kern-my-xxs { margin-top: var(--kern-metric-space-2x-small); margin-bottom: var(--kern-metric-space-2x-small); } .kern-m-xs { margin: var(--kern-metric-space-x-small); } .kern-mt-xs { margin-top: var(--kern-metric-space-x-small); } .kern-mr-xs { margin-right: var(--kern-metric-space-x-small); } .kern-mb-xs { margin-bottom: var(--kern-metric-space-x-small); } .kern-ml-xs { margin-left: var(--kern-metric-space-x-small); } .kern-mx-xs { margin-left: var(--kern-metric-space-x-small); margin-right: var(--kern-metric-space-x-small); } .kern-my-xs { margin-top: var(--kern-metric-space-x-small); margin-bottom: var(--kern-metric-space-x-small); } .kern-m-sm { margin: var(--kern-metric-space-small); } .kern-mt-sm { margin-top: var(--kern-metric-space-small); } .kern-mr-sm { margin-right: var(--kern-metric-space-small); } .kern-mb-sm { margin-bottom: var(--kern-metric-space-small); } .kern-ml-sm { margin-left: var(--kern-metric-space-small); } .kern-mx-sm { margin-left: var(--kern-metric-space-small); margin-right: var(--kern-metric-space-small); } .kern-my-sm { margin-top: var(--kern-metric-space-small); margin-bottom: var(--kern-metric-space-small); } .kern-m-md { margin: var(--kern-metric-space-default); } .kern-mt-md { margin-top: var(--kern-metric-space-default); } .kern-mr-md { margin-right: var(--kern-metric-space-default); } .kern-mb-md { margin-bottom: var(--kern-metric-space-default); } .kern-ml-md { margin-left: var(--kern-metric-space-default); } .kern-mx-md { margin-left: var(--kern-metric-space-default); margin-right: var(--kern-metric-space-default); } .kern-my-md { margin-top: var(--kern-metric-space-default); margin-bottom: var(--kern-metric-space-default); } .kern-m-lg { margin: var(--kern-metric-space-large); } .kern-mt-lg { margin-top: var(--kern-metric-space-large); } .kern-mr-lg { margin-right: var(--kern-metric-space-large); } .kern-mb-lg { margin-bottom: var(--kern-metric-space-large); } .kern-ml-lg { margin-left: var(--kern-metric-space-large); } .kern-mx-lg { margin-left: var(--kern-metric-space-large); margin-right: var(--kern-metric-space-large); } .kern-my-lg { margin-top: var(--kern-metric-space-large); margin-bottom: var(--kern-metric-space-large); } .kern-m-xl { margin: var(--kern-metric-space-x-large); } .kern-mt-xl { margin-top: var(--kern-metric-space-x-large); } .kern-mr-xl { margin-right: var(--kern-metric-space-x-large); } .kern-mb-xl { margin-bottom: var(--kern-metric-space-x-large); } .kern-ml-xl { margin-left: var(--kern-metric-space-x-large); } .kern-mx-xl { margin-left: var(--kern-metric-space-x-large); margin-right: var(--kern-metric-space-x-large); } .kern-my-xl { margin-top: var(--kern-metric-space-x-large); margin-bottom: var(--kern-metric-space-x-large); } .kern-p-none { padding: var(--kern-metric-space-none); } .kern-pt-none { padding-top: var(--kern-metric-space-none); } .kern-pr-none { padding-right: var(--kern-metric-space-none); } .kern-pb-none { padding-bottom: var(--kern-metric-space-none); } .kern-pl-none { padding-left: var(--kern-metric-space-none); } .kern-px-none { padding-left: var(--kern-metric-space-none); padding-right: var(--kern-metric-space-none); } .kern-py-none { padding-top: var(--kern-metric-space-none); padding-bottom: var(--kern-metric-space-none); } .kern-p-xxs { padding: var(--kern-metric-space-2x-small); } .kern-pt-xxs { padding-top: var(--kern-metric-space-2x-small); } .kern-pr-xxs { padding-right: var(--kern-metric-space-2x-small); } .kern-pb-xxs { padding-bottom: var(--kern-metric-space-2x-small); } .kern-pl-xxs { padding-left: var(--kern-metric-space-2x-small); } .kern-px-xxs { padding-left: var(--kern-metric-space-2x-small); padding-right: var(--kern-metric-space-2x-small); } .kern-py-xxs { padding-top: var(--kern-metric-space-2x-small); padding-bottom: var(--kern-metric-space-2x-small); } .kern-p-xs { padding: var(--kern-metric-space-x-small); } .kern-pt-xs { padding-top: var(--kern-metric-space-x-small); } .kern-pr-xs { padding-right: var(--kern-metric-space-x-small); } .kern-pb-xs { padding-bottom: var(--kern-metric-space-x-small); } .kern-pl-xs { padding-left: var(--kern-metric-space-x-small); } .kern-px-xs { padding-left: var(--kern-metric-space-x-small); padding-right: var(--kern-metric-space-x-small); } .kern-py-xs { padding-top: var(--kern-metric-space-x-small); padding-bottom: var(--kern-metric-space-x-small); } .kern-p-sm { padding: var(--kern-metric-space-small); } .kern-pt-sm { padding-top: var(--kern-metric-space-small); } .kern-pr-sm { padding-right: var(--kern-metric-space-small); } .kern-pb-sm { padding-bottom: var(--kern-metric-space-small); } .kern-pl-sm { padding-left: var(--kern-metric-space-small); } .kern-px-sm { padding-left: var(--kern-metric-space-small); padding-right: var(--kern-metric-space-small); } .kern-py-sm { padding-top: var(--kern-metric-space-small); padding-bottom: var(--kern-metric-space-small); } .kern-p-md { padding: var(--kern-metric-space-default); } .kern-pt-md { padding-top: var(--kern-metric-space-default); } .kern-pr-md { padding-right: var(--kern-metric-space-default); } .kern-pb-md { padding-bottom: var(--kern-metric-space-default); } .kern-pl-md { padding-left: var(--kern-metric-space-default); } .kern-px-md { padding-left: var(--kern-metric-space-default); padding-right: var(--kern-metric-space-default); } .kern-py-md { padding-top: var(--kern-metric-space-default); padding-bottom: var(--kern-metric-space-default); } .kern-p-lg { padding: var(--kern-metric-space-large); } .kern-pt-lg { padding-top: var(--kern-metric-space-large); } .kern-pr-lg { padding-right: var(--kern-metric-space-large); } .kern-pb-lg { padding-bottom: var(--kern-metric-space-large); } .kern-pl-lg { padding-left: var(--kern-metric-space-large); } .kern-px-lg { padding-left: var(--kern-metric-space-large); padding-right: var(--kern-metric-space-large); } .kern-py-lg { padding-top: var(--kern-metric-space-large); padding-bottom: var(--kern-metric-space-large); } .kern-p-xl { padding: var(--kern-metric-space-x-large); } .kern-pt-xl { padding-top: var(--kern-metric-space-x-large); } .kern-pr-xl { padding-right: var(--kern-metric-space-x-large); } .kern-pb-xl { padding-bottom: var(--kern-metric-space-x-large); } .kern-pl-xl { padding-left: var(--kern-metric-space-x-large); } .kern-px-xl { padding-left: var(--kern-metric-space-x-large); padding-right: var(--kern-metric-space-x-large); } .kern-py-xl { padding-top: var(--kern-metric-space-x-large); padding-bottom: var(--kern-metric-space-x-large); } .kern-m-auto-xs { margin: auto; } .kern-mt-auto-xs { margin-top: auto; } .kern-mr-auto-xs { margin-right: auto; } .kern-mb-auto-xs { margin-bottom: auto; } .kern-ml-auto-xs { margin-left: auto; } .kern-mx-auto-xs { margin-left: auto; margin-right: auto; } .kern-my-auto-xs { margin-top: auto; margin-bottom: auto; } .kern-m-none-xs { margin: var(--kern-metric-space-none); } .kern-mt-none-xs { margin-top: var(--kern-metric-space-none); } .kern-mr-none-xs { margin-right: var(--kern-metric-space-none); } .kern-mb-none-xs { margin-bottom: var(--kern-metric-space-none); } .kern-ml-none-xs { margin-left: var(--kern-metric-space-none); } .kern-mx-none-xs { margin-left: var(--kern-metric-space-none); margin-right: var(--kern-metric-space-none); } .kern-my-none-xs { margin-top: var(--kern-metric-space-none); margin-bottom: var(--kern-metric-space-none); } .kern-p-none-xs { padding: var(--kern-metric-space-none); } .kern-pt-none-xs { padding-top: var(--kern-metric-space-none); } .kern-pr-none-xs { padding-right: var(--kern-metric-space-none); } .kern-pb-none-xs { padding-bottom: var(--kern-metric-space-none); } .kern-pl-none-xs { padding-left: var(--kern-metric-space-none); } .kern-px-none-xs { padding-left: var(--kern-metric-space-none); padding-right: var(--kern-metric-space-none); } .kern-py-none-xs { padding-top: var(--kern-metric-space-none); padding-bottom: var(--kern-metric-space-none); } .kern-m-xxs-xs { margin: var(--kern-metric-space-2x-small); } .kern-mt-xxs-xs { margin-top: var(--kern-metric-space-2x-small); } .kern-mr-xxs-xs { margin-right: var(--kern-metric-space-2x-small); } .kern-mb-xxs-xs { margin-bottom: var(--kern-metric-space-2x-small); } .kern-ml-xxs-xs { margin-left: var(--kern-metric-space-2x-small); } .kern-mx-xxs-xs { margin-left: var(--kern-metric-space-2x-small); margin-right: var(--kern-metric-space-2x-small); } .kern-my-xxs-xs { margin-top: var(--kern-metric-space-2x-small); margin-bottom: var(--kern-metric-space-2x-small); } .kern-p-xxs-xs { padding: var(--kern-metric-space-2x-small); } .kern-pt-xxs-xs { padding-top: var(--kern-metric-space-2x-small); } .kern-pr-xxs-xs { padding-right: var(--kern-metric-space-2x-small); } .kern-pb-xxs-xs { padding-bottom: var(--kern-metric-space-2x-small); } .kern-pl-xxs-xs { padding-left: var(--kern-metric-space-2x-small); } .kern-px-xxs-xs { padding-left: var(--kern-metric-space-2x-small); padding-right: var(--kern-metric-space-2x-small); } .kern-py-xxs-xs { padding-top: var(--kern-metric-space-2x-small); padding-bottom: var(--kern-metric-space-2x-small); } .kern-m-xs-xs { margin: var(--kern-metric-space-x-small); } .kern-mt-xs-xs { margin-top: var(--kern-metric-space-x-small); } .kern-mr-xs-xs { margin-right: var(--kern-metric-space-x-small); } .kern-mb-xs-xs { margin-bottom: var(--kern-metric-space-x-small); } .kern-ml-xs-xs { margin-left: var(--kern-metric-space-x-small); } .kern-mx-xs-xs { margin-left: var(--kern-metric-space-x-small); margin-right: var(--kern-metric-space-x-small); } .kern-my-xs-xs { margin-top: var(--kern-metric-space-x-small); margin-bottom: var(--kern-metric-space-x-small); } .kern-p-xs-xs { padding: var(--kern-metric-space-x-small); } .kern-pt-xs-xs { padding-top: var(--kern-metric-space-x-small); } .kern-pr-xs-xs { padding-right: var(--kern-metric-space-x-small); } .kern-pb-xs-xs { padding-bottom: var(--kern-metric-space-x-small); } .kern-pl-xs-xs { padding-left: var(--kern-metric-space-x-small); } .kern-px-xs-xs { padding-left: var(--kern-metric-space-x-small); padding-right: var(--kern-metric-space-x-small); } .kern-py-xs-xs { padding-top: var(--kern-metric-space-x-small); padding-bottom: var(--kern-metric-space-x-small); } .kern-m-sm-xs { margin: var(--kern-metric-space-small); } .kern-mt-sm-xs { margin-top: var(--kern-metric-space-small); } .kern-mr-sm-xs { margin-right: var(--kern-metric-space-small); } .kern-mb-sm-xs { margin-bottom: var(--kern-metric-space-small); } .kern-ml-sm-xs { margin-left: var(--kern-metric-space-small); } .kern-mx-sm-xs { margin-left: var(--kern-metric-space-small); margin-right: var(--kern-metric-space-small); } .kern-my-sm-xs { margin-top: var(--kern-metric-space-small); margin-bottom: var(--kern-metric-space-small); } .kern-p-sm-xs { padding: var(--kern-metric-space-small); } .kern-pt-sm-xs { padding-top: var(--kern-metric-space-small); } .kern-pr-sm-xs { padding-right: var(--kern-metric-space-small); } .kern-pb-sm-xs { padding-bottom: var(--kern-metric-space-small); } .kern-pl-sm-xs { padding-left: var(--kern-metric-space-small); } .kern-px-sm-xs { padding-left: var(--kern-metric-space-small); padding-right: var(--kern-metric-space-small); } .kern-py-sm-xs { padding-top: var(--kern-metric-space-small); padding-bottom: var(--kern-metric-space-small); } .kern-m-md-xs { margin: var(--kern-metric-space-default); } .kern-mt-md-xs { margin-top: var(--kern-metric-space-default); } .kern-mr-md-xs { margin-right: var(--kern-metric-space-default); } .kern-mb-md-xs { margin-bottom: var(--kern-metric-space-default); } .kern-ml-md-xs { margin-left: var(--kern-metric-space-default); } .kern-mx-md-xs { margin-left: var(--kern-metric-space-default); margin-right: var(--kern-metric-space-default); } .kern-my-md-xs { margin-top: var(--kern-metric-space-default); margin-bottom: var(--kern-metric-space-default); } .kern-p-md-xs { padding: var(--kern-metric-space-default); } .kern-pt-md-xs { padding-top: var(--kern-metric-space-default); } .kern-pr-md-xs { padding-right: var(--kern-metric-space-default); } .kern-pb-md-xs { padding-bottom: var(--kern-metric-space-default); } .kern-pl-md-xs { padding-left: var(--kern-metric-space-default); } .kern-px-md-xs { padding-left: var(--kern-metric-space-default); padding-right: var(--kern-metric-space-default); } .kern-py-md-xs { padding-top: var(--kern-metric-space-default); padding-bottom: var(--kern-metric-space-default); } .kern-m-lg-xs { margin: var(--kern-metric-space-large); } .kern-mt-lg-xs { margin-top: var(--kern-metric-space-large); } .kern-mr-lg-xs { margin-right: var(--kern-metric-space-large); } .kern-mb-lg-xs { margin-bottom: var(--kern-metric-space-large); } .kern-ml-lg-xs { margin-left: var(--kern-metric-space-large); } .kern-mx-lg-xs { margin-left: var(--kern-metric-space-large); margin-right: var(--kern-metric-space-large); } .kern-my-lg-xs { margin-top: var(--kern-metric-space-large); margin-bottom: var(--kern-metric-space-large); } .kern-p-lg-xs { padding: var(--kern-metric-space-large); } .kern-pt-lg-xs { padding-top: var(--kern-metric-space-large); } .kern-pr-lg-xs { padding-right: var(--kern-metric-space-large); } .kern-pb-lg-xs { padding-bottom: var(--kern-metric-space-large); } .kern-pl-lg-xs { padding-left: var(--kern-metric-space-large); } .kern-px-lg-xs { padding-left: var(--kern-metric-space-large); padding-right: var(--kern-metric-space-large); } .kern-py-lg-xs { padding-top: var(--kern-metric-space-large); padding-bottom: var(--kern-metric-space-large); } .kern-m-xl-xs { margin: var(--kern-metric-space-x-large); } .kern-mt-xl-xs { margin-top: var(--kern-metric-space-x-large); } .kern-mr-xl-xs { margin-right: var(--kern-metric-space-x-large); } .kern-mb-xl-xs { margin-bottom: var(--kern-metric-space-x-large); } .kern-ml-xl-xs { margin-left: var(--kern-metric-space-x-large); } .kern-mx-xl-xs { margin-left: var(--kern-metric-space-x-large); margin-right: var(--kern-metric-space-x-large); } .kern-my-xl-xs { margin-top: var(--kern-metric-space-x-large); margin-bottom: var(--kern-metric-space-x-large); } .kern-p-xl-xs { padding: var(--kern-metric-space-x-large); } .kern-pt-xl-xs { padding-top: var(--kern-metric-space-x-large); } .kern-pr-xl-xs { padding-right: var(--kern-metric-space-x-large); } .kern-pb-xl-xs { padding-bottom: var(--kern-metric-space-x-large); } .kern-pl-xl-xs { padding-left: var(--kern-metric-space-x-large); } .kern-px-xl-xs { padding-left: var(--kern-metric-space-x-large); padding-right: var(--kern-metric-space-x-large); } .kern-py-xl-xs { padding-top: var(--kern-metric-space-x-large); padding-bottom: var(--kern-metric-space-x-large); } @media (min-width: 576px) { .kern-m-auto-sm { margin: auto; } .kern-mt-auto-sm { margin-top: auto; } .kern-mr-auto-sm { margin-right: auto; } .kern-mb-auto-sm { margin-bottom: auto; } .kern-ml-auto-sm { margin-left: auto; } .kern-mx-auto-sm { margin-left: auto; margin-right: auto; } .kern-my-auto-sm { margin-top: auto; margin-bottom: auto; } .kern-m-none-sm { margin: var(--kern-metric-space-none); } .kern-mt-none-sm { margin-top: var(--kern-metric-space-none); } .kern-mr-none-sm { margin-right: var(--kern-metric-space-none); } .kern-mb-none-sm { margin-bottom: var(--kern-metric-space-none); } .kern-ml-none-sm { margin-left: var(--kern-metric-space-none); } .kern-mx-none-sm { margin-left: var(--kern-metric-space-none); margin-right: var(--kern-metric-space-none); } .kern-my-none-sm { margin-top: var(--kern-metric-space-none); margin-bottom: var(--kern-metric-space-none); } .kern-p-none-sm { padding: var(--kern-metric-space-none); } .kern-pt-none-sm { padding-top: var(--kern-metric-space-none); } .kern-pr-none-sm { padding-right: var(--kern-metric-space-none); } .kern-pb-none-sm { padding-bottom: var(--kern-metric-space-none); } .kern-pl-none-sm { padding-left: var(--kern-metric-space-none); } .kern-px-none-sm { padding-left: var(--kern-metric-space-none); padding-right: var(--kern-metric-space-none); } .kern-py-none-sm { padding-top: var(--kern-metric-space-none); padding-bottom: var(--kern-metric-space-none); } .kern-m-xxs-sm { margin: var(--kern-metric-space-2x-small); } .kern-mt-xxs-sm { margin-top: var(--kern-metric-space-2x-small); } .kern-mr-xxs-sm { margin-right: var(--kern-metric-space-2x-small); } .kern-mb-xxs-sm { margin-bottom: var(--kern-metric-space-2x-small); } .kern-ml-xxs-sm { margin-left: var(--kern-metric-space-2x-small); } .kern-mx-xxs-sm { margin-left: var(--kern-metric-space-2x-small); margin-right: var(--kern-metric-space-2x-small); } .kern-my-xxs-sm { margin-top: var(--kern-metric-space-2x-small); margin-bottom: var(--kern-metric-space-2x-small); } .kern-p-xxs-sm { padding: var(--kern-metric-space-2x-small); } .kern-pt-xxs-sm { padding-top: var(--kern-metric-space-2x-small); } .kern-pr-xxs-sm { padding-right: var(--kern-metric-space-2x-small); } .kern-pb-xxs-sm { padding-bottom: var(--kern-metric-space-2x-small); } .kern-pl-xxs-sm { padding-left: var(--kern-metric-space-2x-small); } .kern-px-xxs-sm { padding-left: var(--kern-metric-space-2x-small); padding-right: var(--kern-metric-space-2x-small); } .kern-py-xxs-sm { padding-top: var(--kern-metric-space-2x-small); padding-bottom: var(--kern-metric-space-2x-small); } .kern-m-xs-sm { margin: var(--kern-metric-space-x-small); } .kern-mt-xs-sm { margin-top: var(--kern-metric-space-x-small); } .kern-mr-xs-sm { margin-right: var(--kern-metric-space-x-small); } .kern-mb-xs-sm { margin-bottom: var(--kern-metric-space-x-small); } .kern-ml-xs-sm { margin-left: var(--kern-metric-space-x-small); } .kern-mx-xs-sm { margin-left: var(--kern-metric-space-x-small); margin-right: var(--kern-metric-space-x-small); } .kern-my-xs-sm { margin-top: var(--kern-metric-space-x-small); margin-bottom: var(--kern-metric-space-x-small); } .kern-p-xs-sm { padding: var(--kern-metric-space-x-small); } .kern-pt-xs-sm { padding-top: var(--kern-metric-space-x-small); } .kern-pr-xs-sm { padding-right: var(--kern-metric-space-x-small); } .kern-pb-xs-sm { padding-bottom: var(--kern-metric-space-x-small); } .kern-pl-xs-sm { padding-left: var(--kern-metric-space-x-small); } .kern-px-xs-sm { padding-left: var(--kern-metric-space-x-small); padding-right: var(--kern-metric-space-x-small); } .kern-py-xs-sm { padding-top: var(--kern-metric-space-x-small); padding-bottom: var(--kern-metric-space-x-small); } .kern-m-sm-sm { margin: var(--kern-metric-space-small); } .kern-mt-sm-sm { margin-top: var(--kern-metric-space-small); } .kern-mr-sm-sm { margin-right: var(--kern-metric-space-small); } .kern-mb-sm-sm { margin-bottom: var(--kern-metric-space-small); } .kern-ml-sm-sm { margin-left: var(--kern-metric-space-small); } .kern-mx-sm-sm { margin-left: var(--kern-metric-space-small); margin-right: var(--kern-metric-space-small); } .kern-my-sm-sm { margin-top: var(--kern-metric-space-small); margin-bottom: var(--kern-metric-space-small); } .kern-p-sm-sm { padding: var(--kern-metric-space-small); } .kern-pt-sm-sm { padding-top: var(--kern-metric-space-small); } .kern-pr-sm-sm { padding-right: var(--kern-metric-space-small); } .kern-pb-sm-sm { padding-bottom: var(--kern-metric-space-small); } .kern-pl-sm-sm { padding-left: var(--kern-metric-space-small); } .kern-px-sm-sm { padding-left: var(--kern-metric-space-small); padding-right: var(--kern-metric-space-small); } .kern-py-sm-sm { padding-top: var(--kern-metric-space-small); padding-bottom: var(--kern-metric-space-small); } .kern-m-md-sm { margin: var(--kern-metric-space-default); } .kern-mt-md-sm { margin-top: var(--kern-metric-space-default); } .kern-mr-md-sm { margin-right: var(--kern-metric-space-default); } .kern-mb-md-sm { margin-bottom: var(--kern-metric-space-default); } .kern-ml-md-sm { margin-left: var(--kern-metric-space-default); } .kern-mx-md-sm { margin-left: var(--kern-metric-space-default); margin-right: var(--kern-metric-space-default); } .kern-my-md-sm { margin-top: var(--kern-metric-space-default); margin-bottom: var(--kern-metric-space-default); } .kern-p-md-sm { padding: var(--kern-metric-space-default); } .kern-pt-md-sm { padding-top: var(--kern-metric-space-default); } .kern-pr-md-sm { padding-right: var(--kern-metric-space-default); } .kern-pb-md-sm { padding-bottom: var(--kern-metric-space-default); } .kern-pl-md-sm { padding-left: var(--kern-metric-space-default); } .kern-px-md-sm { padding-left: var(--kern-metric-space-default); padding-right: var(--kern-metric-space-default); } .kern-py-md-sm { padding-top: var(--kern-metric-space-default); padding-bottom: var(--kern-metric-space-default); } .kern-m-lg-sm { margin: var(--kern-metric-space-large); } .kern-mt-lg-sm { margin-top: var(--kern-metric-space-large); } .kern-mr-lg-sm { margin-right: var(--kern-metric-space-large); } .kern-mb-lg-sm { margin-bottom: var(--kern-metric-space-large); } .kern-ml-lg-sm { margin-left: var(--kern-metric-space-large); } .kern-mx-lg-sm { margin-left: var(--kern-metric-space-large); margin-right: var(--kern-metric-space-large); } .kern-my-lg-sm { margin-top: var(--kern-metric-space-large); margin-bottom: var(--kern-metric-space-large); } .kern-p-lg-sm { padding: var(--kern-metric-space-large); } .kern-pt-lg-sm { padding-top: var(--kern-metric-space-large); } .kern-pr-lg-sm { padding-right: var(--kern-metric-space-large); } .kern-pb-lg-sm { padding-bottom: var(--kern-metric-space-large); } .kern-pl-lg-sm { padding-left: var(--kern-metric-space-large); } .kern-px-lg-sm { padding-left: var(--kern-metric-space-large); padding-right: var(--kern-metric-space-large); } .kern-py-lg-sm { padding-top: var(--kern-metric-space-large); padding-bottom: var(--kern-metric-space-large); } .kern-m-xl-sm { margin: var(--kern-metric-space-x-large); } .kern-mt-xl-sm { margin-top: var(--kern-metric-space-x-large); } .kern-mr-xl-sm { margin-right: var(--kern-metric-space-x-large); } .kern-mb-xl-sm { margin-bottom: var(--kern-metric-space-x-large); } .kern-ml-xl-sm { margin-left: var(--kern-metric-space-x-large); } .kern-mx-xl-sm { margin-left: var(--kern-metric-space-x-large); margin-right: var(--kern-metric-space-x-large); } .kern-my-xl-sm { margin-top: var(--kern-metric-space-x-large); margin-bottom: var(--kern-metric-space-x-large); } .kern-p-xl-sm { padding: var(--kern-metric-space-x-large); } .kern-pt-xl-sm { padding-top: var(--kern-metric-space-x-large); } .kern-pr-xl-sm { padding-right: var(--kern-metric-space-x-large); } .kern-pb-xl-sm { padding-bottom: var(--kern-metric-space-x-large); } .kern-pl-xl-sm { padding-left: var(--kern-metric-space-x-large); } .kern-px-xl-sm { padding-left: var(--kern-metric-space-x-large); padding-right: var(--kern-metric-space-x-large); } .kern-py-xl-sm { padding-top: var(--kern-metric-space-x-large); padding-bottom: var(--kern-metric-space-x-large); } } @media (min-width: 768px) { .kern-m-auto-md { margin: auto; } .kern-mt-auto-md { margin-top: auto; } .kern-mr-auto-md { margin-right: auto; } .kern-mb-auto-md { margin-bottom: auto; } .kern-ml-auto-md { margin-left: auto; } .kern-mx-auto-md { margin-left: auto; margin-right: auto; } .kern-my-auto-md { margin-top: auto; margin-bottom: auto; } .kern-m-none-md { margin: var(--kern-metric-space-none); } .kern-mt-none-md { margin-top: var(--kern-metric-space-none); } .kern-mr-none-md { margin-right: var(--kern-metric-space-none); } .kern-mb-none-md { margin-bottom: var(--kern-metric-space-none); } .kern-ml-none-md { margin-left: var(--kern-metric-space-none); } .kern-mx-none-md { margin-left: var(--kern-metric-space-none); margin-right: var(--kern-metric-space-none); } .kern-my-none-md { margin-top: var(--kern-metric-space-none); margin-bottom: var(--kern-metric-space-none); } .kern-p-none-md { padding: var(--kern-metric-space-none); } .kern-pt-none-md { padding-top: var(--kern-metric-space-none); } .kern-pr-none-md { padding-right: var(--kern-metric-space-none); } .kern-pb-none-md { padding-bottom: var(--kern-metric-space-none); } .kern-pl-none-md { padding-left: var(--kern-metric-space-none); } .kern-px-none-md { padding-left: var(--kern-metric-space-none); padding-right: var(--kern-metric-space-none); } .kern-py-none-md { padding-top: var(--kern-metric-space-none); padding-bottom: var(--kern-metric-space-none); } .kern-m-xxs-md { margin: var(--kern-metric-space-2x-small); } .kern-mt-xxs-md { margin-top: var(--kern-metric-space-2x-small); } .kern-mr-xxs-md { margin-right: var(--kern-metric-space-2x-small); } .kern-mb-xxs-md { margin-bottom: var(--kern-metric-space-2x-small); } .kern-ml-xxs-md { margin-left: var(--kern-metric-space-2x-small); } .kern-mx-xxs-md { margin-left: var(--kern-metric-space-2x-small); margin-right: var(--kern-metric-space-2x-small); } .kern-my-xxs-md { margin-top: var(--kern-metric-space-2x-small); margin-bottom: var(--kern-metric-space-2x-small); } .kern-p-xxs-md { padding: var(--kern-metric-space-2x-small); } .kern-pt-xxs-md { padding-top: var(--kern-metric-space-2x-small); } .kern-pr-xxs-md { padding-right: var(--kern-metric-space-2x-small); } .kern-pb-xxs-md { padding-bottom: var(--kern-metric-space-2x-small); } .kern-pl-xxs-md { padding-left: var(--kern-metric-space-2x-small); } .kern-px-xxs-md { padding-left: var(--kern-metric-space-2x-small); padding-right: var(--kern-metric-space-2x-small); } .kern-py-xxs-md { padding-top: var(--kern-metric-space-2x-small); padding-bottom: var(--kern-metric-space-2x-small); } .kern-m-xs-md { margin: var(--kern-metric-space-x-small); } .kern-mt-xs-md { margin-top: var(--kern-metric-space-x-small); } .kern-mr-xs-md { margin-right: var(--kern-metric-space-x-small); } .kern-mb-xs-md { margin-bottom: var(--kern-metric-space-x-small); } .kern-ml-xs-md { margin-left: var(--kern-metric-space-x-small); } .kern-mx-xs-md { margin-left: var(--kern-metric-space-x-small); margin-right: var(--kern-metric-space-x-small); } .kern-my-xs-md { margin-top: var(--kern-metric-space-x-small); margin-bottom: var(--kern-metric-space-x-small); } .kern-p-xs-md { padding: var(--kern-metric-space-x-small); } .kern-pt-xs-md { padding-top: var(--kern-metric-space-x-small); } .kern-pr-xs-md { padding-right: var(--kern-metric-space-x-small); } .kern-pb-xs-md { padding-bottom: var(--kern-metric-space-x-small); } .kern-pl-xs-md { padding-left: var(--kern-metric-space-x-small); } .kern-px-xs-md { padding-left: var(--kern-metric-space-x-small); padding-right: var(--kern-metric-space-x-small); } .kern-py-xs-md { padding-top: var(--kern-metric-space-x-small); padding-bottom: var(--kern-metric-space-x-small); } .kern-m-sm-md { margin: var(--kern-metric-space-small); } .kern-mt-sm-md { margin-top: var(--kern-metric-space-small); } .kern-mr-sm-md { margin-right: var(--kern-metric-space-small); } .kern-mb-sm-md { margin-bottom: var(--kern-metric-space-small); } .kern-ml-sm-md { margin-left: var(--kern-metric-space-small); } .kern-mx-sm-md { margin-left: var(--kern-metric-space-small); margin-right: var(--kern-metric-space-small); } .kern-my-sm-md { margin-top: var(--kern-metric-space-small); margin-bottom: var(--kern-metric-space-small); } .kern-p-sm-md { padding: var(--kern-metric-space-small); } .kern-pt-sm-md { padding-top: var(--kern-metric-space-small); } .kern-pr-sm-md { padding-right: var(--kern-metric-space-small); } .kern-pb-sm-md { padding-bottom: var(--kern-metric-space-small); } .kern-pl-sm-md { padding-left: var(--kern-metric-space-small); } .kern-px-sm-md { padding-left: var(--kern-metric-space-small); padding-right: var(--kern-metric-space-small); } .kern-py-sm-md { padding-top: var(--kern-metric-space-small); padding-bottom: var(--kern-metric-space-small); } .kern-m-md-md { margin: var(--kern-metric-space-default); } .kern-mt-md-md { margin-top: var(--kern-metric-space-default); } .kern-mr-md-md { margin-right: var(--kern-metric-space-default); } .kern-mb-md-md { margin-bottom: var(--kern-metric-space-default); } .kern-ml-md-md { margin-left: var(--kern-metric-space-default); } .kern-mx-md-md { margin-left: var(--kern-metric-space-default); margin-right: var(--kern-metric-space-default); } .kern-my-md-md { margin-top: var(--kern-metric-space-default); margin-bottom: var(--kern-metric-space-default); } .kern-p-md-md { padding: var(--kern-metric-space-default); } .kern-pt-md-md { padding-top: var(--kern-metric-space-default); } .kern-pr-md-md { padding-right: var(--kern-metric-space-default); } .kern-pb-md-md { padding-bottom: var(--kern-metric-space-default); } .kern-pl-md-md { padding-left: var(--kern-metric-space-default); } .kern-px-md-md { padding-left: var(--kern-metric-space-default); padding-right: var(--kern-metric-space-default); } .kern-py-md-md { padding-top: var(--kern-metric-space-default); padding-bottom: var(--kern-metric-space-default); } .kern-m-lg-md { margin: var(--kern-metric-space-large); } .kern-mt-lg-md { margin-top: var(--kern-metric-space-large); } .kern-mr-lg-md { margin-right: var(--kern-metric-space-large); } .kern-mb-lg-md { margin-bottom: var(--kern-metric-space-large); } .kern-ml-lg-md { margin-left: var(--kern-metric-space-large); } .kern-mx-lg-md { margin-left: var(--kern-metric-space-large); margin-right: var(--kern-metric-space-large); } .kern-my-lg-md { margin-top: var(--kern-metric-space-large); margin-bottom: var(--kern-metric-space-large); } .kern-p-lg-md { padding: var(--kern-metric-space-large); } .kern-pt-lg-md { padding-top: var(--kern-metric-space-large); } .kern-pr-lg-md { padding-right: var(--kern-metric-space-large); } .kern-pb-lg-md { padding-bottom: var(--kern-metric-space-large); } .kern-pl-lg-md { padding-left: var(--kern-metric-space-large); } .kern-px-lg-md { padding-left: var(--kern-metric-space-large); padding-right: var(--kern-metric-space-large); } .kern-py-lg-md { padding-top: var(--kern-metric-space-large); padding-bottom: var(--kern-metric-space-large); } .kern-m-xl-md { margin: var(--kern-metric-space-x-large); } .kern-mt-xl-md { margin-top: var(--kern-metric-space-x-large); } .kern-mr-xl-md { margin-right: var(--kern-metric-space-x-large); } .kern-mb-xl-md { margin-bottom: var(--kern-metric-space-x-large); } .kern-ml-xl-md { margin-left: var(--kern-metric-space-x-large); } .kern-mx-xl-md { margin-left: var(--kern-metric-space-x-large); margin-right: var(--kern-metric-space-x-large); } .kern-my-xl-md { margin-top: var(--kern-metric-space-x-large); margin-bottom: var(--kern-metric-space-x-large); } .kern-p-xl-md { padding: var(--kern-metric-space-x-large); } .kern-pt-xl-md { padding-top: var(--kern-metric-space-x-large); } .kern-pr-xl-md { padding-right: var(--kern-metric-space-x-large); } .kern-pb-xl-md { padding-bottom: var(--kern-metric-space-x-large); } .kern-pl-xl-md { padding-left: var(--kern-metric-space-x-large); } .kern-px-xl-md { padding-left: var(--kern-metric-space-x-large); padding-right: var(--kern-metric-space-x-large); } .kern-py-xl-md { padding-top: var(--kern-metric-space-x-large); padding-bottom: var(--kern-metric-space-x-large); } } @media (min-width: 992px) { .kern-m-auto-lg { margin: auto; } .kern-mt-auto-lg { margin-top: auto; } .kern-mr-auto-lg { margin-right: auto; } .kern-mb-auto-lg { margin-bottom: auto; } .kern-ml-auto-lg { margin-left: auto; } .kern-mx-auto-lg { margin-left: auto; margin-right: auto; } .kern-my-auto-lg { margin-top: auto; margin-bottom: auto; } .kern-m-none-lg { margin: var(--kern-metric-space-none); } .kern-mt-none-lg { margin-top: var(--kern-metric-space-none); } .kern-mr-none-lg { margin-right: var(--kern-metric-space-none); } .kern-mb-none-lg { margin-bottom: var(--kern-metric-space-none); } .kern-ml-none-lg { margin-left: var(--kern-metric-space-none); } .kern-mx-none-lg { margin-left: var(--kern-metric-space-none); margin-right: var(--kern-metric-space-none); } .kern-my-none-lg { margin-top: var(--kern-metric-space-none); margin-bottom: var(--kern-metric-space-none); } .kern-p-none-lg { padding: var(--kern-metric-space-none); } .kern-pt-none-lg { padding-top: var(--kern-metric-space-none); } .kern-pr-none-lg { padding-right: var(--kern-metric-space-none); } .kern-pb-none-lg { padding-bottom: var(--kern-metric-space-none); } .kern-pl-none-lg { padding-left: var(--kern-metric-space-none); } .kern-px-none-lg { padding-left: var(--kern-metric-space-none); padding-right: var(--kern-metric-space-none); } .kern-py-none-lg { padding-top: var(--kern-metric-space-none); padding-bottom: var(--kern-metric-space-none); } .kern-m-xxs-lg { margin: var(--kern-metric-space-2x-small); } .kern-mt-xxs-lg { margin-top: var(--kern-metric-space-2x-small); } .kern-mr-xxs-lg { margin-right: var(--kern-metric-space-2x-small); } .kern-mb-xxs-lg { margin-bottom: var(--kern-metric-space-2x-small); } .kern-ml-xxs-lg { margin-left: var(--kern-metric-space-2x-small); } .kern-mx-xxs-lg { margin-left: var(--kern-metric-space-2x-small); margin-right: var(--kern-metric-space-2x-small); } .kern-my-xxs-lg { margin-top: var(--kern-metric-space-2x-small); margin-bottom: var(--kern-metric-space-2x-small); } .kern-p-xxs-lg { padding: var(--kern-metric-space-2x-small); } .kern-pt-xxs-lg { padding-top: var(--kern-metric-space-2x-small); } .kern-pr-xxs-lg { padding-right: var(--kern-metric-space-2x-small); } .kern-pb-xxs-lg { padding-bottom: var(--kern-metric-space-2x-small); } .kern-pl-xxs-lg { padding-left: var(--kern-metric-space-2x-small); } .kern-px-xxs-lg { padding-left: var(--kern-metric-space-2x-small); padding-right: var(--kern-metric-space-2x-small); } .kern-py-xxs-lg { padding-top: var(--kern-metric-space-2x-small); padding-bottom: var(--kern-metric-space-2x-small); } .kern-m-xs-lg { margin: var(--kern-metric-space-x-small); } .kern-mt-xs-lg { margin-top: var(--kern-metric-space-x-small); } .kern-mr-xs-lg { margin-right: var(--kern-metric-space-x-small); } .kern-mb-xs-lg { margin-bottom: var(--kern-metric-space-x-small); } .kern-ml-xs-lg { margin-left: var(--kern-metric-space-x-small); } .kern-mx-xs-lg { margin-left: var(--kern-metric-space-x-small); margin-right: var(--kern-metric-space-x-small); } .kern-my-xs-lg { margin-top: var(--kern-metric-space-x-small); margin-bottom: var(--kern-metric-space-x-small); } .kern-p-xs-lg { padding: var(--kern-metric-space-x-small); } .kern-pt-xs-lg { padding-top: var(--kern-metric-space-x-small); } .kern-pr-xs-lg { padding-right: var(--kern-metric-space-x-small); } .kern-pb-xs-lg { padding-bottom: var(--kern-metric-space-x-small); } .kern-pl-xs-lg { padding-left: var(--kern-metric-space-x-small); } .kern-px-xs-lg { padding-left: var(--kern-metric-space-x-small); padding-right: var(--kern-metric-space-x-small); } .kern-py-xs-lg { padding-top: var(--kern-metric-space-x-small); padding-bottom: var(--kern-metric-space-x-small); } .kern-m-sm-lg { margin: var(--kern-metric-space-small); } .kern-mt-sm-lg { margin-top: var(--kern-metric-space-small); } .kern-mr-sm-lg { margin-right: var(--kern-metric-space-small); } .kern-mb-sm-lg { margin-bottom: var(--kern-metric-space-small); } .kern-ml-sm-lg { margin-left: var(--kern-metric-space-small); } .kern-mx-sm-lg { margin-left: var(--kern-metric-space-small); margin-right: var(--kern-metric-space-small); } .kern-my-sm-lg { margin-top: var(--kern-metric-space-small); margin-bottom: var(--kern-metric-space-small); } .kern-p-sm-lg { padding: var(--kern-metric-space-small); } .kern-pt-sm-lg { padding-top: var(--kern-metric-space-small); } .kern-pr-sm-lg { padding-right: var(--kern-metric-space-small); } .kern-pb-sm-lg { padding-bottom: var(--kern-metric-space-small); } .kern-pl-sm-lg { padding-left: var(--kern-metric-space-small); } .kern-px-sm-lg { padding-left: var(--kern-metric-space-small); padding-right: var(--kern-metric-space-small); } .kern-py-sm-lg { padding-top: var(--kern-metric-space-small); padding-bottom: var(--kern-metric-space-small); } .kern-m-md-lg { margin: var(--kern-metric-space-default); } .kern-mt-md-lg { margin-top: var(--kern-metric-space-default); } .kern-mr-md-lg { margin-right: var(--kern-metric-space-default); } .kern-mb-md-lg { margin-bottom: var(--kern-metric-space-default); } .kern-ml-md-lg { margin-left: var(--kern-metric-space-default); } .kern-mx-md-lg { margin-left: var(--kern-metric-space-default); margin-right: var(--kern-metric-space-default); } .kern-my-md-lg { margin-top: var(--kern-metric-space-default); margin-bottom: var(--kern-metric-space-default); } .kern-p-md-lg { padding: var(--kern-metric-space-default); } .kern-pt-md-lg { padding-top: var(--kern-metric-space-default); } .kern-pr-md-lg { padding-right: var(--kern-metric-space-default); } .kern-pb-md-lg { padding-bottom: var(--kern-metric-space-default); } .kern-pl-md-lg { padding-left: var(--kern-metric-space-default); } .kern-px-md-lg { padding-left: var(--kern-metric-space-default); padding-right: var(--kern-metric-space-default); } .kern-py-md-lg { padding-top: var(--kern-metric-space-default); padding-bottom: var(--kern-metric-space-default); } .kern-m-lg-lg { margin: var(--kern-metric-space-large); } .kern-mt-lg-lg { margin-top: var(--kern-metric-space-large); } .kern-mr-lg-lg { margin-right: var(--kern-metric-space-large); } .kern-mb-lg-lg { margin-bottom: var(--kern-metric-space-large); } .kern-ml-lg-lg { margin-left: var(--kern-metric-space-large); } .kern-mx-lg-lg { margin-left: var(--kern-metric-space-large); margin-right: var(--kern-metric-space-large); } .kern-my-lg-lg { margin-top: var(--kern-metric-space-large); margin-bottom: var(--kern-metric-space-large); } .kern-p-lg-lg { padding: var(--kern-metric-space-large); } .kern-pt-lg-lg { padding-top: var(--kern-metric-space-large); } .kern-pr-lg-lg { padding-right: var(--kern-metric-space-large); } .kern-pb-lg-lg { padding-bottom: var(--kern-metric-space-large); } .kern-pl-lg-lg { padding-left: var(--kern-metric-space-large); } .kern-px-lg-lg { padding-left: var(--kern-metric-space-large); padding-right: var(--kern-metric-space-large); } .kern-py-lg-lg { padding-top: var(--kern-metric-space-large); padding-bottom: var(--kern-metric-space-large); } .kern-m-xl-lg { margin: var(--kern-metric-space-x-large); } .kern-mt-xl-lg { margin-top: var(--kern-metric-space-x-large); } .kern-mr-xl-lg { margin-right: var(--kern-metric-space-x-large); } .kern-mb-xl-lg { margin-bottom: var(--kern-metric-space-x-large); } .kern-ml-xl-lg { margin-left: var(--kern-metric-space-x-large); } .kern-mx-xl-lg { margin-left: var(--kern-metric-space-x-large); margin-right: var(--kern-metric-space-x-large); } .kern-my-xl-lg { margin-top: var(--kern-metric-space-x-large); margin-bottom: var(--kern-metric-space-x-large); } .kern-p-xl-lg { padding: var(--kern-metric-space-x-large); } .kern-pt-xl-lg { padding-top: var(--kern-metric-space-x-large); } .kern-pr-xl-lg { padding-right: var(--kern-metric-space-x-large); } .kern-pb-xl-lg { padding-bottom: var(--kern-metric-space-x-large); } .kern-pl-xl-lg { padding-left: var(--kern-metric-space-x-large); } .kern-px-xl-lg { padding-left: var(--kern-metric-space-x-large); padding-right: var(--kern-metric-space-x-large); } .kern-py-xl-lg { padding-top: var(--kern-metric-space-x-large); padding-bottom: var(--kern-metric-space-x-large); } } @media (min-width: 1200px) { .kern-m-auto-xl { margin: auto; } .kern-mt-auto-xl { margin-top: auto; } .kern-mr-auto-xl { margin-right: auto; } .kern-mb-auto-xl { margin-bottom: auto; } .kern-ml-auto-xl { margin-left: auto; } .kern-mx-auto-xl { margin-left: auto; margin-right: auto; } .kern-my-auto-xl { margin-top: auto; margin-bottom: auto; } .kern-m-none-xl { margin: var(--kern-metric-space-none); } .kern-mt-none-xl { margin-top: var(--kern-metric-space-none); } .kern-mr-none-xl { margin-right: var(--kern-metric-space-none); } .kern-mb-none-xl { margin-bottom: var(--kern-metric-space-none); } .kern-ml-none-xl { margin-left: var(--kern-metric-space-none); } .kern-mx-none-xl { margin-left: var(--kern-metric-space-none); margin-right: var(--kern-metric-space-none); } .kern-my-none-xl { margin-top: var(--kern-metric-space-none); margin-bottom: var(--kern-metric-space-none); } .kern-p-none-xl { padding: var(--kern-metric-space-none); } .kern-pt-none-xl { padding-top: var(--kern-metric-space-none); } .kern-pr-none-xl { padding-right: var(--kern-metric-space-none); } .kern-pb-none-xl { padding-bottom: var(--kern-metric-space-none); } .kern-pl-none-xl { padding-left: var(--kern-metric-space-none); } .kern-px-none-xl { padding-left: var(--kern-metric-space-none); padding-right: var(--kern-metric-space-none); } .kern-py-none-xl { padding-top: var(--kern-metric-space-none); padding-bottom: var(--kern-metric-space-none); } .kern-m-xxs-xl { margin: var(--kern-metric-space-2x-small); } .kern-mt-xxs-xl { margin-top: var(--kern-metric-space-2x-small); } .kern-mr-xxs-xl { margin-right: var(--kern-metric-space-2x-small); } .kern-mb-xxs-xl { margin-bottom: var(--kern-metric-space-2x-small); } .kern-ml-xxs-xl { margin-left: var(--kern-metric-space-2x-small); } .kern-mx-xxs-xl { margin-left: var(--kern-metric-space-2x-small); margin-right: var(--kern-metric-space-2x-small); } .kern-my-xxs-xl { margin-top: var(--kern-metric-space-2x-small); margin-bottom: var(--kern-metric-space-2x-small); } .kern-p-xxs-xl { padding: var(--kern-metric-space-2x-small); } .kern-pt-xxs-xl { padding-top: var(--kern-metric-space-2x-small); } .kern-pr-xxs-xl { padding-right: var(--kern-metric-space-2x-small); } .kern-pb-xxs-xl { padding-bottom: var(--kern-metric-space-2x-small); } .kern-pl-xxs-xl { padding-left: var(--kern-metric-space-2x-small); } .kern-px-xxs-xl { padding-left: var(--kern-metric-space-2x-small); padding-right: var(--kern-metric-space-2x-small); } .kern-py-xxs-xl { padding-top: var(--kern-metric-space-2x-small); padding-bottom: var(--kern-metric-space-2x-small); } .kern-m-xs-xl { margin: var(--kern-metric-space-x-small); } .kern-mt-xs-xl { margin-top: var(--kern-metric-space-x-small); } .kern-mr-xs-xl { margin-right: var(--kern-metric-space-x-small); } .kern-mb-xs-xl { margin-bottom: var(--kern-metric-space-x-small); } .kern-ml-xs-xl { margin-left: var(--kern-metric-space-x-small); } .kern-mx-xs-xl { margin-left: var(--kern-metric-space-x-small); margin-right: var(--kern-metric-space-x-small); } .kern-my-xs-xl { margin-top: var(--kern-metric-space-x-small); margin-bottom: var(--kern-metric-space-x-small); } .kern-p-xs-xl { padding: var(--kern-metric-space-x-small); } .kern-pt-xs-xl { padding-top: var(--kern-metric-space-x-small); } .kern-pr-xs-xl { padding-right: var(--kern-metric-space-x-small); } .kern-pb-xs-xl { padding-bottom: var(--kern-metric-space-x-small); } .kern-pl-xs-xl { padding-left: var(--kern-metric-space-x-small); } .kern-px-xs-xl { padding-left: var(--kern-metric-space-x-small); padding-right: var(--kern-metric-space-x-small); } .kern-py-xs-xl { padding-top: var(--kern-metric-space-x-small); padding-bottom: var(--kern-metric-space-x-small); } .kern-m-sm-xl { margin: var(--kern-metric-space-small); } .kern-mt-sm-xl { margin-top: var(--kern-metric-space-small); } .kern-mr-sm-xl { margin-right: var(--kern-metric-space-small); } .kern-mb-sm-xl { margin-bottom: var(--kern-metric-space-small); } .kern-ml-sm-xl { margin-left: var(--kern-metric-space-small); } .kern-mx-sm-xl { margin-left: var(--kern-metric-space-small); margin-right: var(--kern-metric-space-small); } .kern-my-sm-xl { margin-top: var(--kern-metric-space-small); margin-bottom: var(--kern-metric-space-small); } .kern-p-sm-xl { padding: var(--kern-metric-space-small); } .kern-pt-sm-xl { padding-top: var(--kern-metric-space-small); } .kern-pr-sm-xl { padding-right: var(--kern-metric-space-small); } .kern-pb-sm-xl { padding-bottom: var(--kern-metric-space-small); } .kern-pl-sm-xl { padding-left: var(--kern-metric-space-small); } .kern-px-sm-xl { padding-left: var(--kern-metric-space-small); padding-right: var(--kern-metric-space-small); } .kern-py-sm-xl { padding-top: var(--kern-metric-space-small); padding-bottom: var(--kern-metric-space-small); } .kern-m-md-xl { margin: var(--kern-metric-space-default); } .kern-mt-md-xl { margin-top: var(--kern-metric-space-default); } .kern-mr-md-xl { margin-right: var(--kern-metric-space-default); } .kern-mb-md-xl { margin-bottom: var(--kern-metric-space-default); } .kern-ml-md-xl { margin-left: var(--kern-metric-space-default); } .kern-mx-md-xl { margin-left: var(--kern-metric-space-default); margin-right: var(--kern-metric-space-default); } .kern-my-md-xl { margin-top: var(--kern-metric-space-default); margin-bottom: var(--kern-metric-space-default); } .kern-p-md-xl { padding: var(--kern-metric-space-default); } .kern-pt-md-xl { padding-top: var(--kern-metric-space-default); } .kern-pr-md-xl { padding-right: var(--kern-metric-space-default); } .kern-pb-md-xl { padding-bottom: var(--kern-metric-space-default); } .kern-pl-md-xl { padding-left: var(--kern-metric-space-default); } .kern-px-md-xl { padding-left: var(--kern-metric-space-default); padding-right: var(--kern-metric-space-default); } .kern-py-md-xl { padding-top: var(--kern-metric-space-default); padding-bottom: var(--kern-metric-space-default); } .kern-m-lg-xl { margin: var(--kern-metric-space-large); } .kern-mt-lg-xl { margin-top: var(--kern-metric-space-large); } .kern-mr-lg-xl { margin-right: var(--kern-metric-space-large); } .kern-mb-lg-xl { margin-bottom: var(--kern-metric-space-large); } .kern-ml-lg-xl { margin-left: var(--kern-metric-space-large); } .kern-mx-lg-xl { margin-left: var(--kern-metric-space-large); margin-right: var(--kern-metric-space-large); } .kern-my-lg-xl { margin-top: var(--kern-metric-space-large); margin-bottom: var(--kern-metric-space-large); } .kern-p-lg-xl { padding: var(--kern-metric-space-large); } .kern-pt-lg-xl { padding-top: var(--kern-metric-space-large); } .kern-pr-lg-xl { padding-right: var(--kern-metric-space-large); } .kern-pb-lg-xl { padding-bottom: var(--kern-metric-space-large); } .kern-pl-lg-xl { padding-left: var(--kern-metric-space-large); } .kern-px-lg-xl { padding-left: var(--kern-metric-space-large); padding-right: var(--kern-metric-space-large); } .kern-py-lg-xl { padding-top: var(--kern-metric-space-large); padding-bottom: var(--kern-metric-space-large); } .kern-m-xl-xl { margin: var(--kern-metric-space-x-large); } .kern-mt-xl-xl { margin-top: var(--kern-metric-space-x-large); } .kern-mr-xl-xl { margin-right: var(--kern-metric-space-x-large); } .kern-mb-xl-xl { margin-bottom: var(--kern-metric-space-x-large); } .kern-ml-xl-xl { margin-left: var(--kern-metric-space-x-large); } .kern-mx-xl-xl { margin-left: var(--kern-metric-space-x-large); margin-right: var(--kern-metric-space-x-large); } .kern-my-xl-xl { margin-top: var(--kern-metric-space-x-large); margin-bottom: var(--kern-metric-space-x-large); } .kern-p-xl-xl { padding: var(--kern-metric-space-x-large); } .kern-pt-xl-xl { padding-top: var(--kern-metric-space-x-large); } .kern-pr-xl-xl { padding-right: var(--kern-metric-space-x-large); } .kern-pb-xl-xl { padding-bottom: var(--kern-metric-space-x-large); } .kern-pl-xl-xl { padding-left: var(--kern-metric-space-x-large); } .kern-px-xl-xl { padding-left: var(--kern-metric-space-x-large); padding-right: var(--kern-metric-space-x-large); } .kern-py-xl-xl { padding-top: var(--kern-metric-space-x-large); padding-bottom: var(--kern-metric-space-x-large); } } @media (min-width: 1600px) { .kern-m-auto-xxl { margin: auto; } .kern-mt-auto-xxl { margin-top: auto; } .kern-mr-auto-xxl { margin-right: auto; } .kern-mb-auto-xxl { margin-bottom: auto; } .kern-ml-auto-xxl { margin-left: auto; } .kern-mx-auto-xxl { margin-left: auto; margin-right: auto; } .kern-my-auto-xxl { margin-top: auto; margin-bottom: auto; } .kern-m-none-xxl { margin: var(--kern-metric-space-none); } .kern-mt-none-xxl { margin-top: var(--kern-metric-space-none); } .kern-mr-none-xxl { margin-right: var(--kern-metric-space-none); } .kern-mb-none-xxl { margin-bottom: var(--kern-metric-space-none); } .kern-ml-none-xxl { margin-left: var(--kern-metric-space-none); } .kern-mx-none-xxl { margin-left: var(--kern-metric-space-none); margin-right: var(--kern-metric-space-none); } .kern-my-none-xxl { margin-top: var(--kern-metric-space-none); margin-bottom: var(--kern-metric-space-none); } .kern-p-none-xxl { padding: var(--kern-metric-space-none); } .kern-pt-none-xxl { padding-top: var(--kern-metric-space-none); } .kern-pr-none-xxl { padding-right: var(--kern-metric-space-none); } .kern-pb-none-xxl { padding-bottom: var(--kern-metric-space-none); } .kern-pl-none-xxl { padding-left: var(--kern-metric-space-none); } .kern-px-none-xxl { padding-left: var(--kern-metric-space-none); padding-right: var(--kern-metric-space-none); } .kern-py-none-xxl { padding-top: var(--kern-metric-space-none); padding-bottom: var(--kern-metric-space-none); } .kern-m-xxs-xxl { margin: var(--kern-metric-space-2x-small); } .kern-mt-xxs-xxl { margin-top: var(--kern-metric-space-2x-small); } .kern-mr-xxs-xxl { margin-right: var(--kern-metric-space-2x-small); } .kern-mb-xxs-xxl { margin-bottom: var(--kern-metric-space-2x-small); } .kern-ml-xxs-xxl { margin-left: var(--kern-metric-space-2x-small); } .kern-mx-xxs-xxl { margin-left: var(--kern-metric-space-2x-small); margin-right: var(--kern-metric-space-2x-small); } .kern-my-xxs-xxl { margin-top: var(--kern-metric-space-2x-small); margin-bottom: var(--kern-metric-space-2x-small); } .kern-p-xxs-xxl { padding: var(--kern-metric-space-2x-small); } .kern-pt-xxs-xxl { padding-top: var(--kern-metric-space-2x-small); } .kern-pr-xxs-xxl { padding-right: var(--kern-metric-space-2x-small); } .kern-pb-xxs-xxl { padding-bottom: var(--kern-metric-space-2x-small); } .kern-pl-xxs-xxl { padding-left: var(--kern-metric-space-2x-small); } .kern-px-xxs-xxl { padding-left: var(--kern-metric-space-2x-small); padding-right: var(--kern-metric-space-2x-small); } .kern-py-xxs-xxl { padding-top: var(--kern-metric-space-2x-small); padding-bottom: var(--kern-metric-space-2x-small); } .kern-m-xs-xxl { margin: var(--kern-metric-space-x-small); } .kern-mt-xs-xxl { margin-top: var(--kern-metric-space-x-small); } .kern-mr-xs-xxl { margin-right: var(--kern-metric-space-x-small); } .kern-mb-xs-xxl { margin-bottom: var(--kern-metric-space-x-small); } .kern-ml-xs-xxl { margin-left: var(--kern-metric-space-x-small); } .kern-mx-xs-xxl { margin-left: var(--kern-metric-space-x-small); margin-right: var(--kern-metric-space-x-small); } .kern-my-xs-xxl { margin-top: var(--kern-metric-space-x-small); margin-bottom: var(--kern-metric-space-x-small); } .kern-p-xs-xxl { padding: var(--kern-metric-space-x-small); } .kern-pt-xs-xxl { padding-top: var(--kern-metric-space-x-small); } .kern-pr-xs-xxl { padding-right: var(--kern-metric-space-x-small); } .kern-pb-xs-xxl { padding-bottom: var(--kern-metric-space-x-small); } .kern-pl-xs-xxl { padding-left: var(--kern-metric-space-x-small); } .kern-px-xs-xxl { padding-left: var(--kern-metric-space-x-small); padding-right: var(--kern-metric-space-x-small); } .kern-py-xs-xxl { padding-top: var(--kern-metric-space-x-small); padding-bottom: var(--kern-metric-space-x-small); } .kern-m-sm-xxl { margin: var(--kern-metric-space-small); } .kern-mt-sm-xxl { margin-top: var(--kern-metric-space-small); } .kern-mr-sm-xxl { margin-right: var(--kern-metric-space-small); } .kern-mb-sm-xxl { margin-bottom: var(--kern-metric-space-small); } .kern-ml-sm-xxl { margin-left: var(--kern-metric-space-small); } .kern-mx-sm-xxl { margin-left: var(--kern-metric-space-small); margin-right: var(--kern-metric-space-small); } .kern-my-sm-xxl { margin-top: var(--kern-metric-space-small); margin-bottom: var(--kern-metric-space-small); } .kern-p-sm-xxl { padding: var(--kern-metric-space-small); } .kern-pt-sm-xxl { padding-top: var(--kern-metric-space-small); } .kern-pr-sm-xxl { padding-right: var(--kern-metric-space-small); } .kern-pb-sm-xxl { padding-bottom: var(--kern-metric-space-small); } .kern-pl-sm-xxl { padding-left: var(--kern-metric-space-small); } .kern-px-sm-xxl { padding-left: var(--kern-metric-space-small); padding-right: var(--kern-metric-space-small); } .kern-py-sm-xxl { padding-top: var(--kern-metric-space-small); padding-bottom: var(--kern-metric-space-small); } .kern-m-md-xxl { margin: var(--kern-metric-space-default); } .kern-mt-md-xxl { margin-top: var(--kern-metric-space-default); } .kern-mr-md-xxl { margin-right: var(--kern-metric-space-default); } .kern-mb-md-xxl { margin-bottom: var(--kern-metric-space-default); } .kern-ml-md-xxl { margin-left: var(--kern-metric-space-default); } .kern-mx-md-xxl { margin-left: var(--kern-metric-space-default); margin-right: var(--kern-metric-space-default); } .kern-my-md-xxl { margin-top: var(--kern-metric-space-default); margin-bottom: var(--kern-metric-space-default); } .kern-p-md-xxl { padding: var(--kern-metric-space-default); } .kern-pt-md-xxl { padding-top: var(--kern-metric-space-default); } .kern-pr-md-xxl { padding-right: var(--kern-metric-space-default); } .kern-pb-md-xxl { padding-bottom: var(--kern-metric-space-default); } .kern-pl-md-xxl { padding-left: var(--kern-metric-space-default); } .kern-px-md-xxl { padding-left: var(--kern-metric-space-default); padding-right: var(--kern-metric-space-default); } .kern-py-md-xxl { padding-top: var(--kern-metric-space-default); padding-bottom: var(--kern-metric-space-default); } .kern-m-lg-xxl { margin: var(--kern-metric-space-large); } .kern-mt-lg-xxl { margin-top: var(--kern-metric-space-large); } .kern-mr-lg-xxl { margin-right: var(--kern-metric-space-large); } .kern-mb-lg-xxl { margin-bottom: var(--kern-metric-space-large); } .kern-ml-lg-xxl { margin-left: var(--kern-metric-space-large); } .kern-mx-lg-xxl { margin-left: var(--kern-metric-space-large); margin-right: var(--kern-metric-space-large); } .kern-my-lg-xxl { margin-top: var(--kern-metric-space-large); margin-bottom: var(--kern-metric-space-large); } .kern-p-lg-xxl { padding: var(--kern-metric-space-large); } .kern-pt-lg-xxl { padding-top: var(--kern-metric-space-large); } .kern-pr-lg-xxl { padding-right: var(--kern-metric-space-large); } .kern-pb-lg-xxl { padding-bottom: var(--kern-metric-space-large); } .kern-pl-lg-xxl { padding-left: var(--kern-metric-space-large); } .kern-px-lg-xxl { padding-left: var(--kern-metric-space-large); padding-right: var(--kern-metric-space-large); } .kern-py-lg-xxl { padding-top: var(--kern-metric-space-large); padding-bottom: var(--kern-metric-space-large); } .kern-m-xl-xxl { margin: var(--kern-metric-space-x-large); } .kern-mt-xl-xxl { margin-top: var(--kern-metric-space-x-large); } .kern-mr-xl-xxl { margin-right: var(--kern-metric-space-x-large); } .kern-mb-xl-xxl { margin-bottom: var(--kern-metric-space-x-large); } .kern-ml-xl-xxl { margin-left: var(--kern-metric-space-x-large); } .kern-mx-xl-xxl { margin-left: var(--kern-metric-space-x-large); margin-right: var(--kern-metric-space-x-large); } .kern-my-xl-xxl { margin-top: var(--kern-metric-space-x-large); margin-bottom: var(--kern-metric-space-x-large); } .kern-p-xl-xxl { padding: var(--kern-metric-space-x-large); } .kern-pt-xl-xxl { padding-top: var(--kern-metric-space-x-large); } .kern-pr-xl-xxl { padding-right: var(--kern-metric-space-x-large); } .kern-pb-xl-xxl { padding-bottom: var(--kern-metric-space-x-large); } .kern-pl-xl-xxl { padding-left: var(--kern-metric-space-x-large); } .kern-px-xl-xxl { padding-left: var(--kern-metric-space-x-large); padding-right: var(--kern-metric-space-x-large); } .kern-py-xl-xxl { padding-top: var(--kern-metric-space-x-large); padding-bottom: var(--kern-metric-space-x-large); } } /** * @file _flex-grid-system.scss * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team * @date 17.04.2025 * @modified 23.05.2025 * @@VERSION@@ * @brief Styles für die Flex-Grid-System. * * Diese Datei enthält die CSS-Regeln, um die Flex funktionalität mit Klassen zu steuern */ /** * Generiert ALLE Container-Eigenschaften (Flex, Grid, Gap, Justify, Align-Items). * Schema: kern-[Eigenschaft]-[Wert][-[BP]] */ /** * Generiert ALLE Item-Eigenschaften (Col/Row Span/Start, Flex Grow/Shrink, Align Self). * Schema: kern-[Eigenschaft]-[Wert][-[BP]] */ /** * Generiert zusätzliche Utility-Klassen */ .kern-stack { display: flex; flex-direction: column; gap: var(--kern-metric-space-default); } .kern-flex { display: flex; } .kern-inline-flex { display: inline-flex; } .kern-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-inline-grid { display: inline-grid; } .kern-block { display: block; } .kern-inline-block { display: inline-block; } .kern-inline { display: inline; } .kern-hidden { display: none; } .kern-flex-row { flex-direction: row; } .kern-flex-col { flex-direction: column; } .kern-flex-row-reverse { flex-direction: row-reverse; } .kern-flex-col-reverse { flex-direction: column-reverse; } .kern-flex-wrap { flex-wrap: wrap; } .kern-flex-nowrap { flex-wrap: nowrap; } .kern-flex-wrap-reverse { flex-wrap: wrap-reverse; } .kern-order-0 { order: 0; } .kern-order-1 { order: 1; } .kern-order-2 { order: 2; } .kern-order-3 { order: 3; } .kern-order-4 { order: 4; } .kern-order-5 { order: 5; } .kern-order-6 { order: 6; } .kern-order-7 { order: 7; } .kern-order-8 { order: 8; } .kern-order-9 { order: 9; } .kern-order-10 { order: 10; } .kern-order-11 { order: 11; } .kern-order-12 { order: 12; } .kern-order-first { order: -9999; } .kern-order-last { order: 9999; } .kern-justify-content-start { justify-content: flex-start; } .kern-align-content-start { align-content: flex-start; } .kern-justify-content-end { justify-content: flex-end; } .kern-align-content-end { align-content: flex-end; } .kern-justify-content-center { justify-content: center; } .kern-align-content-center { align-content: center; } .kern-justify-content-between { justify-content: space-between; } .kern-align-content-between { align-content: space-between; } .kern-justify-content-around { justify-content: space-around; } .kern-align-content-around { align-content: space-around; } .kern-justify-content-evenly { justify-content: space-evenly; } .kern-align-content-evenly { align-content: space-evenly; } .kern-align-items-start { align-items: flex-start; } .kern-align-items-end { align-items: flex-end; } .kern-align-items-center { align-items: center; } .kern-align-items-stretch { align-items: stretch; } .kern-align-items-baseline { align-items: baseline; } .kern-justify-items-start { justify-items: flex-start; } .kern-justify-items-end { justify-items: flex-end; } .kern-justify-items-center { justify-items: center; } .kern-justify-items-stretch { justify-items: stretch; } .kern-justify-items-baseline { justify-items: baseline; } .kern-place-items-start { place-items: flex-start; } .kern-place-items-end { place-items: flex-end; } .kern-place-items-center { place-items: center; } .kern-place-items-stretch { place-items: stretch; } .kern-place-items-baseline { place-items: baseline; } .kern-place-content-start { place-content: flex-start; } .kern-place-content-end { place-content: flex-end; } .kern-place-content-center { place-content: center; } .kern-place-content-between { place-content: space-between; } .kern-place-content-around { place-content: space-around; } .kern-place-content-evenly { place-content: space-evenly; } .kern-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .kern-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kern-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kern-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kern-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kern-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .kern-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .kern-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .kern-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .kern-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .kern-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .kern-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .kern-grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .kern-grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .kern-grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .kern-grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-none { grid-template-columns: none; } .kern-grid-rows-none { grid-template-rows: none; } .kern-grid-flow-row { grid-auto-flow: row; } .kern-grid-flow-col { grid-auto-flow: column; } .kern-grid-flow-dense { grid-auto-flow: dense; } .kern-grid-flow-row-dense { grid-auto-flow: row dense; } .kern-grid-flow-col-dense { grid-auto-flow: column dense; } .kern-auto-cols-auto { grid-auto-columns: auto; } .kern-auto-rows-auto { grid-auto-rows: auto; } .kern-auto-cols-min { grid-auto-columns: min-content; } .kern-auto-rows-min { grid-auto-rows: min-content; } .kern-auto-cols-max { grid-auto-columns: max-content; } .kern-auto-rows-max { grid-auto-rows: max-content; } .kern-auto-cols-fr { grid-auto-columns: minmax(0, 1fr); } .kern-auto-rows-fr { grid-auto-rows: minmax(0, 1fr); } .kern-gap-none { gap: var(--kern-metric-space-none); } .kern-gap-x-none { column-gap: var(--kern-metric-space-none); } .kern-gap-y-none { row-gap: var(--kern-metric-space-none); } .kern-gap-xxs { gap: var(--kern-metric-space-2x-small); } .kern-gap-x-xxs { column-gap: var(--kern-metric-space-2x-small); } .kern-gap-y-xxs { row-gap: var(--kern-metric-space-2x-small); } .kern-gap-xs { gap: var(--kern-metric-space-x-small); } .kern-gap-x-xs { column-gap: var(--kern-metric-space-x-small); } .kern-gap-y-xs { row-gap: var(--kern-metric-space-x-small); } .kern-gap-sm { gap: var(--kern-metric-space-small); } .kern-gap-x-sm { column-gap: var(--kern-metric-space-small); } .kern-gap-y-sm { row-gap: var(--kern-metric-space-small); } .kern-gap-md { gap: var(--kern-metric-space-default); } .kern-gap-x-md { column-gap: var(--kern-metric-space-default); } .kern-gap-y-md { row-gap: var(--kern-metric-space-default); } .kern-gap-lg { gap: var(--kern-metric-space-large); } .kern-gap-x-lg { column-gap: var(--kern-metric-space-large); } .kern-gap-y-lg { row-gap: var(--kern-metric-space-large); } .kern-gap-xl { gap: var(--kern-metric-space-x-large); } .kern-gap-x-xl { column-gap: var(--kern-metric-space-x-large); } .kern-gap-y-xl { row-gap: var(--kern-metric-space-x-large); } .kern-overflow-auto { overflow: auto; } .kern-overflow-x-auto { overflow-x: auto; } .kern-overflow-y-auto { overflow-y: auto; } .kern-overflow-hidden { overflow: hidden; } .kern-overflow-x-hidden { overflow-x: hidden; } .kern-overflow-y-hidden { overflow-y: hidden; } .kern-overflow-visible { overflow: visible; } .kern-overflow-x-visible { overflow-x: visible; } .kern-overflow-y-visible { overflow-y: visible; } .kern-overflow-scroll { overflow: scroll; } .kern-overflow-x-scroll { overflow-x: scroll; } .kern-overflow-y-scroll { overflow-y: scroll; } .kern-col-1 { grid-column: auto/span 1; } .kern-col-2 { grid-column: auto/span 2; } .kern-col-3 { grid-column: auto/span 3; } .kern-col-4 { grid-column: auto/span 4; } .kern-col-5 { grid-column: auto/span 5; } .kern-col-6 { grid-column: auto/span 6; } .kern-col-7 { grid-column: auto/span 7; } .kern-col-8 { grid-column: auto/span 8; } .kern-col-9 { grid-column: auto/span 9; } .kern-col-10 { grid-column: auto/span 10; } .kern-col-11 { grid-column: auto/span 11; } .kern-col-12 { grid-column: auto/span 12; } .kern-col-start-1 { grid-column-start: 1; } .kern-col-end-1 { grid-column-end: 1; } .kern-col-start-2 { grid-column-start: 2; } .kern-col-end-2 { grid-column-end: 2; } .kern-col-start-3 { grid-column-start: 3; } .kern-col-end-3 { grid-column-end: 3; } .kern-col-start-4 { grid-column-start: 4; } .kern-col-end-4 { grid-column-end: 4; } .kern-col-start-5 { grid-column-start: 5; } .kern-col-end-5 { grid-column-end: 5; } .kern-col-start-6 { grid-column-start: 6; } .kern-col-end-6 { grid-column-end: 6; } .kern-col-start-7 { grid-column-start: 7; } .kern-col-end-7 { grid-column-end: 7; } .kern-col-start-8 { grid-column-start: 8; } .kern-col-end-8 { grid-column-end: 8; } .kern-col-start-9 { grid-column-start: 9; } .kern-col-end-9 { grid-column-end: 9; } .kern-col-start-10 { grid-column-start: 10; } .kern-col-end-10 { grid-column-end: 10; } .kern-col-start-11 { grid-column-start: 11; } .kern-col-end-11 { grid-column-end: 11; } .kern-col-start-12 { grid-column-start: 12; } .kern-col-end-12 { grid-column-end: 12; } .kern-col-start-13 { grid-column-start: 13; } .kern-col-end-13 { grid-column-end: 13; } .kern-col-full { grid-column: 1/-1; } .kern-col-auto { grid-column: auto; } .kern-col-start-auto { grid-column-start: auto; } .kern-col-end-auto { grid-column-end: auto; } .kern-row-1 { grid-row: auto/span 1; } .kern-row-2 { grid-row: auto/span 2; } .kern-row-3 { grid-row: auto/span 3; } .kern-row-4 { grid-row: auto/span 4; } .kern-row-5 { grid-row: auto/span 5; } .kern-row-6 { grid-row: auto/span 6; } .kern-row-start-1 { grid-row-start: 1; } .kern-row-end-1 { grid-row-end: 1; } .kern-row-start-2 { grid-row-start: 2; } .kern-row-end-2 { grid-row-end: 2; } .kern-row-start-3 { grid-row-start: 3; } .kern-row-end-3 { grid-row-end: 3; } .kern-row-start-4 { grid-row-start: 4; } .kern-row-end-4 { grid-row-end: 4; } .kern-row-start-5 { grid-row-start: 5; } .kern-row-end-5 { grid-row-end: 5; } .kern-row-start-6 { grid-row-start: 6; } .kern-row-end-6 { grid-row-end: 6; } .kern-row-start-7 { grid-row-start: 7; } .kern-row-end-7 { grid-row-end: 7; } .kern-row-full { grid-row: 1/-1; } .kern-row-auto { grid-row: auto; } .kern-row-start-auto { grid-row-start: auto; } .kern-row-end-auto { grid-row-end: auto; } .kern-flex-1 { flex: 1 1 0%; } .kern-flex-auto { flex: 1 1 auto; } .kern-flex-initial { flex: 0 1 auto; } .kern-flex-none { flex: none; } .kern-flex-grow-0 { flex-grow: 0; } .kern-flex-grow-1 { flex-grow: 1; } .kern-flex-grow-2 { flex-grow: 2; } .kern-flex-grow-3 { flex-grow: 3; } .kern-flex-grow-4 { flex-grow: 4; } .kern-flex-grow-5 { flex-grow: 5; } .kern-flex-grow-6 { flex-grow: 6; } .kern-flex-grow-7 { flex-grow: 7; } .kern-flex-grow-8 { flex-grow: 8; } .kern-flex-grow-9 { flex-grow: 9; } .kern-flex-grow-10 { flex-grow: 10; } .kern-flex-grow-11 { flex-grow: 11; } .kern-flex-grow-12 { flex-grow: 12; } .kern-flex-grow { flex-grow: 1; } .kern-flex-grow-0 { flex-grow: 0; } .kern-flex-shrink { flex-shrink: 1; } .kern-flex-shrink-0 { flex-shrink: 0; } .kern-basis-auto { flex-basis: auto; } .kern-basis-0 { flex-basis: 0; } .kern-basis-full { flex-basis: 100%; } .kern-basis-1-2 { flex-basis: 50%; } .kern-basis-1-3 { flex-basis: 33.333333%; } .kern-basis-2-3 { flex-basis: 66.666667%; } .kern-basis-1-4 { flex-basis: 25%; } .kern-basis-3-4 { flex-basis: 75%; } .kern-align-self-start { align-self: flex-start; } .kern-align-self-end { align-self: flex-end; } .kern-align-self-center { align-self: center; } .kern-align-self-stretch { align-self: stretch; } .kern-align-self-baseline { align-self: baseline; } .kern-align-self-auto { align-self: auto; } .kern-justify-self-start { justify-self: flex-start; } .kern-justify-self-end { justify-self: flex-end; } .kern-justify-self-center { justify-self: center; } .kern-justify-self-stretch { justify-self: stretch; } .kern-justify-self-baseline { justify-self: baseline; } .kern-justify-self-auto { justify-self: auto; } .kern-place-self-start { place-self: flex-start; } .kern-place-self-end { place-self: flex-end; } .kern-place-self-center { place-self: center; } .kern-place-self-stretch { place-self: stretch; } .kern-place-self-baseline { place-self: baseline; } .kern-place-self-auto { place-self: auto; } .kern-aspect-square { aspect-ratio: 1/1; } .kern-aspect-video { aspect-ratio: 16/9; } .kern-aspect-auto { aspect-ratio: auto; } .kern-min-w-0 { min-width: 0; } .kern-min-w-full { min-width: 100%; } .kern-max-w-full { max-width: 100%; } .kern-max-w-none { max-width: none; } .kern-min-h-0 { min-height: 0; } .kern-min-h-full { min-height: 100%; } .kern-min-h-screen { min-height: 100vh; } .kern-max-h-full { max-height: 100%; } .kern-max-h-screen { max-height: 100vh; } .kern-w-full { width: 100%; } .kern-w-auto { width: auto; } .kern-w-screen { width: 100vw; } .kern-h-full { height: 100%; } .kern-h-auto { height: auto; } .kern-h-screen { height: 100vh; } .kern-stack-none { display: flex; flex-direction: column; gap: var(--kern-metric-space-none); } .kern-stack-xxs { display: flex; flex-direction: column; gap: var(--kern-metric-space-2x-small); } .kern-stack-xs { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-small); } .kern-stack-sm { display: flex; flex-direction: column; gap: var(--kern-metric-space-small); } .kern-stack-md { display: flex; flex-direction: column; gap: var(--kern-metric-space-default); } .kern-stack-lg { display: flex; flex-direction: column; gap: var(--kern-metric-space-large); } .kern-stack-xl { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-large); } @media (min-width: 576px) { .kern-flex-sm { display: flex; } .kern-inline-flex-sm { display: inline-flex; } .kern-grid-sm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-inline-grid-sm { display: inline-grid; } .kern-block-sm { display: block; } .kern-inline-block-sm { display: inline-block; } .kern-inline-sm { display: inline; } .kern-hidden-sm { display: none; } .kern-flex-row-sm { flex-direction: row; } .kern-flex-col-sm { flex-direction: column; } .kern-flex-row-reverse-sm { flex-direction: row-reverse; } .kern-flex-col-reverse-sm { flex-direction: column-reverse; } .kern-flex-wrap-sm { flex-wrap: wrap; } .kern-flex-nowrap-sm { flex-wrap: nowrap; } .kern-flex-wrap-reverse-sm { flex-wrap: wrap-reverse; } .kern-order-0-sm { order: 0; } .kern-order-1-sm { order: 1; } .kern-order-2-sm { order: 2; } .kern-order-3-sm { order: 3; } .kern-order-4-sm { order: 4; } .kern-order-5-sm { order: 5; } .kern-order-6-sm { order: 6; } .kern-order-7-sm { order: 7; } .kern-order-8-sm { order: 8; } .kern-order-9-sm { order: 9; } .kern-order-10-sm { order: 10; } .kern-order-11-sm { order: 11; } .kern-order-12-sm { order: 12; } .kern-order-first-sm { order: -9999; } .kern-order-last-sm { order: 9999; } .kern-justify-content-start-sm { justify-content: flex-start; } .kern-align-content-start-sm { align-content: flex-start; } .kern-justify-content-end-sm { justify-content: flex-end; } .kern-align-content-end-sm { align-content: flex-end; } .kern-justify-content-center-sm { justify-content: center; } .kern-align-content-center-sm { align-content: center; } .kern-justify-content-between-sm { justify-content: space-between; } .kern-align-content-between-sm { align-content: space-between; } .kern-justify-content-around-sm { justify-content: space-around; } .kern-align-content-around-sm { align-content: space-around; } .kern-justify-content-evenly-sm { justify-content: space-evenly; } .kern-align-content-evenly-sm { align-content: space-evenly; } .kern-align-items-start-sm { align-items: flex-start; } .kern-align-items-end-sm { align-items: flex-end; } .kern-align-items-center-sm { align-items: center; } .kern-align-items-stretch-sm { align-items: stretch; } .kern-align-items-baseline-sm { align-items: baseline; } .kern-justify-items-start-sm { justify-items: flex-start; } .kern-justify-items-end-sm { justify-items: flex-end; } .kern-justify-items-center-sm { justify-items: center; } .kern-justify-items-stretch-sm { justify-items: stretch; } .kern-justify-items-baseline-sm { justify-items: baseline; } .kern-place-items-start-sm { place-items: flex-start; } .kern-place-items-end-sm { place-items: flex-end; } .kern-place-items-center-sm { place-items: center; } .kern-place-items-stretch-sm { place-items: stretch; } .kern-place-items-baseline-sm { place-items: baseline; } .kern-place-content-start-sm { place-content: flex-start; } .kern-place-content-end-sm { place-content: flex-end; } .kern-place-content-center-sm { place-content: center; } .kern-place-content-between-sm { place-content: space-between; } .kern-place-content-around-sm { place-content: space-around; } .kern-place-content-evenly-sm { place-content: space-evenly; } .kern-grid-cols-1-sm { grid-template-columns: repeat(1, minmax(0, 1fr)); } .kern-grid-cols-2-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kern-grid-cols-3-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kern-grid-cols-4-sm { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kern-grid-cols-5-sm { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kern-grid-cols-6-sm { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-7-sm { grid-template-columns: repeat(7, minmax(0, 1fr)); } .kern-grid-cols-8-sm { grid-template-columns: repeat(8, minmax(0, 1fr)); } .kern-grid-cols-9-sm { grid-template-columns: repeat(9, minmax(0, 1fr)); } .kern-grid-cols-10-sm { grid-template-columns: repeat(10, minmax(0, 1fr)); } .kern-grid-cols-11-sm { grid-template-columns: repeat(11, minmax(0, 1fr)); } .kern-grid-cols-12-sm { grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-grid-rows-1-sm { grid-template-rows: repeat(1, minmax(0, 1fr)); } .kern-grid-rows-2-sm { grid-template-rows: repeat(2, minmax(0, 1fr)); } .kern-grid-rows-3-sm { grid-template-rows: repeat(3, minmax(0, 1fr)); } .kern-grid-rows-4-sm { grid-template-rows: repeat(4, minmax(0, 1fr)); } .kern-grid-rows-5-sm { grid-template-rows: repeat(5, minmax(0, 1fr)); } .kern-grid-rows-6-sm { grid-template-rows: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-none-sm { grid-template-columns: none; } .kern-grid-rows-none-sm { grid-template-rows: none; } .kern-grid-flow-row-sm { grid-auto-flow: row; } .kern-grid-flow-col-sm { grid-auto-flow: column; } .kern-grid-flow-dense-sm { grid-auto-flow: dense; } .kern-grid-flow-row-dense-sm { grid-auto-flow: row dense; } .kern-grid-flow-col-dense-sm { grid-auto-flow: column dense; } .kern-auto-cols-auto-sm { grid-auto-columns: auto; } .kern-auto-rows-auto-sm { grid-auto-rows: auto; } .kern-auto-cols-min-sm { grid-auto-columns: min-content; } .kern-auto-rows-min-sm { grid-auto-rows: min-content; } .kern-auto-cols-max-sm { grid-auto-columns: max-content; } .kern-auto-rows-max-sm { grid-auto-rows: max-content; } .kern-auto-cols-fr-sm { grid-auto-columns: minmax(0, 1fr); } .kern-auto-rows-fr-sm { grid-auto-rows: minmax(0, 1fr); } .kern-gap-none-sm { gap: var(--kern-metric-space-none); } .kern-gap-x-none-sm { column-gap: var(--kern-metric-space-none); } .kern-gap-y-none-sm { row-gap: var(--kern-metric-space-none); } .kern-gap-xxs-sm { gap: var(--kern-metric-space-2x-small); } .kern-gap-x-xxs-sm { column-gap: var(--kern-metric-space-2x-small); } .kern-gap-y-xxs-sm { row-gap: var(--kern-metric-space-2x-small); } .kern-gap-xs-sm { gap: var(--kern-metric-space-x-small); } .kern-gap-x-xs-sm { column-gap: var(--kern-metric-space-x-small); } .kern-gap-y-xs-sm { row-gap: var(--kern-metric-space-x-small); } .kern-gap-sm-sm { gap: var(--kern-metric-space-small); } .kern-gap-x-sm-sm { column-gap: var(--kern-metric-space-small); } .kern-gap-y-sm-sm { row-gap: var(--kern-metric-space-small); } .kern-gap-md-sm { gap: var(--kern-metric-space-default); } .kern-gap-x-md-sm { column-gap: var(--kern-metric-space-default); } .kern-gap-y-md-sm { row-gap: var(--kern-metric-space-default); } .kern-gap-lg-sm { gap: var(--kern-metric-space-large); } .kern-gap-x-lg-sm { column-gap: var(--kern-metric-space-large); } .kern-gap-y-lg-sm { row-gap: var(--kern-metric-space-large); } .kern-gap-xl-sm { gap: var(--kern-metric-space-x-large); } .kern-gap-x-xl-sm { column-gap: var(--kern-metric-space-x-large); } .kern-gap-y-xl-sm { row-gap: var(--kern-metric-space-x-large); } .kern-overflow-auto-sm { overflow: auto; } .kern-overflow-x-auto-sm { overflow-x: auto; } .kern-overflow-y-auto-sm { overflow-y: auto; } .kern-overflow-hidden-sm { overflow: hidden; } .kern-overflow-x-hidden-sm { overflow-x: hidden; } .kern-overflow-y-hidden-sm { overflow-y: hidden; } .kern-overflow-visible-sm { overflow: visible; } .kern-overflow-x-visible-sm { overflow-x: visible; } .kern-overflow-y-visible-sm { overflow-y: visible; } .kern-overflow-scroll-sm { overflow: scroll; } .kern-overflow-x-scroll-sm { overflow-x: scroll; } .kern-overflow-y-scroll-sm { overflow-y: scroll; } .kern-col-1-sm { grid-column: auto/span 1; } .kern-col-2-sm { grid-column: auto/span 2; } .kern-col-3-sm { grid-column: auto/span 3; } .kern-col-4-sm { grid-column: auto/span 4; } .kern-col-5-sm { grid-column: auto/span 5; } .kern-col-6-sm { grid-column: auto/span 6; } .kern-col-7-sm { grid-column: auto/span 7; } .kern-col-8-sm { grid-column: auto/span 8; } .kern-col-9-sm { grid-column: auto/span 9; } .kern-col-10-sm { grid-column: auto/span 10; } .kern-col-11-sm { grid-column: auto/span 11; } .kern-col-12-sm { grid-column: auto/span 12; } .kern-col-start-1-sm { grid-column-start: 1; } .kern-col-end-1-sm { grid-column-end: 1; } .kern-col-start-2-sm { grid-column-start: 2; } .kern-col-end-2-sm { grid-column-end: 2; } .kern-col-start-3-sm { grid-column-start: 3; } .kern-col-end-3-sm { grid-column-end: 3; } .kern-col-start-4-sm { grid-column-start: 4; } .kern-col-end-4-sm { grid-column-end: 4; } .kern-col-start-5-sm { grid-column-start: 5; } .kern-col-end-5-sm { grid-column-end: 5; } .kern-col-start-6-sm { grid-column-start: 6; } .kern-col-end-6-sm { grid-column-end: 6; } .kern-col-start-7-sm { grid-column-start: 7; } .kern-col-end-7-sm { grid-column-end: 7; } .kern-col-start-8-sm { grid-column-start: 8; } .kern-col-end-8-sm { grid-column-end: 8; } .kern-col-start-9-sm { grid-column-start: 9; } .kern-col-end-9-sm { grid-column-end: 9; } .kern-col-start-10-sm { grid-column-start: 10; } .kern-col-end-10-sm { grid-column-end: 10; } .kern-col-start-11-sm { grid-column-start: 11; } .kern-col-end-11-sm { grid-column-end: 11; } .kern-col-start-12-sm { grid-column-start: 12; } .kern-col-end-12-sm { grid-column-end: 12; } .kern-col-start-13-sm { grid-column-start: 13; } .kern-col-end-13-sm { grid-column-end: 13; } .kern-col-full-sm { grid-column: 1/-1; } .kern-col-auto-sm { grid-column: auto; } .kern-col-start-auto-sm { grid-column-start: auto; } .kern-col-end-auto-sm { grid-column-end: auto; } .kern-row-1-sm { grid-row: auto/span 1; } .kern-row-2-sm { grid-row: auto/span 2; } .kern-row-3-sm { grid-row: auto/span 3; } .kern-row-4-sm { grid-row: auto/span 4; } .kern-row-5-sm { grid-row: auto/span 5; } .kern-row-6-sm { grid-row: auto/span 6; } .kern-row-start-1-sm { grid-row-start: 1; } .kern-row-end-1-sm { grid-row-end: 1; } .kern-row-start-2-sm { grid-row-start: 2; } .kern-row-end-2-sm { grid-row-end: 2; } .kern-row-start-3-sm { grid-row-start: 3; } .kern-row-end-3-sm { grid-row-end: 3; } .kern-row-start-4-sm { grid-row-start: 4; } .kern-row-end-4-sm { grid-row-end: 4; } .kern-row-start-5-sm { grid-row-start: 5; } .kern-row-end-5-sm { grid-row-end: 5; } .kern-row-start-6-sm { grid-row-start: 6; } .kern-row-end-6-sm { grid-row-end: 6; } .kern-row-start-7-sm { grid-row-start: 7; } .kern-row-end-7-sm { grid-row-end: 7; } .kern-row-full-sm { grid-row: 1/-1; } .kern-row-auto-sm { grid-row: auto; } .kern-row-start-auto-sm { grid-row-start: auto; } .kern-row-end-auto-sm { grid-row-end: auto; } .kern-flex-1-sm { flex: 1 1 0%; } .kern-flex-auto-sm { flex: 1 1 auto; } .kern-flex-initial-sm { flex: 0 1 auto; } .kern-flex-none-sm { flex: none; } .kern-flex-grow-0-sm { flex-grow: 0; } .kern-flex-grow-1-sm { flex-grow: 1; } .kern-flex-grow-2-sm { flex-grow: 2; } .kern-flex-grow-3-sm { flex-grow: 3; } .kern-flex-grow-4-sm { flex-grow: 4; } .kern-flex-grow-5-sm { flex-grow: 5; } .kern-flex-grow-6-sm { flex-grow: 6; } .kern-flex-grow-7-sm { flex-grow: 7; } .kern-flex-grow-8-sm { flex-grow: 8; } .kern-flex-grow-9-sm { flex-grow: 9; } .kern-flex-grow-10-sm { flex-grow: 10; } .kern-flex-grow-11-sm { flex-grow: 11; } .kern-flex-grow-12-sm { flex-grow: 12; } .kern-flex-grow-sm { flex-grow: 1; } .kern-flex-grow-0-sm { flex-grow: 0; } .kern-flex-shrink-sm { flex-shrink: 1; } .kern-flex-shrink-0-sm { flex-shrink: 0; } .kern-basis-auto-sm { flex-basis: auto; } .kern-basis-0-sm { flex-basis: 0; } .kern-basis-full-sm { flex-basis: 100%; } .kern-basis-1-2-sm { flex-basis: 50%; } .kern-basis-1-3-sm { flex-basis: 33.333333%; } .kern-basis-2-3-sm { flex-basis: 66.666667%; } .kern-basis-1-4-sm { flex-basis: 25%; } .kern-basis-3-4-sm { flex-basis: 75%; } .kern-align-self-start-sm { align-self: flex-start; } .kern-align-self-end-sm { align-self: flex-end; } .kern-align-self-center-sm { align-self: center; } .kern-align-self-stretch-sm { align-self: stretch; } .kern-align-self-baseline-sm { align-self: baseline; } .kern-align-self-auto-sm { align-self: auto; } .kern-justify-self-start-sm { justify-self: flex-start; } .kern-justify-self-end-sm { justify-self: flex-end; } .kern-justify-self-center-sm { justify-self: center; } .kern-justify-self-stretch-sm { justify-self: stretch; } .kern-justify-self-baseline-sm { justify-self: baseline; } .kern-justify-self-auto-sm { justify-self: auto; } .kern-place-self-start-sm { place-self: flex-start; } .kern-place-self-end-sm { place-self: flex-end; } .kern-place-self-center-sm { place-self: center; } .kern-place-self-stretch-sm { place-self: stretch; } .kern-place-self-baseline-sm { place-self: baseline; } .kern-place-self-auto-sm { place-self: auto; } .kern-aspect-square-sm { aspect-ratio: 1/1; } .kern-aspect-video-sm { aspect-ratio: 16/9; } .kern-aspect-auto-sm { aspect-ratio: auto; } .kern-min-w-0-sm { min-width: 0; } .kern-min-w-full-sm { min-width: 100%; } .kern-max-w-full-sm { max-width: 100%; } .kern-max-w-none-sm { max-width: none; } .kern-min-h-0-sm { min-height: 0; } .kern-min-h-full-sm { min-height: 100%; } .kern-min-h-screen-sm { min-height: 100vh; } .kern-max-h-full-sm { max-height: 100%; } .kern-max-h-screen-sm { max-height: 100vh; } .kern-w-full-sm { width: 100%; } .kern-w-auto-sm { width: auto; } .kern-w-screen-sm { width: 100vw; } .kern-h-full-sm { height: 100%; } .kern-h-auto-sm { height: auto; } .kern-h-screen-sm { height: 100vh; } .kern-stack-none-sm { display: flex; flex-direction: column; gap: var(--kern-metric-space-none); } .kern-stack-xxs-sm { display: flex; flex-direction: column; gap: var(--kern-metric-space-2x-small); } .kern-stack-xs-sm { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-small); } .kern-stack-sm-sm { display: flex; flex-direction: column; gap: var(--kern-metric-space-small); } .kern-stack-md-sm { display: flex; flex-direction: column; gap: var(--kern-metric-space-default); } .kern-stack-lg-sm { display: flex; flex-direction: column; gap: var(--kern-metric-space-large); } .kern-stack-xl-sm { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-large); } } @media (min-width: 768px) { .kern-flex-md { display: flex; } .kern-inline-flex-md { display: inline-flex; } .kern-grid-md { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-inline-grid-md { display: inline-grid; } .kern-block-md { display: block; } .kern-inline-block-md { display: inline-block; } .kern-inline-md { display: inline; } .kern-hidden-md { display: none; } .kern-flex-row-md { flex-direction: row; } .kern-flex-col-md { flex-direction: column; } .kern-flex-row-reverse-md { flex-direction: row-reverse; } .kern-flex-col-reverse-md { flex-direction: column-reverse; } .kern-flex-wrap-md { flex-wrap: wrap; } .kern-flex-nowrap-md { flex-wrap: nowrap; } .kern-flex-wrap-reverse-md { flex-wrap: wrap-reverse; } .kern-order-0-md { order: 0; } .kern-order-1-md { order: 1; } .kern-order-2-md { order: 2; } .kern-order-3-md { order: 3; } .kern-order-4-md { order: 4; } .kern-order-5-md { order: 5; } .kern-order-6-md { order: 6; } .kern-order-7-md { order: 7; } .kern-order-8-md { order: 8; } .kern-order-9-md { order: 9; } .kern-order-10-md { order: 10; } .kern-order-11-md { order: 11; } .kern-order-12-md { order: 12; } .kern-order-first-md { order: -9999; } .kern-order-last-md { order: 9999; } .kern-justify-content-start-md { justify-content: flex-start; } .kern-align-content-start-md { align-content: flex-start; } .kern-justify-content-end-md { justify-content: flex-end; } .kern-align-content-end-md { align-content: flex-end; } .kern-justify-content-center-md { justify-content: center; } .kern-align-content-center-md { align-content: center; } .kern-justify-content-between-md { justify-content: space-between; } .kern-align-content-between-md { align-content: space-between; } .kern-justify-content-around-md { justify-content: space-around; } .kern-align-content-around-md { align-content: space-around; } .kern-justify-content-evenly-md { justify-content: space-evenly; } .kern-align-content-evenly-md { align-content: space-evenly; } .kern-align-items-start-md { align-items: flex-start; } .kern-align-items-end-md { align-items: flex-end; } .kern-align-items-center-md { align-items: center; } .kern-align-items-stretch-md { align-items: stretch; } .kern-align-items-baseline-md { align-items: baseline; } .kern-justify-items-start-md { justify-items: flex-start; } .kern-justify-items-end-md { justify-items: flex-end; } .kern-justify-items-center-md { justify-items: center; } .kern-justify-items-stretch-md { justify-items: stretch; } .kern-justify-items-baseline-md { justify-items: baseline; } .kern-place-items-start-md { place-items: flex-start; } .kern-place-items-end-md { place-items: flex-end; } .kern-place-items-center-md { place-items: center; } .kern-place-items-stretch-md { place-items: stretch; } .kern-place-items-baseline-md { place-items: baseline; } .kern-place-content-start-md { place-content: flex-start; } .kern-place-content-end-md { place-content: flex-end; } .kern-place-content-center-md { place-content: center; } .kern-place-content-between-md { place-content: space-between; } .kern-place-content-around-md { place-content: space-around; } .kern-place-content-evenly-md { place-content: space-evenly; } .kern-grid-cols-1-md { grid-template-columns: repeat(1, minmax(0, 1fr)); } .kern-grid-cols-2-md { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kern-grid-cols-3-md { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kern-grid-cols-4-md { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kern-grid-cols-5-md { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kern-grid-cols-6-md { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-7-md { grid-template-columns: repeat(7, minmax(0, 1fr)); } .kern-grid-cols-8-md { grid-template-columns: repeat(8, minmax(0, 1fr)); } .kern-grid-cols-9-md { grid-template-columns: repeat(9, minmax(0, 1fr)); } .kern-grid-cols-10-md { grid-template-columns: repeat(10, minmax(0, 1fr)); } .kern-grid-cols-11-md { grid-template-columns: repeat(11, minmax(0, 1fr)); } .kern-grid-cols-12-md { grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-grid-rows-1-md { grid-template-rows: repeat(1, minmax(0, 1fr)); } .kern-grid-rows-2-md { grid-template-rows: repeat(2, minmax(0, 1fr)); } .kern-grid-rows-3-md { grid-template-rows: repeat(3, minmax(0, 1fr)); } .kern-grid-rows-4-md { grid-template-rows: repeat(4, minmax(0, 1fr)); } .kern-grid-rows-5-md { grid-template-rows: repeat(5, minmax(0, 1fr)); } .kern-grid-rows-6-md { grid-template-rows: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-none-md { grid-template-columns: none; } .kern-grid-rows-none-md { grid-template-rows: none; } .kern-grid-flow-row-md { grid-auto-flow: row; } .kern-grid-flow-col-md { grid-auto-flow: column; } .kern-grid-flow-dense-md { grid-auto-flow: dense; } .kern-grid-flow-row-dense-md { grid-auto-flow: row dense; } .kern-grid-flow-col-dense-md { grid-auto-flow: column dense; } .kern-auto-cols-auto-md { grid-auto-columns: auto; } .kern-auto-rows-auto-md { grid-auto-rows: auto; } .kern-auto-cols-min-md { grid-auto-columns: min-content; } .kern-auto-rows-min-md { grid-auto-rows: min-content; } .kern-auto-cols-max-md { grid-auto-columns: max-content; } .kern-auto-rows-max-md { grid-auto-rows: max-content; } .kern-auto-cols-fr-md { grid-auto-columns: minmax(0, 1fr); } .kern-auto-rows-fr-md { grid-auto-rows: minmax(0, 1fr); } .kern-gap-none-md { gap: var(--kern-metric-space-none); } .kern-gap-x-none-md { column-gap: var(--kern-metric-space-none); } .kern-gap-y-none-md { row-gap: var(--kern-metric-space-none); } .kern-gap-xxs-md { gap: var(--kern-metric-space-2x-small); } .kern-gap-x-xxs-md { column-gap: var(--kern-metric-space-2x-small); } .kern-gap-y-xxs-md { row-gap: var(--kern-metric-space-2x-small); } .kern-gap-xs-md { gap: var(--kern-metric-space-x-small); } .kern-gap-x-xs-md { column-gap: var(--kern-metric-space-x-small); } .kern-gap-y-xs-md { row-gap: var(--kern-metric-space-x-small); } .kern-gap-sm-md { gap: var(--kern-metric-space-small); } .kern-gap-x-sm-md { column-gap: var(--kern-metric-space-small); } .kern-gap-y-sm-md { row-gap: var(--kern-metric-space-small); } .kern-gap-md-md { gap: var(--kern-metric-space-default); } .kern-gap-x-md-md { column-gap: var(--kern-metric-space-default); } .kern-gap-y-md-md { row-gap: var(--kern-metric-space-default); } .kern-gap-lg-md { gap: var(--kern-metric-space-large); } .kern-gap-x-lg-md { column-gap: var(--kern-metric-space-large); } .kern-gap-y-lg-md { row-gap: var(--kern-metric-space-large); } .kern-gap-xl-md { gap: var(--kern-metric-space-x-large); } .kern-gap-x-xl-md { column-gap: var(--kern-metric-space-x-large); } .kern-gap-y-xl-md { row-gap: var(--kern-metric-space-x-large); } .kern-overflow-auto-md { overflow: auto; } .kern-overflow-x-auto-md { overflow-x: auto; } .kern-overflow-y-auto-md { overflow-y: auto; } .kern-overflow-hidden-md { overflow: hidden; } .kern-overflow-x-hidden-md { overflow-x: hidden; } .kern-overflow-y-hidden-md { overflow-y: hidden; } .kern-overflow-visible-md { overflow: visible; } .kern-overflow-x-visible-md { overflow-x: visible; } .kern-overflow-y-visible-md { overflow-y: visible; } .kern-overflow-scroll-md { overflow: scroll; } .kern-overflow-x-scroll-md { overflow-x: scroll; } .kern-overflow-y-scroll-md { overflow-y: scroll; } .kern-col-1-md { grid-column: auto/span 1; } .kern-col-2-md { grid-column: auto/span 2; } .kern-col-3-md { grid-column: auto/span 3; } .kern-col-4-md { grid-column: auto/span 4; } .kern-col-5-md { grid-column: auto/span 5; } .kern-col-6-md { grid-column: auto/span 6; } .kern-col-7-md { grid-column: auto/span 7; } .kern-col-8-md { grid-column: auto/span 8; } .kern-col-9-md { grid-column: auto/span 9; } .kern-col-10-md { grid-column: auto/span 10; } .kern-col-11-md { grid-column: auto/span 11; } .kern-col-12-md { grid-column: auto/span 12; } .kern-col-start-1-md { grid-column-start: 1; } .kern-col-end-1-md { grid-column-end: 1; } .kern-col-start-2-md { grid-column-start: 2; } .kern-col-end-2-md { grid-column-end: 2; } .kern-col-start-3-md { grid-column-start: 3; } .kern-col-end-3-md { grid-column-end: 3; } .kern-col-start-4-md { grid-column-start: 4; } .kern-col-end-4-md { grid-column-end: 4; } .kern-col-start-5-md { grid-column-start: 5; } .kern-col-end-5-md { grid-column-end: 5; } .kern-col-start-6-md { grid-column-start: 6; } .kern-col-end-6-md { grid-column-end: 6; } .kern-col-start-7-md { grid-column-start: 7; } .kern-col-end-7-md { grid-column-end: 7; } .kern-col-start-8-md { grid-column-start: 8; } .kern-col-end-8-md { grid-column-end: 8; } .kern-col-start-9-md { grid-column-start: 9; } .kern-col-end-9-md { grid-column-end: 9; } .kern-col-start-10-md { grid-column-start: 10; } .kern-col-end-10-md { grid-column-end: 10; } .kern-col-start-11-md { grid-column-start: 11; } .kern-col-end-11-md { grid-column-end: 11; } .kern-col-start-12-md { grid-column-start: 12; } .kern-col-end-12-md { grid-column-end: 12; } .kern-col-start-13-md { grid-column-start: 13; } .kern-col-end-13-md { grid-column-end: 13; } .kern-col-full-md { grid-column: 1/-1; } .kern-col-auto-md { grid-column: auto; } .kern-col-start-auto-md { grid-column-start: auto; } .kern-col-end-auto-md { grid-column-end: auto; } .kern-row-1-md { grid-row: auto/span 1; } .kern-row-2-md { grid-row: auto/span 2; } .kern-row-3-md { grid-row: auto/span 3; } .kern-row-4-md { grid-row: auto/span 4; } .kern-row-5-md { grid-row: auto/span 5; } .kern-row-6-md { grid-row: auto/span 6; } .kern-row-start-1-md { grid-row-start: 1; } .kern-row-end-1-md { grid-row-end: 1; } .kern-row-start-2-md { grid-row-start: 2; } .kern-row-end-2-md { grid-row-end: 2; } .kern-row-start-3-md { grid-row-start: 3; } .kern-row-end-3-md { grid-row-end: 3; } .kern-row-start-4-md { grid-row-start: 4; } .kern-row-end-4-md { grid-row-end: 4; } .kern-row-start-5-md { grid-row-start: 5; } .kern-row-end-5-md { grid-row-end: 5; } .kern-row-start-6-md { grid-row-start: 6; } .kern-row-end-6-md { grid-row-end: 6; } .kern-row-start-7-md { grid-row-start: 7; } .kern-row-end-7-md { grid-row-end: 7; } .kern-row-full-md { grid-row: 1/-1; } .kern-row-auto-md { grid-row: auto; } .kern-row-start-auto-md { grid-row-start: auto; } .kern-row-end-auto-md { grid-row-end: auto; } .kern-flex-1-md { flex: 1 1 0%; } .kern-flex-auto-md { flex: 1 1 auto; } .kern-flex-initial-md { flex: 0 1 auto; } .kern-flex-none-md { flex: none; } .kern-flex-grow-0-md { flex-grow: 0; } .kern-flex-grow-1-md { flex-grow: 1; } .kern-flex-grow-2-md { flex-grow: 2; } .kern-flex-grow-3-md { flex-grow: 3; } .kern-flex-grow-4-md { flex-grow: 4; } .kern-flex-grow-5-md { flex-grow: 5; } .kern-flex-grow-6-md { flex-grow: 6; } .kern-flex-grow-7-md { flex-grow: 7; } .kern-flex-grow-8-md { flex-grow: 8; } .kern-flex-grow-9-md { flex-grow: 9; } .kern-flex-grow-10-md { flex-grow: 10; } .kern-flex-grow-11-md { flex-grow: 11; } .kern-flex-grow-12-md { flex-grow: 12; } .kern-flex-grow-md { flex-grow: 1; } .kern-flex-grow-0-md { flex-grow: 0; } .kern-flex-shrink-md { flex-shrink: 1; } .kern-flex-shrink-0-md { flex-shrink: 0; } .kern-basis-auto-md { flex-basis: auto; } .kern-basis-0-md { flex-basis: 0; } .kern-basis-full-md { flex-basis: 100%; } .kern-basis-1-2-md { flex-basis: 50%; } .kern-basis-1-3-md { flex-basis: 33.333333%; } .kern-basis-2-3-md { flex-basis: 66.666667%; } .kern-basis-1-4-md { flex-basis: 25%; } .kern-basis-3-4-md { flex-basis: 75%; } .kern-align-self-start-md { align-self: flex-start; } .kern-align-self-end-md { align-self: flex-end; } .kern-align-self-center-md { align-self: center; } .kern-align-self-stretch-md { align-self: stretch; } .kern-align-self-baseline-md { align-self: baseline; } .kern-align-self-auto-md { align-self: auto; } .kern-justify-self-start-md { justify-self: flex-start; } .kern-justify-self-end-md { justify-self: flex-end; } .kern-justify-self-center-md { justify-self: center; } .kern-justify-self-stretch-md { justify-self: stretch; } .kern-justify-self-baseline-md { justify-self: baseline; } .kern-justify-self-auto-md { justify-self: auto; } .kern-place-self-start-md { place-self: flex-start; } .kern-place-self-end-md { place-self: flex-end; } .kern-place-self-center-md { place-self: center; } .kern-place-self-stretch-md { place-self: stretch; } .kern-place-self-baseline-md { place-self: baseline; } .kern-place-self-auto-md { place-self: auto; } .kern-aspect-square-md { aspect-ratio: 1/1; } .kern-aspect-video-md { aspect-ratio: 16/9; } .kern-aspect-auto-md { aspect-ratio: auto; } .kern-min-w-0-md { min-width: 0; } .kern-min-w-full-md { min-width: 100%; } .kern-max-w-full-md { max-width: 100%; } .kern-max-w-none-md { max-width: none; } .kern-min-h-0-md { min-height: 0; } .kern-min-h-full-md { min-height: 100%; } .kern-min-h-screen-md { min-height: 100vh; } .kern-max-h-full-md { max-height: 100%; } .kern-max-h-screen-md { max-height: 100vh; } .kern-w-full-md { width: 100%; } .kern-w-auto-md { width: auto; } .kern-w-screen-md { width: 100vw; } .kern-h-full-md { height: 100%; } .kern-h-auto-md { height: auto; } .kern-h-screen-md { height: 100vh; } .kern-stack-none-md { display: flex; flex-direction: column; gap: var(--kern-metric-space-none); } .kern-stack-xxs-md { display: flex; flex-direction: column; gap: var(--kern-metric-space-2x-small); } .kern-stack-xs-md { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-small); } .kern-stack-sm-md { display: flex; flex-direction: column; gap: var(--kern-metric-space-small); } .kern-stack-md-md { display: flex; flex-direction: column; gap: var(--kern-metric-space-default); } .kern-stack-lg-md { display: flex; flex-direction: column; gap: var(--kern-metric-space-large); } .kern-stack-xl-md { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-large); } } @media (min-width: 992px) { .kern-flex-lg { display: flex; } .kern-inline-flex-lg { display: inline-flex; } .kern-grid-lg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-inline-grid-lg { display: inline-grid; } .kern-block-lg { display: block; } .kern-inline-block-lg { display: inline-block; } .kern-inline-lg { display: inline; } .kern-hidden-lg { display: none; } .kern-flex-row-lg { flex-direction: row; } .kern-flex-col-lg { flex-direction: column; } .kern-flex-row-reverse-lg { flex-direction: row-reverse; } .kern-flex-col-reverse-lg { flex-direction: column-reverse; } .kern-flex-wrap-lg { flex-wrap: wrap; } .kern-flex-nowrap-lg { flex-wrap: nowrap; } .kern-flex-wrap-reverse-lg { flex-wrap: wrap-reverse; } .kern-order-0-lg { order: 0; } .kern-order-1-lg { order: 1; } .kern-order-2-lg { order: 2; } .kern-order-3-lg { order: 3; } .kern-order-4-lg { order: 4; } .kern-order-5-lg { order: 5; } .kern-order-6-lg { order: 6; } .kern-order-7-lg { order: 7; } .kern-order-8-lg { order: 8; } .kern-order-9-lg { order: 9; } .kern-order-10-lg { order: 10; } .kern-order-11-lg { order: 11; } .kern-order-12-lg { order: 12; } .kern-order-first-lg { order: -9999; } .kern-order-last-lg { order: 9999; } .kern-justify-content-start-lg { justify-content: flex-start; } .kern-align-content-start-lg { align-content: flex-start; } .kern-justify-content-end-lg { justify-content: flex-end; } .kern-align-content-end-lg { align-content: flex-end; } .kern-justify-content-center-lg { justify-content: center; } .kern-align-content-center-lg { align-content: center; } .kern-justify-content-between-lg { justify-content: space-between; } .kern-align-content-between-lg { align-content: space-between; } .kern-justify-content-around-lg { justify-content: space-around; } .kern-align-content-around-lg { align-content: space-around; } .kern-justify-content-evenly-lg { justify-content: space-evenly; } .kern-align-content-evenly-lg { align-content: space-evenly; } .kern-align-items-start-lg { align-items: flex-start; } .kern-align-items-end-lg { align-items: flex-end; } .kern-align-items-center-lg { align-items: center; } .kern-align-items-stretch-lg { align-items: stretch; } .kern-align-items-baseline-lg { align-items: baseline; } .kern-justify-items-start-lg { justify-items: flex-start; } .kern-justify-items-end-lg { justify-items: flex-end; } .kern-justify-items-center-lg { justify-items: center; } .kern-justify-items-stretch-lg { justify-items: stretch; } .kern-justify-items-baseline-lg { justify-items: baseline; } .kern-place-items-start-lg { place-items: flex-start; } .kern-place-items-end-lg { place-items: flex-end; } .kern-place-items-center-lg { place-items: center; } .kern-place-items-stretch-lg { place-items: stretch; } .kern-place-items-baseline-lg { place-items: baseline; } .kern-place-content-start-lg { place-content: flex-start; } .kern-place-content-end-lg { place-content: flex-end; } .kern-place-content-center-lg { place-content: center; } .kern-place-content-between-lg { place-content: space-between; } .kern-place-content-around-lg { place-content: space-around; } .kern-place-content-evenly-lg { place-content: space-evenly; } .kern-grid-cols-1-lg { grid-template-columns: repeat(1, minmax(0, 1fr)); } .kern-grid-cols-2-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kern-grid-cols-3-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kern-grid-cols-4-lg { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kern-grid-cols-5-lg { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kern-grid-cols-6-lg { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-7-lg { grid-template-columns: repeat(7, minmax(0, 1fr)); } .kern-grid-cols-8-lg { grid-template-columns: repeat(8, minmax(0, 1fr)); } .kern-grid-cols-9-lg { grid-template-columns: repeat(9, minmax(0, 1fr)); } .kern-grid-cols-10-lg { grid-template-columns: repeat(10, minmax(0, 1fr)); } .kern-grid-cols-11-lg { grid-template-columns: repeat(11, minmax(0, 1fr)); } .kern-grid-cols-12-lg { grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-grid-rows-1-lg { grid-template-rows: repeat(1, minmax(0, 1fr)); } .kern-grid-rows-2-lg { grid-template-rows: repeat(2, minmax(0, 1fr)); } .kern-grid-rows-3-lg { grid-template-rows: repeat(3, minmax(0, 1fr)); } .kern-grid-rows-4-lg { grid-template-rows: repeat(4, minmax(0, 1fr)); } .kern-grid-rows-5-lg { grid-template-rows: repeat(5, minmax(0, 1fr)); } .kern-grid-rows-6-lg { grid-template-rows: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-none-lg { grid-template-columns: none; } .kern-grid-rows-none-lg { grid-template-rows: none; } .kern-grid-flow-row-lg { grid-auto-flow: row; } .kern-grid-flow-col-lg { grid-auto-flow: column; } .kern-grid-flow-dense-lg { grid-auto-flow: dense; } .kern-grid-flow-row-dense-lg { grid-auto-flow: row dense; } .kern-grid-flow-col-dense-lg { grid-auto-flow: column dense; } .kern-auto-cols-auto-lg { grid-auto-columns: auto; } .kern-auto-rows-auto-lg { grid-auto-rows: auto; } .kern-auto-cols-min-lg { grid-auto-columns: min-content; } .kern-auto-rows-min-lg { grid-auto-rows: min-content; } .kern-auto-cols-max-lg { grid-auto-columns: max-content; } .kern-auto-rows-max-lg { grid-auto-rows: max-content; } .kern-auto-cols-fr-lg { grid-auto-columns: minmax(0, 1fr); } .kern-auto-rows-fr-lg { grid-auto-rows: minmax(0, 1fr); } .kern-gap-none-lg { gap: var(--kern-metric-space-none); } .kern-gap-x-none-lg { column-gap: var(--kern-metric-space-none); } .kern-gap-y-none-lg { row-gap: var(--kern-metric-space-none); } .kern-gap-xxs-lg { gap: var(--kern-metric-space-2x-small); } .kern-gap-x-xxs-lg { column-gap: var(--kern-metric-space-2x-small); } .kern-gap-y-xxs-lg { row-gap: var(--kern-metric-space-2x-small); } .kern-gap-xs-lg { gap: var(--kern-metric-space-x-small); } .kern-gap-x-xs-lg { column-gap: var(--kern-metric-space-x-small); } .kern-gap-y-xs-lg { row-gap: var(--kern-metric-space-x-small); } .kern-gap-sm-lg { gap: var(--kern-metric-space-small); } .kern-gap-x-sm-lg { column-gap: var(--kern-metric-space-small); } .kern-gap-y-sm-lg { row-gap: var(--kern-metric-space-small); } .kern-gap-md-lg { gap: var(--kern-metric-space-default); } .kern-gap-x-md-lg { column-gap: var(--kern-metric-space-default); } .kern-gap-y-md-lg { row-gap: var(--kern-metric-space-default); } .kern-gap-lg-lg { gap: var(--kern-metric-space-large); } .kern-gap-x-lg-lg { column-gap: var(--kern-metric-space-large); } .kern-gap-y-lg-lg { row-gap: var(--kern-metric-space-large); } .kern-gap-xl-lg { gap: var(--kern-metric-space-x-large); } .kern-gap-x-xl-lg { column-gap: var(--kern-metric-space-x-large); } .kern-gap-y-xl-lg { row-gap: var(--kern-metric-space-x-large); } .kern-overflow-auto-lg { overflow: auto; } .kern-overflow-x-auto-lg { overflow-x: auto; } .kern-overflow-y-auto-lg { overflow-y: auto; } .kern-overflow-hidden-lg { overflow: hidden; } .kern-overflow-x-hidden-lg { overflow-x: hidden; } .kern-overflow-y-hidden-lg { overflow-y: hidden; } .kern-overflow-visible-lg { overflow: visible; } .kern-overflow-x-visible-lg { overflow-x: visible; } .kern-overflow-y-visible-lg { overflow-y: visible; } .kern-overflow-scroll-lg { overflow: scroll; } .kern-overflow-x-scroll-lg { overflow-x: scroll; } .kern-overflow-y-scroll-lg { overflow-y: scroll; } .kern-col-1-lg { grid-column: auto/span 1; } .kern-col-2-lg { grid-column: auto/span 2; } .kern-col-3-lg { grid-column: auto/span 3; } .kern-col-4-lg { grid-column: auto/span 4; } .kern-col-5-lg { grid-column: auto/span 5; } .kern-col-6-lg { grid-column: auto/span 6; } .kern-col-7-lg { grid-column: auto/span 7; } .kern-col-8-lg { grid-column: auto/span 8; } .kern-col-9-lg { grid-column: auto/span 9; } .kern-col-10-lg { grid-column: auto/span 10; } .kern-col-11-lg { grid-column: auto/span 11; } .kern-col-12-lg { grid-column: auto/span 12; } .kern-col-start-1-lg { grid-column-start: 1; } .kern-col-end-1-lg { grid-column-end: 1; } .kern-col-start-2-lg { grid-column-start: 2; } .kern-col-end-2-lg { grid-column-end: 2; } .kern-col-start-3-lg { grid-column-start: 3; } .kern-col-end-3-lg { grid-column-end: 3; } .kern-col-start-4-lg { grid-column-start: 4; } .kern-col-end-4-lg { grid-column-end: 4; } .kern-col-start-5-lg { grid-column-start: 5; } .kern-col-end-5-lg { grid-column-end: 5; } .kern-col-start-6-lg { grid-column-start: 6; } .kern-col-end-6-lg { grid-column-end: 6; } .kern-col-start-7-lg { grid-column-start: 7; } .kern-col-end-7-lg { grid-column-end: 7; } .kern-col-start-8-lg { grid-column-start: 8; } .kern-col-end-8-lg { grid-column-end: 8; } .kern-col-start-9-lg { grid-column-start: 9; } .kern-col-end-9-lg { grid-column-end: 9; } .kern-col-start-10-lg { grid-column-start: 10; } .kern-col-end-10-lg { grid-column-end: 10; } .kern-col-start-11-lg { grid-column-start: 11; } .kern-col-end-11-lg { grid-column-end: 11; } .kern-col-start-12-lg { grid-column-start: 12; } .kern-col-end-12-lg { grid-column-end: 12; } .kern-col-start-13-lg { grid-column-start: 13; } .kern-col-end-13-lg { grid-column-end: 13; } .kern-col-full-lg { grid-column: 1/-1; } .kern-col-auto-lg { grid-column: auto; } .kern-col-start-auto-lg { grid-column-start: auto; } .kern-col-end-auto-lg { grid-column-end: auto; } .kern-row-1-lg { grid-row: auto/span 1; } .kern-row-2-lg { grid-row: auto/span 2; } .kern-row-3-lg { grid-row: auto/span 3; } .kern-row-4-lg { grid-row: auto/span 4; } .kern-row-5-lg { grid-row: auto/span 5; } .kern-row-6-lg { grid-row: auto/span 6; } .kern-row-start-1-lg { grid-row-start: 1; } .kern-row-end-1-lg { grid-row-end: 1; } .kern-row-start-2-lg { grid-row-start: 2; } .kern-row-end-2-lg { grid-row-end: 2; } .kern-row-start-3-lg { grid-row-start: 3; } .kern-row-end-3-lg { grid-row-end: 3; } .kern-row-start-4-lg { grid-row-start: 4; } .kern-row-end-4-lg { grid-row-end: 4; } .kern-row-start-5-lg { grid-row-start: 5; } .kern-row-end-5-lg { grid-row-end: 5; } .kern-row-start-6-lg { grid-row-start: 6; } .kern-row-end-6-lg { grid-row-end: 6; } .kern-row-start-7-lg { grid-row-start: 7; } .kern-row-end-7-lg { grid-row-end: 7; } .kern-row-full-lg { grid-row: 1/-1; } .kern-row-auto-lg { grid-row: auto; } .kern-row-start-auto-lg { grid-row-start: auto; } .kern-row-end-auto-lg { grid-row-end: auto; } .kern-flex-1-lg { flex: 1 1 0%; } .kern-flex-auto-lg { flex: 1 1 auto; } .kern-flex-initial-lg { flex: 0 1 auto; } .kern-flex-none-lg { flex: none; } .kern-flex-grow-0-lg { flex-grow: 0; } .kern-flex-grow-1-lg { flex-grow: 1; } .kern-flex-grow-2-lg { flex-grow: 2; } .kern-flex-grow-3-lg { flex-grow: 3; } .kern-flex-grow-4-lg { flex-grow: 4; } .kern-flex-grow-5-lg { flex-grow: 5; } .kern-flex-grow-6-lg { flex-grow: 6; } .kern-flex-grow-7-lg { flex-grow: 7; } .kern-flex-grow-8-lg { flex-grow: 8; } .kern-flex-grow-9-lg { flex-grow: 9; } .kern-flex-grow-10-lg { flex-grow: 10; } .kern-flex-grow-11-lg { flex-grow: 11; } .kern-flex-grow-12-lg { flex-grow: 12; } .kern-flex-grow-lg { flex-grow: 1; } .kern-flex-grow-0-lg { flex-grow: 0; } .kern-flex-shrink-lg { flex-shrink: 1; } .kern-flex-shrink-0-lg { flex-shrink: 0; } .kern-basis-auto-lg { flex-basis: auto; } .kern-basis-0-lg { flex-basis: 0; } .kern-basis-full-lg { flex-basis: 100%; } .kern-basis-1-2-lg { flex-basis: 50%; } .kern-basis-1-3-lg { flex-basis: 33.333333%; } .kern-basis-2-3-lg { flex-basis: 66.666667%; } .kern-basis-1-4-lg { flex-basis: 25%; } .kern-basis-3-4-lg { flex-basis: 75%; } .kern-align-self-start-lg { align-self: flex-start; } .kern-align-self-end-lg { align-self: flex-end; } .kern-align-self-center-lg { align-self: center; } .kern-align-self-stretch-lg { align-self: stretch; } .kern-align-self-baseline-lg { align-self: baseline; } .kern-align-self-auto-lg { align-self: auto; } .kern-justify-self-start-lg { justify-self: flex-start; } .kern-justify-self-end-lg { justify-self: flex-end; } .kern-justify-self-center-lg { justify-self: center; } .kern-justify-self-stretch-lg { justify-self: stretch; } .kern-justify-self-baseline-lg { justify-self: baseline; } .kern-justify-self-auto-lg { justify-self: auto; } .kern-place-self-start-lg { place-self: flex-start; } .kern-place-self-end-lg { place-self: flex-end; } .kern-place-self-center-lg { place-self: center; } .kern-place-self-stretch-lg { place-self: stretch; } .kern-place-self-baseline-lg { place-self: baseline; } .kern-place-self-auto-lg { place-self: auto; } .kern-aspect-square-lg { aspect-ratio: 1/1; } .kern-aspect-video-lg { aspect-ratio: 16/9; } .kern-aspect-auto-lg { aspect-ratio: auto; } .kern-min-w-0-lg { min-width: 0; } .kern-min-w-full-lg { min-width: 100%; } .kern-max-w-full-lg { max-width: 100%; } .kern-max-w-none-lg { max-width: none; } .kern-min-h-0-lg { min-height: 0; } .kern-min-h-full-lg { min-height: 100%; } .kern-min-h-screen-lg { min-height: 100vh; } .kern-max-h-full-lg { max-height: 100%; } .kern-max-h-screen-lg { max-height: 100vh; } .kern-w-full-lg { width: 100%; } .kern-w-auto-lg { width: auto; } .kern-w-screen-lg { width: 100vw; } .kern-h-full-lg { height: 100%; } .kern-h-auto-lg { height: auto; } .kern-h-screen-lg { height: 100vh; } .kern-stack-none-lg { display: flex; flex-direction: column; gap: var(--kern-metric-space-none); } .kern-stack-xxs-lg { display: flex; flex-direction: column; gap: var(--kern-metric-space-2x-small); } .kern-stack-xs-lg { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-small); } .kern-stack-sm-lg { display: flex; flex-direction: column; gap: var(--kern-metric-space-small); } .kern-stack-md-lg { display: flex; flex-direction: column; gap: var(--kern-metric-space-default); } .kern-stack-lg-lg { display: flex; flex-direction: column; gap: var(--kern-metric-space-large); } .kern-stack-xl-lg { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-large); } } @media (min-width: 1200px) { .kern-flex-xl { display: flex; } .kern-inline-flex-xl { display: inline-flex; } .kern-grid-xl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-inline-grid-xl { display: inline-grid; } .kern-block-xl { display: block; } .kern-inline-block-xl { display: inline-block; } .kern-inline-xl { display: inline; } .kern-hidden-xl { display: none; } .kern-flex-row-xl { flex-direction: row; } .kern-flex-col-xl { flex-direction: column; } .kern-flex-row-reverse-xl { flex-direction: row-reverse; } .kern-flex-col-reverse-xl { flex-direction: column-reverse; } .kern-flex-wrap-xl { flex-wrap: wrap; } .kern-flex-nowrap-xl { flex-wrap: nowrap; } .kern-flex-wrap-reverse-xl { flex-wrap: wrap-reverse; } .kern-order-0-xl { order: 0; } .kern-order-1-xl { order: 1; } .kern-order-2-xl { order: 2; } .kern-order-3-xl { order: 3; } .kern-order-4-xl { order: 4; } .kern-order-5-xl { order: 5; } .kern-order-6-xl { order: 6; } .kern-order-7-xl { order: 7; } .kern-order-8-xl { order: 8; } .kern-order-9-xl { order: 9; } .kern-order-10-xl { order: 10; } .kern-order-11-xl { order: 11; } .kern-order-12-xl { order: 12; } .kern-order-first-xl { order: -9999; } .kern-order-last-xl { order: 9999; } .kern-justify-content-start-xl { justify-content: flex-start; } .kern-align-content-start-xl { align-content: flex-start; } .kern-justify-content-end-xl { justify-content: flex-end; } .kern-align-content-end-xl { align-content: flex-end; } .kern-justify-content-center-xl { justify-content: center; } .kern-align-content-center-xl { align-content: center; } .kern-justify-content-between-xl { justify-content: space-between; } .kern-align-content-between-xl { align-content: space-between; } .kern-justify-content-around-xl { justify-content: space-around; } .kern-align-content-around-xl { align-content: space-around; } .kern-justify-content-evenly-xl { justify-content: space-evenly; } .kern-align-content-evenly-xl { align-content: space-evenly; } .kern-align-items-start-xl { align-items: flex-start; } .kern-align-items-end-xl { align-items: flex-end; } .kern-align-items-center-xl { align-items: center; } .kern-align-items-stretch-xl { align-items: stretch; } .kern-align-items-baseline-xl { align-items: baseline; } .kern-justify-items-start-xl { justify-items: flex-start; } .kern-justify-items-end-xl { justify-items: flex-end; } .kern-justify-items-center-xl { justify-items: center; } .kern-justify-items-stretch-xl { justify-items: stretch; } .kern-justify-items-baseline-xl { justify-items: baseline; } .kern-place-items-start-xl { place-items: flex-start; } .kern-place-items-end-xl { place-items: flex-end; } .kern-place-items-center-xl { place-items: center; } .kern-place-items-stretch-xl { place-items: stretch; } .kern-place-items-baseline-xl { place-items: baseline; } .kern-place-content-start-xl { place-content: flex-start; } .kern-place-content-end-xl { place-content: flex-end; } .kern-place-content-center-xl { place-content: center; } .kern-place-content-between-xl { place-content: space-between; } .kern-place-content-around-xl { place-content: space-around; } .kern-place-content-evenly-xl { place-content: space-evenly; } .kern-grid-cols-1-xl { grid-template-columns: repeat(1, minmax(0, 1fr)); } .kern-grid-cols-2-xl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kern-grid-cols-3-xl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kern-grid-cols-4-xl { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kern-grid-cols-5-xl { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kern-grid-cols-6-xl { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-7-xl { grid-template-columns: repeat(7, minmax(0, 1fr)); } .kern-grid-cols-8-xl { grid-template-columns: repeat(8, minmax(0, 1fr)); } .kern-grid-cols-9-xl { grid-template-columns: repeat(9, minmax(0, 1fr)); } .kern-grid-cols-10-xl { grid-template-columns: repeat(10, minmax(0, 1fr)); } .kern-grid-cols-11-xl { grid-template-columns: repeat(11, minmax(0, 1fr)); } .kern-grid-cols-12-xl { grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-grid-rows-1-xl { grid-template-rows: repeat(1, minmax(0, 1fr)); } .kern-grid-rows-2-xl { grid-template-rows: repeat(2, minmax(0, 1fr)); } .kern-grid-rows-3-xl { grid-template-rows: repeat(3, minmax(0, 1fr)); } .kern-grid-rows-4-xl { grid-template-rows: repeat(4, minmax(0, 1fr)); } .kern-grid-rows-5-xl { grid-template-rows: repeat(5, minmax(0, 1fr)); } .kern-grid-rows-6-xl { grid-template-rows: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-none-xl { grid-template-columns: none; } .kern-grid-rows-none-xl { grid-template-rows: none; } .kern-grid-flow-row-xl { grid-auto-flow: row; } .kern-grid-flow-col-xl { grid-auto-flow: column; } .kern-grid-flow-dense-xl { grid-auto-flow: dense; } .kern-grid-flow-row-dense-xl { grid-auto-flow: row dense; } .kern-grid-flow-col-dense-xl { grid-auto-flow: column dense; } .kern-auto-cols-auto-xl { grid-auto-columns: auto; } .kern-auto-rows-auto-xl { grid-auto-rows: auto; } .kern-auto-cols-min-xl { grid-auto-columns: min-content; } .kern-auto-rows-min-xl { grid-auto-rows: min-content; } .kern-auto-cols-max-xl { grid-auto-columns: max-content; } .kern-auto-rows-max-xl { grid-auto-rows: max-content; } .kern-auto-cols-fr-xl { grid-auto-columns: minmax(0, 1fr); } .kern-auto-rows-fr-xl { grid-auto-rows: minmax(0, 1fr); } .kern-gap-none-xl { gap: var(--kern-metric-space-none); } .kern-gap-x-none-xl { column-gap: var(--kern-metric-space-none); } .kern-gap-y-none-xl { row-gap: var(--kern-metric-space-none); } .kern-gap-xxs-xl { gap: var(--kern-metric-space-2x-small); } .kern-gap-x-xxs-xl { column-gap: var(--kern-metric-space-2x-small); } .kern-gap-y-xxs-xl { row-gap: var(--kern-metric-space-2x-small); } .kern-gap-xs-xl { gap: var(--kern-metric-space-x-small); } .kern-gap-x-xs-xl { column-gap: var(--kern-metric-space-x-small); } .kern-gap-y-xs-xl { row-gap: var(--kern-metric-space-x-small); } .kern-gap-sm-xl { gap: var(--kern-metric-space-small); } .kern-gap-x-sm-xl { column-gap: var(--kern-metric-space-small); } .kern-gap-y-sm-xl { row-gap: var(--kern-metric-space-small); } .kern-gap-md-xl { gap: var(--kern-metric-space-default); } .kern-gap-x-md-xl { column-gap: var(--kern-metric-space-default); } .kern-gap-y-md-xl { row-gap: var(--kern-metric-space-default); } .kern-gap-lg-xl { gap: var(--kern-metric-space-large); } .kern-gap-x-lg-xl { column-gap: var(--kern-metric-space-large); } .kern-gap-y-lg-xl { row-gap: var(--kern-metric-space-large); } .kern-gap-xl-xl { gap: var(--kern-metric-space-x-large); } .kern-gap-x-xl-xl { column-gap: var(--kern-metric-space-x-large); } .kern-gap-y-xl-xl { row-gap: var(--kern-metric-space-x-large); } .kern-overflow-auto-xl { overflow: auto; } .kern-overflow-x-auto-xl { overflow-x: auto; } .kern-overflow-y-auto-xl { overflow-y: auto; } .kern-overflow-hidden-xl { overflow: hidden; } .kern-overflow-x-hidden-xl { overflow-x: hidden; } .kern-overflow-y-hidden-xl { overflow-y: hidden; } .kern-overflow-visible-xl { overflow: visible; } .kern-overflow-x-visible-xl { overflow-x: visible; } .kern-overflow-y-visible-xl { overflow-y: visible; } .kern-overflow-scroll-xl { overflow: scroll; } .kern-overflow-x-scroll-xl { overflow-x: scroll; } .kern-overflow-y-scroll-xl { overflow-y: scroll; } .kern-col-1-xl { grid-column: auto/span 1; } .kern-col-2-xl { grid-column: auto/span 2; } .kern-col-3-xl { grid-column: auto/span 3; } .kern-col-4-xl { grid-column: auto/span 4; } .kern-col-5-xl { grid-column: auto/span 5; } .kern-col-6-xl { grid-column: auto/span 6; } .kern-col-7-xl { grid-column: auto/span 7; } .kern-col-8-xl { grid-column: auto/span 8; } .kern-col-9-xl { grid-column: auto/span 9; } .kern-col-10-xl { grid-column: auto/span 10; } .kern-col-11-xl { grid-column: auto/span 11; } .kern-col-12-xl { grid-column: auto/span 12; } .kern-col-start-1-xl { grid-column-start: 1; } .kern-col-end-1-xl { grid-column-end: 1; } .kern-col-start-2-xl { grid-column-start: 2; } .kern-col-end-2-xl { grid-column-end: 2; } .kern-col-start-3-xl { grid-column-start: 3; } .kern-col-end-3-xl { grid-column-end: 3; } .kern-col-start-4-xl { grid-column-start: 4; } .kern-col-end-4-xl { grid-column-end: 4; } .kern-col-start-5-xl { grid-column-start: 5; } .kern-col-end-5-xl { grid-column-end: 5; } .kern-col-start-6-xl { grid-column-start: 6; } .kern-col-end-6-xl { grid-column-end: 6; } .kern-col-start-7-xl { grid-column-start: 7; } .kern-col-end-7-xl { grid-column-end: 7; } .kern-col-start-8-xl { grid-column-start: 8; } .kern-col-end-8-xl { grid-column-end: 8; } .kern-col-start-9-xl { grid-column-start: 9; } .kern-col-end-9-xl { grid-column-end: 9; } .kern-col-start-10-xl { grid-column-start: 10; } .kern-col-end-10-xl { grid-column-end: 10; } .kern-col-start-11-xl { grid-column-start: 11; } .kern-col-end-11-xl { grid-column-end: 11; } .kern-col-start-12-xl { grid-column-start: 12; } .kern-col-end-12-xl { grid-column-end: 12; } .kern-col-start-13-xl { grid-column-start: 13; } .kern-col-end-13-xl { grid-column-end: 13; } .kern-col-full-xl { grid-column: 1/-1; } .kern-col-auto-xl { grid-column: auto; } .kern-col-start-auto-xl { grid-column-start: auto; } .kern-col-end-auto-xl { grid-column-end: auto; } .kern-row-1-xl { grid-row: auto/span 1; } .kern-row-2-xl { grid-row: auto/span 2; } .kern-row-3-xl { grid-row: auto/span 3; } .kern-row-4-xl { grid-row: auto/span 4; } .kern-row-5-xl { grid-row: auto/span 5; } .kern-row-6-xl { grid-row: auto/span 6; } .kern-row-start-1-xl { grid-row-start: 1; } .kern-row-end-1-xl { grid-row-end: 1; } .kern-row-start-2-xl { grid-row-start: 2; } .kern-row-end-2-xl { grid-row-end: 2; } .kern-row-start-3-xl { grid-row-start: 3; } .kern-row-end-3-xl { grid-row-end: 3; } .kern-row-start-4-xl { grid-row-start: 4; } .kern-row-end-4-xl { grid-row-end: 4; } .kern-row-start-5-xl { grid-row-start: 5; } .kern-row-end-5-xl { grid-row-end: 5; } .kern-row-start-6-xl { grid-row-start: 6; } .kern-row-end-6-xl { grid-row-end: 6; } .kern-row-start-7-xl { grid-row-start: 7; } .kern-row-end-7-xl { grid-row-end: 7; } .kern-row-full-xl { grid-row: 1/-1; } .kern-row-auto-xl { grid-row: auto; } .kern-row-start-auto-xl { grid-row-start: auto; } .kern-row-end-auto-xl { grid-row-end: auto; } .kern-flex-1-xl { flex: 1 1 0%; } .kern-flex-auto-xl { flex: 1 1 auto; } .kern-flex-initial-xl { flex: 0 1 auto; } .kern-flex-none-xl { flex: none; } .kern-flex-grow-0-xl { flex-grow: 0; } .kern-flex-grow-1-xl { flex-grow: 1; } .kern-flex-grow-2-xl { flex-grow: 2; } .kern-flex-grow-3-xl { flex-grow: 3; } .kern-flex-grow-4-xl { flex-grow: 4; } .kern-flex-grow-5-xl { flex-grow: 5; } .kern-flex-grow-6-xl { flex-grow: 6; } .kern-flex-grow-7-xl { flex-grow: 7; } .kern-flex-grow-8-xl { flex-grow: 8; } .kern-flex-grow-9-xl { flex-grow: 9; } .kern-flex-grow-10-xl { flex-grow: 10; } .kern-flex-grow-11-xl { flex-grow: 11; } .kern-flex-grow-12-xl { flex-grow: 12; } .kern-flex-grow-xl { flex-grow: 1; } .kern-flex-grow-0-xl { flex-grow: 0; } .kern-flex-shrink-xl { flex-shrink: 1; } .kern-flex-shrink-0-xl { flex-shrink: 0; } .kern-basis-auto-xl { flex-basis: auto; } .kern-basis-0-xl { flex-basis: 0; } .kern-basis-full-xl { flex-basis: 100%; } .kern-basis-1-2-xl { flex-basis: 50%; } .kern-basis-1-3-xl { flex-basis: 33.333333%; } .kern-basis-2-3-xl { flex-basis: 66.666667%; } .kern-basis-1-4-xl { flex-basis: 25%; } .kern-basis-3-4-xl { flex-basis: 75%; } .kern-align-self-start-xl { align-self: flex-start; } .kern-align-self-end-xl { align-self: flex-end; } .kern-align-self-center-xl { align-self: center; } .kern-align-self-stretch-xl { align-self: stretch; } .kern-align-self-baseline-xl { align-self: baseline; } .kern-align-self-auto-xl { align-self: auto; } .kern-justify-self-start-xl { justify-self: flex-start; } .kern-justify-self-end-xl { justify-self: flex-end; } .kern-justify-self-center-xl { justify-self: center; } .kern-justify-self-stretch-xl { justify-self: stretch; } .kern-justify-self-baseline-xl { justify-self: baseline; } .kern-justify-self-auto-xl { justify-self: auto; } .kern-place-self-start-xl { place-self: flex-start; } .kern-place-self-end-xl { place-self: flex-end; } .kern-place-self-center-xl { place-self: center; } .kern-place-self-stretch-xl { place-self: stretch; } .kern-place-self-baseline-xl { place-self: baseline; } .kern-place-self-auto-xl { place-self: auto; } .kern-aspect-square-xl { aspect-ratio: 1/1; } .kern-aspect-video-xl { aspect-ratio: 16/9; } .kern-aspect-auto-xl { aspect-ratio: auto; } .kern-min-w-0-xl { min-width: 0; } .kern-min-w-full-xl { min-width: 100%; } .kern-max-w-full-xl { max-width: 100%; } .kern-max-w-none-xl { max-width: none; } .kern-min-h-0-xl { min-height: 0; } .kern-min-h-full-xl { min-height: 100%; } .kern-min-h-screen-xl { min-height: 100vh; } .kern-max-h-full-xl { max-height: 100%; } .kern-max-h-screen-xl { max-height: 100vh; } .kern-w-full-xl { width: 100%; } .kern-w-auto-xl { width: auto; } .kern-w-screen-xl { width: 100vw; } .kern-h-full-xl { height: 100%; } .kern-h-auto-xl { height: auto; } .kern-h-screen-xl { height: 100vh; } .kern-stack-none-xl { display: flex; flex-direction: column; gap: var(--kern-metric-space-none); } .kern-stack-xxs-xl { display: flex; flex-direction: column; gap: var(--kern-metric-space-2x-small); } .kern-stack-xs-xl { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-small); } .kern-stack-sm-xl { display: flex; flex-direction: column; gap: var(--kern-metric-space-small); } .kern-stack-md-xl { display: flex; flex-direction: column; gap: var(--kern-metric-space-default); } .kern-stack-lg-xl { display: flex; flex-direction: column; gap: var(--kern-metric-space-large); } .kern-stack-xl-xl { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-large); } } @media (min-width: 1600px) { .kern-flex-xxl { display: flex; } .kern-inline-flex-xxl { display: inline-flex; } .kern-grid-xxl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-inline-grid-xxl { display: inline-grid; } .kern-block-xxl { display: block; } .kern-inline-block-xxl { display: inline-block; } .kern-inline-xxl { display: inline; } .kern-hidden-xxl { display: none; } .kern-flex-row-xxl { flex-direction: row; } .kern-flex-col-xxl { flex-direction: column; } .kern-flex-row-reverse-xxl { flex-direction: row-reverse; } .kern-flex-col-reverse-xxl { flex-direction: column-reverse; } .kern-flex-wrap-xxl { flex-wrap: wrap; } .kern-flex-nowrap-xxl { flex-wrap: nowrap; } .kern-flex-wrap-reverse-xxl { flex-wrap: wrap-reverse; } .kern-order-0-xxl { order: 0; } .kern-order-1-xxl { order: 1; } .kern-order-2-xxl { order: 2; } .kern-order-3-xxl { order: 3; } .kern-order-4-xxl { order: 4; } .kern-order-5-xxl { order: 5; } .kern-order-6-xxl { order: 6; } .kern-order-7-xxl { order: 7; } .kern-order-8-xxl { order: 8; } .kern-order-9-xxl { order: 9; } .kern-order-10-xxl { order: 10; } .kern-order-11-xxl { order: 11; } .kern-order-12-xxl { order: 12; } .kern-order-first-xxl { order: -9999; } .kern-order-last-xxl { order: 9999; } .kern-justify-content-start-xxl { justify-content: flex-start; } .kern-align-content-start-xxl { align-content: flex-start; } .kern-justify-content-end-xxl { justify-content: flex-end; } .kern-align-content-end-xxl { align-content: flex-end; } .kern-justify-content-center-xxl { justify-content: center; } .kern-align-content-center-xxl { align-content: center; } .kern-justify-content-between-xxl { justify-content: space-between; } .kern-align-content-between-xxl { align-content: space-between; } .kern-justify-content-around-xxl { justify-content: space-around; } .kern-align-content-around-xxl { align-content: space-around; } .kern-justify-content-evenly-xxl { justify-content: space-evenly; } .kern-align-content-evenly-xxl { align-content: space-evenly; } .kern-align-items-start-xxl { align-items: flex-start; } .kern-align-items-end-xxl { align-items: flex-end; } .kern-align-items-center-xxl { align-items: center; } .kern-align-items-stretch-xxl { align-items: stretch; } .kern-align-items-baseline-xxl { align-items: baseline; } .kern-justify-items-start-xxl { justify-items: flex-start; } .kern-justify-items-end-xxl { justify-items: flex-end; } .kern-justify-items-center-xxl { justify-items: center; } .kern-justify-items-stretch-xxl { justify-items: stretch; } .kern-justify-items-baseline-xxl { justify-items: baseline; } .kern-place-items-start-xxl { place-items: flex-start; } .kern-place-items-end-xxl { place-items: flex-end; } .kern-place-items-center-xxl { place-items: center; } .kern-place-items-stretch-xxl { place-items: stretch; } .kern-place-items-baseline-xxl { place-items: baseline; } .kern-place-content-start-xxl { place-content: flex-start; } .kern-place-content-end-xxl { place-content: flex-end; } .kern-place-content-center-xxl { place-content: center; } .kern-place-content-between-xxl { place-content: space-between; } .kern-place-content-around-xxl { place-content: space-around; } .kern-place-content-evenly-xxl { place-content: space-evenly; } .kern-grid-cols-1-xxl { grid-template-columns: repeat(1, minmax(0, 1fr)); } .kern-grid-cols-2-xxl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kern-grid-cols-3-xxl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kern-grid-cols-4-xxl { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kern-grid-cols-5-xxl { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kern-grid-cols-6-xxl { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-7-xxl { grid-template-columns: repeat(7, minmax(0, 1fr)); } .kern-grid-cols-8-xxl { grid-template-columns: repeat(8, minmax(0, 1fr)); } .kern-grid-cols-9-xxl { grid-template-columns: repeat(9, minmax(0, 1fr)); } .kern-grid-cols-10-xxl { grid-template-columns: repeat(10, minmax(0, 1fr)); } .kern-grid-cols-11-xxl { grid-template-columns: repeat(11, minmax(0, 1fr)); } .kern-grid-cols-12-xxl { grid-template-columns: repeat(12, minmax(0, 1fr)); } .kern-grid-rows-1-xxl { grid-template-rows: repeat(1, minmax(0, 1fr)); } .kern-grid-rows-2-xxl { grid-template-rows: repeat(2, minmax(0, 1fr)); } .kern-grid-rows-3-xxl { grid-template-rows: repeat(3, minmax(0, 1fr)); } .kern-grid-rows-4-xxl { grid-template-rows: repeat(4, minmax(0, 1fr)); } .kern-grid-rows-5-xxl { grid-template-rows: repeat(5, minmax(0, 1fr)); } .kern-grid-rows-6-xxl { grid-template-rows: repeat(6, minmax(0, 1fr)); } .kern-grid-cols-none-xxl { grid-template-columns: none; } .kern-grid-rows-none-xxl { grid-template-rows: none; } .kern-grid-flow-row-xxl { grid-auto-flow: row; } .kern-grid-flow-col-xxl { grid-auto-flow: column; } .kern-grid-flow-dense-xxl { grid-auto-flow: dense; } .kern-grid-flow-row-dense-xxl { grid-auto-flow: row dense; } .kern-grid-flow-col-dense-xxl { grid-auto-flow: column dense; } .kern-auto-cols-auto-xxl { grid-auto-columns: auto; } .kern-auto-rows-auto-xxl { grid-auto-rows: auto; } .kern-auto-cols-min-xxl { grid-auto-columns: min-content; } .kern-auto-rows-min-xxl { grid-auto-rows: min-content; } .kern-auto-cols-max-xxl { grid-auto-columns: max-content; } .kern-auto-rows-max-xxl { grid-auto-rows: max-content; } .kern-auto-cols-fr-xxl { grid-auto-columns: minmax(0, 1fr); } .kern-auto-rows-fr-xxl { grid-auto-rows: minmax(0, 1fr); } .kern-gap-none-xxl { gap: var(--kern-metric-space-none); } .kern-gap-x-none-xxl { column-gap: var(--kern-metric-space-none); } .kern-gap-y-none-xxl { row-gap: var(--kern-metric-space-none); } .kern-gap-xxs-xxl { gap: var(--kern-metric-space-2x-small); } .kern-gap-x-xxs-xxl { column-gap: var(--kern-metric-space-2x-small); } .kern-gap-y-xxs-xxl { row-gap: var(--kern-metric-space-2x-small); } .kern-gap-xs-xxl { gap: var(--kern-metric-space-x-small); } .kern-gap-x-xs-xxl { column-gap: var(--kern-metric-space-x-small); } .kern-gap-y-xs-xxl { row-gap: var(--kern-metric-space-x-small); } .kern-gap-sm-xxl { gap: var(--kern-metric-space-small); } .kern-gap-x-sm-xxl { column-gap: var(--kern-metric-space-small); } .kern-gap-y-sm-xxl { row-gap: var(--kern-metric-space-small); } .kern-gap-md-xxl { gap: var(--kern-metric-space-default); } .kern-gap-x-md-xxl { column-gap: var(--kern-metric-space-default); } .kern-gap-y-md-xxl { row-gap: var(--kern-metric-space-default); } .kern-gap-lg-xxl { gap: var(--kern-metric-space-large); } .kern-gap-x-lg-xxl { column-gap: var(--kern-metric-space-large); } .kern-gap-y-lg-xxl { row-gap: var(--kern-metric-space-large); } .kern-gap-xl-xxl { gap: var(--kern-metric-space-x-large); } .kern-gap-x-xl-xxl { column-gap: var(--kern-metric-space-x-large); } .kern-gap-y-xl-xxl { row-gap: var(--kern-metric-space-x-large); } .kern-overflow-auto-xxl { overflow: auto; } .kern-overflow-x-auto-xxl { overflow-x: auto; } .kern-overflow-y-auto-xxl { overflow-y: auto; } .kern-overflow-hidden-xxl { overflow: hidden; } .kern-overflow-x-hidden-xxl { overflow-x: hidden; } .kern-overflow-y-hidden-xxl { overflow-y: hidden; } .kern-overflow-visible-xxl { overflow: visible; } .kern-overflow-x-visible-xxl { overflow-x: visible; } .kern-overflow-y-visible-xxl { overflow-y: visible; } .kern-overflow-scroll-xxl { overflow: scroll; } .kern-overflow-x-scroll-xxl { overflow-x: scroll; } .kern-overflow-y-scroll-xxl { overflow-y: scroll; } .kern-col-1-xxl { grid-column: auto/span 1; } .kern-col-2-xxl { grid-column: auto/span 2; } .kern-col-3-xxl { grid-column: auto/span 3; } .kern-col-4-xxl { grid-column: auto/span 4; } .kern-col-5-xxl { grid-column: auto/span 5; } .kern-col-6-xxl { grid-column: auto/span 6; } .kern-col-7-xxl { grid-column: auto/span 7; } .kern-col-8-xxl { grid-column: auto/span 8; } .kern-col-9-xxl { grid-column: auto/span 9; } .kern-col-10-xxl { grid-column: auto/span 10; } .kern-col-11-xxl { grid-column: auto/span 11; } .kern-col-12-xxl { grid-column: auto/span 12; } .kern-col-start-1-xxl { grid-column-start: 1; } .kern-col-end-1-xxl { grid-column-end: 1; } .kern-col-start-2-xxl { grid-column-start: 2; } .kern-col-end-2-xxl { grid-column-end: 2; } .kern-col-start-3-xxl { grid-column-start: 3; } .kern-col-end-3-xxl { grid-column-end: 3; } .kern-col-start-4-xxl { grid-column-start: 4; } .kern-col-end-4-xxl { grid-column-end: 4; } .kern-col-start-5-xxl { grid-column-start: 5; } .kern-col-end-5-xxl { grid-column-end: 5; } .kern-col-start-6-xxl { grid-column-start: 6; } .kern-col-end-6-xxl { grid-column-end: 6; } .kern-col-start-7-xxl { grid-column-start: 7; } .kern-col-end-7-xxl { grid-column-end: 7; } .kern-col-start-8-xxl { grid-column-start: 8; } .kern-col-end-8-xxl { grid-column-end: 8; } .kern-col-start-9-xxl { grid-column-start: 9; } .kern-col-end-9-xxl { grid-column-end: 9; } .kern-col-start-10-xxl { grid-column-start: 10; } .kern-col-end-10-xxl { grid-column-end: 10; } .kern-col-start-11-xxl { grid-column-start: 11; } .kern-col-end-11-xxl { grid-column-end: 11; } .kern-col-start-12-xxl { grid-column-start: 12; } .kern-col-end-12-xxl { grid-column-end: 12; } .kern-col-start-13-xxl { grid-column-start: 13; } .kern-col-end-13-xxl { grid-column-end: 13; } .kern-col-full-xxl { grid-column: 1/-1; } .kern-col-auto-xxl { grid-column: auto; } .kern-col-start-auto-xxl { grid-column-start: auto; } .kern-col-end-auto-xxl { grid-column-end: auto; } .kern-row-1-xxl { grid-row: auto/span 1; } .kern-row-2-xxl { grid-row: auto/span 2; } .kern-row-3-xxl { grid-row: auto/span 3; } .kern-row-4-xxl { grid-row: auto/span 4; } .kern-row-5-xxl { grid-row: auto/span 5; } .kern-row-6-xxl { grid-row: auto/span 6; } .kern-row-start-1-xxl { grid-row-start: 1; } .kern-row-end-1-xxl { grid-row-end: 1; } .kern-row-start-2-xxl { grid-row-start: 2; } .kern-row-end-2-xxl { grid-row-end: 2; } .kern-row-start-3-xxl { grid-row-start: 3; } .kern-row-end-3-xxl { grid-row-end: 3; } .kern-row-start-4-xxl { grid-row-start: 4; } .kern-row-end-4-xxl { grid-row-end: 4; } .kern-row-start-5-xxl { grid-row-start: 5; } .kern-row-end-5-xxl { grid-row-end: 5; } .kern-row-start-6-xxl { grid-row-start: 6; } .kern-row-end-6-xxl { grid-row-end: 6; } .kern-row-start-7-xxl { grid-row-start: 7; } .kern-row-end-7-xxl { grid-row-end: 7; } .kern-row-full-xxl { grid-row: 1/-1; } .kern-row-auto-xxl { grid-row: auto; } .kern-row-start-auto-xxl { grid-row-start: auto; } .kern-row-end-auto-xxl { grid-row-end: auto; } .kern-flex-1-xxl { flex: 1 1 0%; } .kern-flex-auto-xxl { flex: 1 1 auto; } .kern-flex-initial-xxl { flex: 0 1 auto; } .kern-flex-none-xxl { flex: none; } .kern-flex-grow-0-xxl { flex-grow: 0; } .kern-flex-grow-1-xxl { flex-grow: 1; } .kern-flex-grow-2-xxl { flex-grow: 2; } .kern-flex-grow-3-xxl { flex-grow: 3; } .kern-flex-grow-4-xxl { flex-grow: 4; } .kern-flex-grow-5-xxl { flex-grow: 5; } .kern-flex-grow-6-xxl { flex-grow: 6; } .kern-flex-grow-7-xxl { flex-grow: 7; } .kern-flex-grow-8-xxl { flex-grow: 8; } .kern-flex-grow-9-xxl { flex-grow: 9; } .kern-flex-grow-10-xxl { flex-grow: 10; } .kern-flex-grow-11-xxl { flex-grow: 11; } .kern-flex-grow-12-xxl { flex-grow: 12; } .kern-flex-grow-xxl { flex-grow: 1; } .kern-flex-grow-0-xxl { flex-grow: 0; } .kern-flex-shrink-xxl { flex-shrink: 1; } .kern-flex-shrink-0-xxl { flex-shrink: 0; } .kern-basis-auto-xxl { flex-basis: auto; } .kern-basis-0-xxl { flex-basis: 0; } .kern-basis-full-xxl { flex-basis: 100%; } .kern-basis-1-2-xxl { flex-basis: 50%; } .kern-basis-1-3-xxl { flex-basis: 33.333333%; } .kern-basis-2-3-xxl { flex-basis: 66.666667%; } .kern-basis-1-4-xxl { flex-basis: 25%; } .kern-basis-3-4-xxl { flex-basis: 75%; } .kern-align-self-start-xxl { align-self: flex-start; } .kern-align-self-end-xxl { align-self: flex-end; } .kern-align-self-center-xxl { align-self: center; } .kern-align-self-stretch-xxl { align-self: stretch; } .kern-align-self-baseline-xxl { align-self: baseline; } .kern-align-self-auto-xxl { align-self: auto; } .kern-justify-self-start-xxl { justify-self: flex-start; } .kern-justify-self-end-xxl { justify-self: flex-end; } .kern-justify-self-center-xxl { justify-self: center; } .kern-justify-self-stretch-xxl { justify-self: stretch; } .kern-justify-self-baseline-xxl { justify-self: baseline; } .kern-justify-self-auto-xxl { justify-self: auto; } .kern-place-self-start-xxl { place-self: flex-start; } .kern-place-self-end-xxl { place-self: flex-end; } .kern-place-self-center-xxl { place-self: center; } .kern-place-self-stretch-xxl { place-self: stretch; } .kern-place-self-baseline-xxl { place-self: baseline; } .kern-place-self-auto-xxl { place-self: auto; } .kern-aspect-square-xxl { aspect-ratio: 1/1; } .kern-aspect-video-xxl { aspect-ratio: 16/9; } .kern-aspect-auto-xxl { aspect-ratio: auto; } .kern-min-w-0-xxl { min-width: 0; } .kern-min-w-full-xxl { min-width: 100%; } .kern-max-w-full-xxl { max-width: 100%; } .kern-max-w-none-xxl { max-width: none; } .kern-min-h-0-xxl { min-height: 0; } .kern-min-h-full-xxl { min-height: 100%; } .kern-min-h-screen-xxl { min-height: 100vh; } .kern-max-h-full-xxl { max-height: 100%; } .kern-max-h-screen-xxl { max-height: 100vh; } .kern-w-full-xxl { width: 100%; } .kern-w-auto-xxl { width: auto; } .kern-w-screen-xxl { width: 100vw; } .kern-h-full-xxl { height: 100%; } .kern-h-auto-xxl { height: auto; } .kern-h-screen-xxl { height: 100vh; } .kern-stack-none-xxl { display: flex; flex-direction: column; gap: var(--kern-metric-space-none); } .kern-stack-xxs-xxl { display: flex; flex-direction: column; gap: var(--kern-metric-space-2x-small); } .kern-stack-xs-xxl { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-small); } .kern-stack-sm-xxl { display: flex; flex-direction: column; gap: var(--kern-metric-space-small); } .kern-stack-md-xxl { display: flex; flex-direction: column; gap: var(--kern-metric-space-default); } .kern-stack-lg-xxl { display: flex; flex-direction: column; gap: var(--kern-metric-space-large); } .kern-stack-xl-xxl { display: flex; flex-direction: column; gap: var(--kern-metric-space-x-large); } } .kern-container-fluid:has(.kern-grid), .kern-container:has(.kern-grid) { padding: 0; }