@public-ui/theme-default 4.1.1-rc.1 → 4.1.1-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/assets/kolicons/kolicons.eot +0 -0
  2. package/assets/kolicons/kolicons.json +1 -0
  3. package/assets/kolicons/kolicons.svg +4 -1
  4. package/assets/kolicons/kolicons.ttf +0 -0
  5. package/assets/kolicons/kolicons.woff +0 -0
  6. package/assets/kolicons/kolicons.woff2 +0 -0
  7. package/assets/kolicons/style.css +8 -7
  8. package/dist/index.cjs +3 -3
  9. package/dist/index.mjs +3 -3
  10. package/package.json +10 -10
package/assets/kolicons/kolicons.eot CHANGED
Binary file
package/assets/kolicons/kolicons.json CHANGED
@@ -24,5 +24,6 @@
24
24
  "sort-asc": ["M0.000 5.000 L 0.000 10.000 15.000 10.000 L 30.000 10.000 30.000 5.000 L 30.000 0.000 15.000 0.000 L 0.000 0.000 0.000 5.000 M0.000 35.000 L 0.000 40.000 25.000 40.000 L 50.000 40.000 50.000 35.000 L 50.000 30.000 25.000 30.000 L 0.000 30.000 0.000 35.000 M0.000 65.000 L 0.000 70.000 35.000 70.000 L 70.000 70.000 70.000 65.000 L 70.000 60.000 35.000 60.000 L 0.000 60.000 0.000 65.000 M0.000 95.000 L 0.000 100.000 45.000 100.000 L 90.000 100.000 90.000 95.000 L 90.000 90.000 45.000 90.000 L 0.000 90.000 0.000 95.000 "],
25
25
  "sort-desc": ["M0.000 5.000 L 0.000 10.000 45.000 10.000 L 90.000 10.000 90.000 5.000 L 90.000 0.000 45.000 0.000 L 0.000 0.000 0.000 5.000 M0.000 35.000 L 0.000 40.000 35.000 40.000 L 70.000 40.000 70.000 35.000 L 70.000 30.000 35.000 30.000 L 0.000 30.000 0.000 35.000 M0.000 65.000 L 0.000 70.000 25.000 70.000 L 50.000 70.000 50.000 65.000 L 50.000 60.000 25.000 60.000 L 0.000 60.000 0.000 65.000 M0.000 95.000 L 0.000 100.000 15.000 100.000 L 30.000 100.000 30.000 95.000 L 30.000 90.000 15.000 90.000 L 0.000 90.000 0.000 95.000 "],
26
26
  "sort-neutral": ["M0.000 5.000 L 0.000 10.000 35.000 10.000 L 70.000 10.000 70.000 5.000 L 70.000 0.000 35.000 0.000 L 0.000 0.000 0.000 5.000 M0.000 35.000 L 0.000 40.000 15.000 40.000 L 30.000 40.000 30.000 35.000 L 30.000 30.000 15.000 30.000 L 0.000 30.000 0.000 35.000 M0.000 65.000 L 0.000 70.000 45.000 70.000 L 90.000 70.000 90.000 65.000 L 90.000 60.000 45.000 60.000 L 0.000 60.000 0.000 65.000 M0.000 95.000 L 0.000 100.000 25.000 100.000 L 50.000 100.000 50.000 95.000 L 50.000 90.000 25.000 90.000 L 0.000 90.000 0.000 95.000 "],
27
+ "up": ["M39.917 38.000 L 29.918 48.000 38.459 48.000 L 47.000 48.000 47.000 61.500 L 47.000 75.000 50.000 75.000 L 53.000 75.000 53.000 61.500 L 53.000 48.000 61.541 48.000 L 70.082 48.000 60.083 38.000 C 54.584 32.500,50.046 28.000,50.000 28.000 C 49.954 28.000,45.416 32.500,39.917 38.000 M5.000 75.000 L 5.000 100.000 50.000 100.000 L 95.000 100.000 95.000 75.000 L 95.000 50.000 90.000 50.000 L 85.000 50.000 85.000 70.000 L 85.000 90.000 50.000 90.000 L 15.000 90.000 15.000 70.000 L 15.000 50.000 10.000 50.000 L 5.000 50.000 5.000 75.000 "],
27
28
  "version": ["M37.500 20.000 L 37.500 27.500 27.500 27.500 L 17.500 27.500 17.500 35.000 L 17.500 42.500 11.500 42.500 L 5.500 42.500 5.500 60.000 L 5.500 77.500 11.500 77.500 L 17.500 77.500 17.500 80.000 L 17.500 82.500 27.500 82.500 L 37.500 82.500 37.500 85.000 L 37.500 87.500 65.000 87.500 L 92.500 87.500 92.500 50.000 L 92.500 12.500 65.000 12.500 L 37.500 12.500 37.500 20.000 M87.500 50.000 L 87.500 82.500 65.000 82.500 L 42.500 82.500 42.500 50.000 L 42.500 17.500 65.000 17.500 L 87.500 17.500 87.500 50.000 M37.500 55.000 L 37.500 77.500 30.000 77.500 L 22.500 77.500 22.500 55.000 L 22.500 32.500 30.000 32.500 L 37.500 32.500 37.500 55.000 M17.500 60.000 L 17.500 72.500 14.000 72.500 L 10.500 72.500 10.500 60.000 L 10.500 47.500 14.000 47.500 L 17.500 47.500 17.500 60.000 "]
28
29
  }
package/assets/kolicons/kolicons.svg CHANGED
@@ -82,8 +82,11 @@
82
82
  <glyph glyph-name="sort-neutral"
83
83
  unicode="&#xEA19;"
84
84
  horiz-adv-x="10000" d="M0 9500L0 9000L3500 9000L7000 9000L7000 9500L7000 10000L3500 10000L0 10000L0 9500M0 6500L0 6000L1500 6000L3000 6000L3000 6500L3000 7000L1500 7000L0 7000L0 6500M0 3500L0 3000L4500 3000L9000 3000L9000 3500L9000 4000L4500 4000L0 4000L0 3500M0 500L0 0L2500 0L5000 0L5000 500L5000 1000L2500 1000L0 1000L0 500" />
85
- <glyph glyph-name="version"
85
+ <glyph glyph-name="up"
86
86
  unicode="&#xEA1A;"
87
+ horiz-adv-x="10000" d="M3991.7 6200L2991.7999999999997 5200L3845.900000000001 5200L4700 5200L4700 3850L4700 2500L5000 2500L5300 2500L5300 3850L5300 5200L6154.099999999999 5200L7008.199999999999 5200L6008.3 6200C5458.400000000001 6750 5004.6 7200 5000 7200C4995.4 7200 4541.599999999999 6750 3991.7 6200M500 2500L500 0L5000 0L9500 0L9500 2500L9500 5000L9000 5000L8500 5000L8500 3000L8500 1000L5000 1000L1500 1000L1500 3000L1500 5000L1000 5000L500 5000L500 2500" />
88
+ <glyph glyph-name="version"
89
+ unicode="&#xEA1B;"
87
90
  horiz-adv-x="10000" d="M3750 8000L3750 7250L2750 7250L1750 7250L1750 6500L1750 5750L1150 5750L550 5750L550 4000L550 2250L1150 2250L1750 2250L1750 2000L1750 1750L2750 1750L3750 1750L3750 1500L3750 1250L6500 1250L9250 1250L9250 5000L9250 8750L6500 8750L3750 8750L3750 8000M8750 5000L8750 1750L6500 1750L4250 1750L4250 5000L4250 8250L6500 8250L8750 8250L8750 5000M3750 4500L3750 2250L3000 2250L2250 2250L2250 4500L2250 6750L3000 6750L3750 6750L3750 4500M1750 4000L1750 2750L1400 2750L1050 2750L1050 4000L1050 5250L1400 5250L1750 5250L1750 4000" />
88
91
  </font>
89
92
  </defs>
package/assets/kolicons/kolicons.ttf CHANGED
Binary file
package/assets/kolicons/kolicons.woff CHANGED
Binary file
package/assets/kolicons/kolicons.woff2 CHANGED
Binary file
package/assets/kolicons/style.css CHANGED
@@ -1,11 +1,11 @@
1
1
  @font-face {
2
2
  font-family: "kolicons";
3
- src: url('kolicons.eot?t=1772777938670'); /* IE9*/
4
- src: url('kolicons.eot?t=1772777938670#iefix') format('embedded-opentype'), /* IE6-IE8 */
5
- url("kolicons.woff2?t=1772777938670") format("woff2"),
6
- url("kolicons.woff?t=1772777938670") format("woff"),
7
- url('kolicons.ttf?t=1772777938670') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
8
- url('kolicons.svg?t=1772777938670#kolicons') format('svg'); /* iOS 4.1- */
3
+ src: url('kolicons.eot?t=1772908996847'); /* IE9*/
4
+ src: url('kolicons.eot?t=1772908996847#iefix') format('embedded-opentype'), /* IE6-IE8 */
5
+ url("kolicons.woff2?t=1772908996847") format("woff2"),
6
+ url("kolicons.woff?t=1772908996847") format("woff"),
7
+ url('kolicons.ttf?t=1772908996847') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
8
+ url('kolicons.svg?t=1772908996847#kolicons') format('svg'); /* iOS 4.1- */
9
9
  }
10
10
 
11
11
  [class^="kolicon-"], [class*=" kolicon-"] {
@@ -43,4 +43,5 @@
43
43
  .kolicon-sort-asc::before { content: "\ea17"; }
44
44
  .kolicon-sort-desc::before { content: "\ea18"; }
45
45
  .kolicon-sort-neutral::before { content: "\ea19"; }
46
- .kolicon-version::before { content: "\ea1a"; }
46
+ .kolicon-up::before { content: "\ea1a"; }
47
+ .kolicon-version::before { content: "\ea1b"; }
package/dist/index.cjs CHANGED
@@ -1058,9 +1058,9 @@ var css_248z$a = "/* forward the rem function */\n@layer kol-theme-component {\n
1058
1058
 
1059
1059
  var css_248z$9 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-split-button {\n border-color: var(--color-primary);\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n border-width: var(--border-width);\n }\n .kol-split-button__button .kol-button .kol-span {\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n .kol-split-button__horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button__secondary-button {\n height: 100%;\n }\n .kol-split-button__secondary-button .kol-span {\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n .kol-split-button .kol-span {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-split-button .kol-popover__content {\n background-color: #fff;\n }\n .kol-split-button :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-split-button .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-split-button .kol-button:focus {\n outline: none;\n }\n .kol-split-button .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-split-button .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-split-button .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-split-button .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-split-button .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-split-button .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-split-button .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-split-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-split-button .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-split-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-split-button .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-split-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-split-button .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-split-button__button .kol-button__text {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n .kol-split-button__secondary-button .kol-button__text {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n .kol-split-button .kol-button {\n height: 100%;\n }\n .kol-split-button .kol-button__text {\n height: 100%;\n border: none;\n }\n}";
1060
1060
 
1061
- var css_248z$8 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: stretch;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n color: var(--color-text);\n background-color: var(--color-mute);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n border-color: var(--color-mute-variant);\n border-width: 1px;\n border-bottom: 2px solid var(--color-subtle);\n }\n .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n padding-top: 1px;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-select {\n border: none;\n }\n .kol-pagination .kol-select[multiple] {\n overflow: auto;\n }\n .kol-pagination .kol-select__option {\n border-radius: var(--border-radius);\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-pagination .kol-select__option:active:not(:disabled), .kol-pagination .kol-select__option:checked:not(:disabled), .kol-pagination .kol-select__option:focus:not(:disabled), .kol-pagination .kol-select__option:hover:not(:disabled) {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-select:not([multiple]) .kol-pagination .kol-select__option {\n padding: 0.5em;\n }\n .kol-pagination .kol-select:not([multiple], [size]) {\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) {\n position: relative;\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n position: absolute;\n top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0.075rem;\n }\n .kol-table__head {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__scroll-container {\n max-height: 80vh;\n overflow: auto;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n border-color: var(--color-primary);\n border-style: solid;\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__cell--header {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n .kol-table__cell--header .kol-button:focus {\n outline-color: var(--color-mute-variant);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__cell--selection {\n width: calc(62 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table__cell-actions .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table__cell-actions .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table__cell-actions .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table__cell-actions .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table__cell-actions .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table__cell-actions .kol-link {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-table__cell-actions .kol-link:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-link:focus .kol-link__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-table__cell-actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell-actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-table__cell-actions .kol-link:visited {\n color: var(--color-visited);\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n --kol-selection-input-main-color: var(--color-primary);\n --kol-selection-input-off-color: var(--color-subtle);\n --kol-selection-input-focus-color: var(--color-primary-variant);\n --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n --kol-selection-input-icon-color: var(--color-light);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--kol-selection-input-focus-color);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--kol-selection-input-main-color);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--kol-selection-input-off-color);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--kol-selection-input-main-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio {\n border-color: var(--kol-selection-input-off-color);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-icon {\n color: var(--kol-selection-input-icon-color);\n }\n .kol-table__head-row .kol-table__selection {\n --kol-selection-input-main-color: var(--color-light);\n --kol-selection-input-off-color: var(--color-mute);\n --kol-selection-input-focus-color: var(--color-mute-variant);\n --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n --kol-selection-input-icon-color: var(--color-primary);\n }\n .kol-table__sort {\n display: inline-flex;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .kol-table__sort-order {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n font-size: calc(11 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
1061
+ var css_248z$8 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: stretch;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n color: var(--color-text);\n background-color: var(--color-mute);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n border-color: var(--color-mute-variant);\n border-width: 1px;\n border-bottom: 2px solid var(--color-subtle);\n }\n .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n padding-top: 1px;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-select {\n border: none;\n }\n .kol-pagination .kol-select[multiple] {\n overflow: auto;\n }\n .kol-pagination .kol-select__option {\n border-radius: var(--border-radius);\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-pagination .kol-select__option:active:not(:disabled), .kol-pagination .kol-select__option:checked:not(:disabled), .kol-pagination .kol-select__option:focus:not(:disabled), .kol-pagination .kol-select__option:hover:not(:disabled) {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-select:not([multiple]) .kol-pagination .kol-select__option {\n padding: 0.5em;\n }\n .kol-pagination .kol-select:not([multiple], [size]) {\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) {\n position: relative;\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n position: absolute;\n top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n --kol-table-selection-col-width: calc(62 * 1rem / var(--kolibri-root-font-size, 16));\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n }\n .kol-table__head {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-table__scroll-container {\n max-height: 80vh;\n overflow: auto;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n border-color: var(--color-primary);\n border-style: solid;\n position: relative;\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__cell::before {\n background-color: white;\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table__cell::after {\n background-color: white;\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: -2px;\n width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table__cell--header {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n .kol-table__cell--header .kol-button:focus {\n outline-color: var(--color-mute-variant);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__cell--selection {\n width: calc(68 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n border-right: 2px solid black;\n }\n .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-right) {\n border-left: 2px solid black;\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table__cell-actions .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table__cell-actions .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table__cell-actions .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table__cell-actions .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table__cell-actions .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table__cell-actions .kol-link {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-table__cell-actions .kol-link:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-link:focus .kol-link__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-table__cell-actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell-actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-table__cell-actions .kol-link:visited {\n color: var(--color-visited);\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n --kol-selection-input-main-color: var(--color-primary);\n --kol-selection-input-off-color: var(--color-subtle);\n --kol-selection-input-focus-color: var(--color-primary-variant);\n --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n --kol-selection-input-icon-color: var(--color-light);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--kol-selection-input-focus-color);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--kol-selection-input-main-color);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--kol-selection-input-off-color);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--kol-selection-input-main-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio {\n border-color: var(--kol-selection-input-off-color);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-icon {\n color: var(--kol-selection-input-icon-color);\n }\n .kol-table__head-row .kol-table__selection {\n --kol-selection-input-main-color: var(--color-light);\n --kol-selection-input-off-color: var(--color-mute);\n --kol-selection-input-focus-color: var(--color-mute-variant);\n --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n --kol-selection-input-icon-color: var(--color-primary);\n }\n .kol-table__sort {\n display: inline-flex;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .kol-table__sort-order {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n font-size: calc(11 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
1062
1062
 
1063
- var css_248z$7 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: stretch;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n color: var(--color-text);\n background-color: var(--color-mute);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n border-color: var(--color-mute-variant);\n border-width: 1px;\n border-bottom: 2px solid var(--color-subtle);\n }\n .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n padding-top: 1px;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-select {\n border: none;\n }\n .kol-pagination .kol-select[multiple] {\n overflow: auto;\n }\n .kol-pagination .kol-select__option {\n border-radius: var(--border-radius);\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-pagination .kol-select__option:active:not(:disabled), .kol-pagination .kol-select__option:checked:not(:disabled), .kol-pagination .kol-select__option:focus:not(:disabled), .kol-pagination .kol-select__option:hover:not(:disabled) {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-select:not([multiple]) .kol-pagination .kol-select__option {\n padding: 0.5em;\n }\n .kol-pagination .kol-select:not([multiple], [size]) {\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) {\n position: relative;\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n position: absolute;\n top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0.075rem;\n }\n .kol-table__head {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__scroll-container {\n max-height: 80vh;\n overflow: auto;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n border-color: var(--color-primary);\n border-style: solid;\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__cell--header {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n .kol-table__cell--header .kol-button:focus {\n outline-color: var(--color-mute-variant);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__cell--selection {\n width: calc(62 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table__cell-actions .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table__cell-actions .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table__cell-actions .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table__cell-actions .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table__cell-actions .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table__cell-actions .kol-link {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-table__cell-actions .kol-link:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-link:focus .kol-link__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-table__cell-actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell-actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-table__cell-actions .kol-link:visited {\n color: var(--color-visited);\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n --kol-selection-input-main-color: var(--color-primary);\n --kol-selection-input-off-color: var(--color-subtle);\n --kol-selection-input-focus-color: var(--color-primary-variant);\n --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n --kol-selection-input-icon-color: var(--color-light);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--kol-selection-input-focus-color);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--kol-selection-input-main-color);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--kol-selection-input-off-color);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--kol-selection-input-main-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio {\n border-color: var(--kol-selection-input-off-color);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-icon {\n color: var(--kol-selection-input-icon-color);\n }\n .kol-table__head-row .kol-table__selection {\n --kol-selection-input-main-color: var(--color-light);\n --kol-selection-input-off-color: var(--color-mute);\n --kol-selection-input-focus-color: var(--color-mute-variant);\n --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n --kol-selection-input-icon-color: var(--color-primary);\n }\n .kol-table__sort {\n display: inline-flex;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .kol-table__sort-order {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n font-size: calc(11 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n}";
1063
+ var css_248z$7 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: stretch;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n color: var(--color-text);\n background-color: var(--color-mute);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n border-color: var(--color-mute-variant);\n border-width: 1px;\n border-bottom: 2px solid var(--color-subtle);\n }\n .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n padding-top: 1px;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-select {\n border: none;\n }\n .kol-pagination .kol-select[multiple] {\n overflow: auto;\n }\n .kol-pagination .kol-select__option {\n border-radius: var(--border-radius);\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-pagination .kol-select__option:active:not(:disabled), .kol-pagination .kol-select__option:checked:not(:disabled), .kol-pagination .kol-select__option:focus:not(:disabled), .kol-pagination .kol-select__option:hover:not(:disabled) {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-select:not([multiple]) .kol-pagination .kol-select__option {\n padding: 0.5em;\n }\n .kol-pagination .kol-select:not([multiple], [size]) {\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) {\n position: relative;\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n position: absolute;\n top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n --kol-table-selection-col-width: calc(62 * 1rem / var(--kolibri-root-font-size, 16));\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n }\n .kol-table__head {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-table__scroll-container {\n max-height: 80vh;\n overflow: auto;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n border-color: var(--color-primary);\n border-style: solid;\n position: relative;\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__cell::before {\n background-color: white;\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table__cell::after {\n background-color: white;\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: -2px;\n width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table__cell--header {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n .kol-table__cell--header .kol-button:focus {\n outline-color: var(--color-mute-variant);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__cell--selection {\n width: calc(68 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n border-right: 2px solid black;\n }\n .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-right) {\n border-left: 2px solid black;\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table__cell-actions .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table__cell-actions .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table__cell-actions .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table__cell-actions .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table__cell-actions .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table__cell-actions .kol-link {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-table__cell-actions .kol-link:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-link:focus .kol-link__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-table__cell-actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell-actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-table__cell-actions .kol-link:visited {\n color: var(--color-visited);\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n --kol-selection-input-main-color: var(--color-primary);\n --kol-selection-input-off-color: var(--color-subtle);\n --kol-selection-input-focus-color: var(--color-primary-variant);\n --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n --kol-selection-input-icon-color: var(--color-light);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--kol-selection-input-focus-color);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--kol-selection-input-main-color);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--kol-selection-input-off-color);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--kol-selection-input-main-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio {\n border-color: var(--kol-selection-input-off-color);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-icon {\n color: var(--kol-selection-input-icon-color);\n }\n .kol-table__head-row .kol-table__selection {\n --kol-selection-input-main-color: var(--color-light);\n --kol-selection-input-off-color: var(--color-mute);\n --kol-selection-input-focus-color: var(--color-mute-variant);\n --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n --kol-selection-input-icon-color: var(--color-primary);\n }\n .kol-table__sort {\n display: inline-flex;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .kol-table__sort-order {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n font-size: calc(11 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n}";
1064
1064
 
1065
1065
  var css_248z$6 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-tabs {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: var(--grid-template-rows);\n }\n .kol-tabs--align-right {\n --display: grid;\n --grid-template-columns: 1fr auto;\n --button-group-display: grid;\n --button-group-order: 1;\n }\n .kol-tabs--align-left {\n --display: grid;\n --grid-template-columns: auto 1fr;\n --button-group-order: 0;\n }\n .kol-tabs--align-bottom {\n --display: flex;\n --grid-template-rows: 1fr auto;\n --button-group-gap: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n --button-group-order: 1;\n }\n .kol-tabs--align-top {\n --display: flex;\n --grid-template-rows: auto 1fr;\n --button-group-gap: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n --button-group-order: 0;\n }\n .kol-tabs__button-group {\n display: var(--display);\n gap: var(--button-group-gap);\n order: var(--button-group-order);\n flex-wrap: wrap;\n }\n .kol-tabs .kol-button {\n color: var(--color-subtle);\n background-color: transparent;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0;\n font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n line-height: 1.2;\n border: none;\n font-style: normal;\n }\n .kol-tabs .kol-button:hover {\n color: var(--color-primary);\n }\n .kol-tabs .kol-button.primary, .kol-tabs .kol-button.selected {\n color: var(--color-primary);\n }\n .kol-tabs .kol-button:not(.kol-tabs .kol-button.selected) .kol-span__container {\n padding-bottom: 0.25em;\n }\n .kol-tabs .kol-button.selected .kol-span__container {\n border-bottom: 0.25em solid;\n }\n .kol-tabs .kol-button .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs__content {\n padding: 0.25em 0;\n }\n .kol-tabs__panel {\n height: 100%;\n }\n .kol-tabs .kol-button-wc {\n width: 100%;\n }\n}";
1066
1066
 
@@ -1074,7 +1074,7 @@ var css_248z$2 = "/* forward the rem function */\n@layer kol-theme-component {\n
1074
1074
 
1075
1075
  var css_248z$1 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-tree__treeview-navigation {\n border-radius: var(--border-radius);\n border: 2px solid transparent;\n }\n .kol-tree:focus-within {\n outline: 0;\n }\n .kol-tree:focus-within ul {\n border: 2px solid var(--color-primary);\n }\n}";
1076
1076
 
1077
- var css_248z = "/* forward the rem function */\n@layer kol-theme-global {\n :host {\n --border-radius: var(--kolibri-border-radius, 5px);\n --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n --font-size: var(--kolibri-font-size, calc(16 * 1rem / var(--kolibri-root-font-size, 16)));\n --spacing: var(--kolibri-spacing, calc(4 * 1rem / var(--kolibri-root-font-size, 16)));\n --border-width: var(--kolibri-border-width, 1px);\n --color-primary: var(--kolibri-color-primary, #003a5c);\n --color-primary-variant: var(--kolibri-color-primary-variant, #005a8f);\n --color-secondary: var(--kolibri-color-secondary, #ccebf7);\n --color-danger: var(--kolibri-color-danger, #b4003c);\n --color-warning: var(--kolibri-color-warning, #c44931);\n --color-success: var(--kolibri-color-success, #005c45);\n --color-subtle: var(--kolibri-color-subtle, #576164);\n --color-light: var(--kolibri-color-light, #ffffff);\n --color-text: var(--kolibri-color-text, #202020);\n --color-mute: var(--kolibri-color-mute, #f2f3f4);\n --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n --color-visited: var(\n \t--kolibri-color-visited,\n \t#551a8b\n );\n }\n :host {\n font-family: var(--font-family);\n font-size: var(--font-size);\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus,\n .kol-input:not(.checkbox, .radio) .input:focus-within,\n .kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n cursor: pointer;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-headline {\n font-weight: 700;\n }\n .kol-tooltip__floating {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip__arrow {\n background-color: var(--color-light);\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip__content {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n .kol-span,\n .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .badge-text-hint {\n color: var(--color-text);\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n padding: 0 0.3em;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}";
1077
+ var css_248z = "/* forward the rem function */\n@layer kol-theme-global {\n :host {\n --border-radius: var(--kolibri-border-radius, 5px);\n --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n --font-size: var(--kolibri-font-size, calc(16 * 1rem / var(--kolibri-root-font-size, 16)));\n --spacing: var(--kolibri-spacing, calc(4 * 1rem / var(--kolibri-root-font-size, 16)));\n --border-width: var(--kolibri-border-width, 1px);\n --color-primary: var(--kolibri-color-primary, #003a5c);\n --color-primary-variant: var(--kolibri-color-primary-variant, #005a8f);\n --color-secondary: var(--kolibri-color-secondary, #ccebf7);\n --color-danger: var(--kolibri-color-danger, #b4003c);\n --color-warning: var(--kolibri-color-warning, #c44931);\n --color-success: var(--kolibri-color-success, #005c45);\n --color-subtle: var(--kolibri-color-subtle, #576164);\n --color-light: var(--kolibri-color-light, #ffffff);\n --color-text: var(--kolibri-color-text, #202020);\n --color-mute: var(--kolibri-color-mute, #f2f3f4);\n --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n --color-visited: var(\n \t--kolibri-color-visited,\n \t#551a8b\n );\n }\n :host {\n font-family: var(--font-family);\n font-size: var(--font-size);\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus,\n .kol-input:not(.checkbox, .radio) .input:focus-within,\n .kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-headline {\n font-weight: 700;\n }\n .kol-tooltip__floating {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip__arrow {\n background-color: var(--color-light);\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip__content {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n .kol-span,\n .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .badge-text-hint {\n color: var(--color-text);\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n padding: 0 0.3em;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}";
1078
1078
 
1079
1079
  const DEFAULT = KoliBri.createTheme('default', {
1080
1080
  GLOBAL: css_248z,
package/dist/index.mjs CHANGED
@@ -1056,9 +1056,9 @@ var css_248z$a = "/* forward the rem function */\n@layer kol-theme-component {\n
1056
1056
 
1057
1057
  var css_248z$9 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-split-button {\n border-color: var(--color-primary);\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n border-width: var(--border-width);\n }\n .kol-split-button__button .kol-button .kol-span {\n border-bottom-left-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n }\n .kol-split-button__horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button__secondary-button {\n height: 100%;\n }\n .kol-split-button__secondary-button .kol-span {\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n .kol-split-button .kol-span {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-split-button .kol-popover__content {\n background-color: #fff;\n }\n .kol-split-button :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-split-button .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-split-button .kol-button:focus {\n outline: none;\n }\n .kol-split-button .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-split-button .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-split-button .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-split-button .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-split-button .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-split-button .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-split-button .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-split-button .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-split-button .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-split-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-split-button .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-split-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-split-button .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-split-button .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-split-button .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-split-button__button .kol-button__text {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n .kol-split-button__secondary-button .kol-button__text {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n .kol-split-button .kol-button {\n height: 100%;\n }\n .kol-split-button .kol-button__text {\n height: 100%;\n border: none;\n }\n}";
1058
1058
 
1059
- var css_248z$8 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: stretch;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n color: var(--color-text);\n background-color: var(--color-mute);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n border-color: var(--color-mute-variant);\n border-width: 1px;\n border-bottom: 2px solid var(--color-subtle);\n }\n .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n padding-top: 1px;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-select {\n border: none;\n }\n .kol-pagination .kol-select[multiple] {\n overflow: auto;\n }\n .kol-pagination .kol-select__option {\n border-radius: var(--border-radius);\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-pagination .kol-select__option:active:not(:disabled), .kol-pagination .kol-select__option:checked:not(:disabled), .kol-pagination .kol-select__option:focus:not(:disabled), .kol-pagination .kol-select__option:hover:not(:disabled) {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-select:not([multiple]) .kol-pagination .kol-select__option {\n padding: 0.5em;\n }\n .kol-pagination .kol-select:not([multiple], [size]) {\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) {\n position: relative;\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n position: absolute;\n top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0.075rem;\n }\n .kol-table__head {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__scroll-container {\n max-height: 80vh;\n overflow: auto;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n border-color: var(--color-primary);\n border-style: solid;\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__cell--header {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n .kol-table__cell--header .kol-button:focus {\n outline-color: var(--color-mute-variant);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__cell--selection {\n width: calc(62 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table__cell-actions .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table__cell-actions .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table__cell-actions .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table__cell-actions .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table__cell-actions .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table__cell-actions .kol-link {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-table__cell-actions .kol-link:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-link:focus .kol-link__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-table__cell-actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell-actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-table__cell-actions .kol-link:visited {\n color: var(--color-visited);\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n --kol-selection-input-main-color: var(--color-primary);\n --kol-selection-input-off-color: var(--color-subtle);\n --kol-selection-input-focus-color: var(--color-primary-variant);\n --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n --kol-selection-input-icon-color: var(--color-light);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--kol-selection-input-focus-color);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--kol-selection-input-main-color);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--kol-selection-input-off-color);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--kol-selection-input-main-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio {\n border-color: var(--kol-selection-input-off-color);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-icon {\n color: var(--kol-selection-input-icon-color);\n }\n .kol-table__head-row .kol-table__selection {\n --kol-selection-input-main-color: var(--color-light);\n --kol-selection-input-off-color: var(--color-mute);\n --kol-selection-input-focus-color: var(--color-mute-variant);\n --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n --kol-selection-input-icon-color: var(--color-primary);\n }\n .kol-table__sort {\n display: inline-flex;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .kol-table__sort-order {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n font-size: calc(11 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
1059
+ var css_248z$8 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: stretch;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n color: var(--color-text);\n background-color: var(--color-mute);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n border-color: var(--color-mute-variant);\n border-width: 1px;\n border-bottom: 2px solid var(--color-subtle);\n }\n .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n padding-top: 1px;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-select {\n border: none;\n }\n .kol-pagination .kol-select[multiple] {\n overflow: auto;\n }\n .kol-pagination .kol-select__option {\n border-radius: var(--border-radius);\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-pagination .kol-select__option:active:not(:disabled), .kol-pagination .kol-select__option:checked:not(:disabled), .kol-pagination .kol-select__option:focus:not(:disabled), .kol-pagination .kol-select__option:hover:not(:disabled) {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-select:not([multiple]) .kol-pagination .kol-select__option {\n padding: 0.5em;\n }\n .kol-pagination .kol-select:not([multiple], [size]) {\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) {\n position: relative;\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n position: absolute;\n top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n --kol-table-selection-col-width: calc(62 * 1rem / var(--kolibri-root-font-size, 16));\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n }\n .kol-table__head {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-table__scroll-container {\n max-height: 80vh;\n overflow: auto;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n border-color: var(--color-primary);\n border-style: solid;\n position: relative;\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__cell::before {\n background-color: white;\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table__cell::after {\n background-color: white;\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: -2px;\n width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table__cell--header {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n .kol-table__cell--header .kol-button:focus {\n outline-color: var(--color-mute-variant);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__cell--selection {\n width: calc(68 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n border-right: 2px solid black;\n }\n .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-right) {\n border-left: 2px solid black;\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table__cell-actions .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table__cell-actions .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table__cell-actions .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table__cell-actions .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table__cell-actions .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table__cell-actions .kol-link {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-table__cell-actions .kol-link:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-link:focus .kol-link__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-table__cell-actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell-actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-table__cell-actions .kol-link:visited {\n color: var(--color-visited);\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n --kol-selection-input-main-color: var(--color-primary);\n --kol-selection-input-off-color: var(--color-subtle);\n --kol-selection-input-focus-color: var(--color-primary-variant);\n --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n --kol-selection-input-icon-color: var(--color-light);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--kol-selection-input-focus-color);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--kol-selection-input-main-color);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--kol-selection-input-off-color);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--kol-selection-input-main-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio {\n border-color: var(--kol-selection-input-off-color);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-icon {\n color: var(--kol-selection-input-icon-color);\n }\n .kol-table__head-row .kol-table__selection {\n --kol-selection-input-main-color: var(--color-light);\n --kol-selection-input-off-color: var(--color-mute);\n --kol-selection-input-focus-color: var(--color-mute-variant);\n --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n --kol-selection-input-icon-color: var(--color-primary);\n }\n .kol-table__sort {\n display: inline-flex;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .kol-table__sort-order {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n font-size: calc(11 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}";
1060
1060
 
1061
- var css_248z$7 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: stretch;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n color: var(--color-text);\n background-color: var(--color-mute);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n border-color: var(--color-mute-variant);\n border-width: 1px;\n border-bottom: 2px solid var(--color-subtle);\n }\n .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n padding-top: 1px;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-select {\n border: none;\n }\n .kol-pagination .kol-select[multiple] {\n overflow: auto;\n }\n .kol-pagination .kol-select__option {\n border-radius: var(--border-radius);\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-pagination .kol-select__option:active:not(:disabled), .kol-pagination .kol-select__option:checked:not(:disabled), .kol-pagination .kol-select__option:focus:not(:disabled), .kol-pagination .kol-select__option:hover:not(:disabled) {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-select:not([multiple]) .kol-pagination .kol-select__option {\n padding: 0.5em;\n }\n .kol-pagination .kol-select:not([multiple], [size]) {\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) {\n position: relative;\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n position: absolute;\n top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0.075rem;\n }\n .kol-table__head {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__scroll-container {\n max-height: 80vh;\n overflow: auto;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n border-color: var(--color-primary);\n border-style: solid;\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__cell--header {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n .kol-table__cell--header .kol-button:focus {\n outline-color: var(--color-mute-variant);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__cell--selection {\n width: calc(62 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table__cell-actions .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table__cell-actions .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table__cell-actions .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table__cell-actions .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table__cell-actions .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table__cell-actions .kol-link {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-table__cell-actions .kol-link:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-link:focus .kol-link__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-table__cell-actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell-actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-table__cell-actions .kol-link:visited {\n color: var(--color-visited);\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n --kol-selection-input-main-color: var(--color-primary);\n --kol-selection-input-off-color: var(--color-subtle);\n --kol-selection-input-focus-color: var(--color-primary-variant);\n --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n --kol-selection-input-icon-color: var(--color-light);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--kol-selection-input-focus-color);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--kol-selection-input-main-color);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--kol-selection-input-off-color);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--kol-selection-input-main-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio {\n border-color: var(--kol-selection-input-off-color);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-icon {\n color: var(--kol-selection-input-icon-color);\n }\n .kol-table__head-row .kol-table__selection {\n --kol-selection-input-main-color: var(--color-light);\n --kol-selection-input-off-color: var(--color-mute);\n --kol-selection-input-focus-color: var(--color-mute-variant);\n --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n --kol-selection-input-icon-color: var(--color-primary);\n }\n .kol-table__sort {\n display: inline-flex;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .kol-table__sort-order {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n font-size: calc(11 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n}";
1061
+ var css_248z$7 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) {\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--type-error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n padding-left: 0.125em;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n padding-left: 0.125em;\n }\n .kol-form-field__hint {\n font-size: calc(14.4 * 1rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-form-field__counter--exceeded {\n color: var(--color-danger);\n }\n .kol-form-field__msg {\n order: 1;\n }\n .kol-form-field__label {\n order: 2;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__hint {\n order: 4;\n }\n .kol-input-container {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n -moz-column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n column-gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: stretch;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--disabled {\n color: var(--color-text);\n background-color: var(--color-mute);\n cursor: not-allowed;\n }\n .kol-input-container:not(.kol-input-container--disabled, .kol-input-container:has(.kol-input--readonly)):hover {\n border-color: var(--color-primary);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container:has(.kol-input--readonly), .kol-input-container:has(.kol-textarea--readonly), .kol-input-container--disabled {\n border-color: var(--color-mute-variant);\n border-width: 1px;\n border-bottom: 2px solid var(--color-subtle);\n }\n .kol-input-container:has(.kol-input--readonly) .kol-input-container__container, .kol-input-container:has(.kol-textarea--readonly) .kol-input-container__container, .kol-input-container--disabled .kol-input-container__container {\n padding-top: 1px;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-input-container--error:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline-color: var(--color-danger);\n }\n}\n@layer kol-theme-component {\n .kol-table-settings {\n top: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table-settings__content .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: none;\n }\n .kol-table-settings__content .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table-settings__content .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table-settings__content .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table-settings__content .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table-settings__content .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table-settings__content .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table-settings__content .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table-settings__content .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table-settings__content .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table-settings__content .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table-settings__content .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: var(--border-width) solid var(--color-mute-variant);\n }\n .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-alert .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-alert .kol-button:focus {\n outline: none;\n }\n .kol-alert .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-alert .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-alert .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-alert .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-alert .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-alert .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-alert .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-alert .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button--hide-label .kol-alert .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-alert .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-alert .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-alert .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n background-color: var(--color-light);\n display: flex;\n width: 100%;\n overflow: unset;\n }\n .kol-alert--variant-msg {\n align-items: start;\n }\n .kol-alert--variant-card {\n filter: drop-shadow(0 calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(4 * 1rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-radius: var(--border-radius);\n flex-direction: column;\n border: var(--border-width) solid var(--alert-accent-color);\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--color-warning);\n }\n .kol-alert__container {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert--variant-card .kol-alert__container {\n background-color: var(--alert-accent-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__closer {\n place-self: center;\n }\n .kol-alert__closer .kol-button {\n border-radius: 50%;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n cursor: pointer;\n }\n .kol-alert--variant-msg .kol-alert__closer .kol-button {\n --text-color: var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__closer .kol-button {\n --text-color: var(--color-light);\n }\n .kol-alert__closer .kol-icon {\n font-size: calc(19.2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--variant-card .kol-alert__heading {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--type-default) .kol-alert__icon {\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .kol-alert--variant-card .kol-alert__content {\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-pagination .kol-select {\n border: none;\n }\n .kol-pagination .kol-select[multiple] {\n overflow: auto;\n }\n .kol-pagination .kol-select__option {\n border-radius: var(--border-radius);\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-pagination .kol-select__option:active:not(:disabled), .kol-pagination .kol-select__option:checked:not(:disabled), .kol-pagination .kol-select__option:focus:not(:disabled), .kol-pagination .kol-select__option:hover:not(:disabled) {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-select:not([multiple]) .kol-pagination .kol-select__option {\n padding: 0.5em;\n }\n .kol-pagination .kol-select:not([multiple], [size]) {\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) {\n position: relative;\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n position: absolute;\n top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-pagination .kol-button:focus .kol-button__text {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-pagination .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .kol-pagination .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n .kol-pagination .kol-button__text {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border: 1px solid var(--color-primary);\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-pagination__button--selected .kol-button__text {\n color: var(--color-light);\n background-color: var(--color-primary);\n border: 0;\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table {\n --kol-table-selection-col-width: calc(62 * 1rem / var(--kolibri-root-font-size, 16));\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__table {\n width: 100%;\n border-spacing: 0;\n }\n .kol-table__head {\n position: sticky;\n top: 0;\n z-index: 10;\n }\n .kol-table__caption {\n min-height: calc(var(--a11y-min-size) + 2px);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-table__scroll-container {\n max-height: 80vh;\n overflow: auto;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-table__focus-element {\n outline: none;\n }\n .kol-table__cell {\n border-color: var(--color-primary);\n border-style: solid;\n position: relative;\n padding: calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(16 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n }\n .kol-table__cell::before {\n background-color: white;\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table__cell::after {\n background-color: white;\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: -2px;\n width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table__cell--header {\n color: var(--color-light);\n background-color: var(--color-primary);\n font-weight: normal;\n }\n .kol-table__cell--header .kol-button:focus {\n outline-color: var(--color-mute-variant);\n }\n .kol-table__cell--ascending, .kol-table__cell--descending {\n font-weight: 700;\n }\n .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n font-weight: 700;\n }\n .kol-table__cell--selection {\n width: calc(68 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n border-right: 2px solid black;\n }\n .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-right) {\n border-left: 2px solid black;\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions :host {\n --theme-visibility-delay: 0.5s;\n }\n .kol-table__cell-actions .kol-button__text {\n border-style: solid;\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n font-weight: 700;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-button--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --text-background-color: var(--color-secondary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-table__cell-actions .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-text);\n --text-color: var(--color-text);\n }\n .kol-table__cell-actions .kol-button--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-table__cell-actions .kol-button--primary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--secondary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--tertiary:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--normal:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover, .kol-table__cell-actions .kol-button--ghost:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n position: relative;\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n }\n .kol-table__cell-actions .kol-button--danger:not([disabled], [aria-disabled=true]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n outline-color: var(--color-danger);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-table__cell-actions .kol-button__text:hover {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text {\n padding: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button--hide-label .kol-table__cell-actions .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--color-primary-variant) solid calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: var(--kol-focus-outline-offset, 2px);\n transition: 200ms outline-offset linear;\n position: relative;\n }\n .kol-table__cell-actions .kol-button:is(:disabled, [aria-disabled=true]):hover .kol-table__cell-actions .kol-button__text {\n color: var(--text-color);\n background-color: var(--text-background-color);\n box-shadow: none;\n border-color: var(--text-border-color);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n --kol-focus-outline-offset: -2px;\n }\n .kol-table__cell-actions .kol-link {\n color: var(--color-primary);\n font-weight: 400;\n font-style: normal;\n }\n .kol-table__cell-actions .kol-link:focus {\n outline: none;\n }\n .kol-table__cell-actions .kol-link:focus .kol-link__text {\n outline: var(--border-width) solid;\n border-radius: var(--border-radius);\n position: relative;\n }\n .kol-table__cell-actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell-actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.25em;\n }\n .kol-table__cell-actions .kol-link:visited {\n color: var(--color-visited);\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n display: flex;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n --kol-selection-input-main-color: var(--color-primary);\n --kol-selection-input-off-color: var(--color-subtle);\n --kol-selection-input-focus-color: var(--color-primary-variant);\n --kol-selection-input-hover-color: rgb(8, 35, 48, 0.24);\n --kol-selection-input-icon-color: var(--color-light);\n }\n .kol-table__selection-input:not(:disabled):hover {\n box-shadow: 0 2px 8px 2px var(--kol-selection-input-hover-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input:focus {\n outline-color: var(--kol-selection-input-focus-color);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--kol-selection-input-main-color);\n outline-offset: 2px;\n }\n .kol-table__selection-input:focus:hover {\n box-shadow: none;\n }\n .kol-table__selection-input--checkbox {\n border-color: var(--kol-selection-input-off-color);\n border-radius: 5px;\n }\n .kol-table__selection-input--checkbox:checked {\n background-color: var(--kol-selection-input-main-color);\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio {\n border-color: var(--kol-selection-input-off-color);\n display: flex;\n }\n .kol-table__selection-input--radio:checked {\n border-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: var(--kol-selection-input-main-color);\n }\n .kol-table__selection-icon {\n color: var(--kol-selection-input-icon-color);\n }\n .kol-table__head-row .kol-table__selection {\n --kol-selection-input-main-color: var(--color-light);\n --kol-selection-input-off-color: var(--color-mute);\n --kol-selection-input-focus-color: var(--color-mute-variant);\n --kol-selection-input-hover-color: rgb(255, 255, 255, 0.24);\n --kol-selection-input-icon-color: var(--color-primary);\n }\n .kol-table__sort {\n display: inline-flex;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .kol-table__sort-order {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-radius: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n font-size: calc(11 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n}";
1062
1062
 
1063
1063
  var css_248z$6 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-tabs {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: var(--grid-template-rows);\n }\n .kol-tabs--align-right {\n --display: grid;\n --grid-template-columns: 1fr auto;\n --button-group-display: grid;\n --button-group-order: 1;\n }\n .kol-tabs--align-left {\n --display: grid;\n --grid-template-columns: auto 1fr;\n --button-group-order: 0;\n }\n .kol-tabs--align-bottom {\n --display: flex;\n --grid-template-rows: 1fr auto;\n --button-group-gap: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n --button-group-order: 1;\n }\n .kol-tabs--align-top {\n --display: flex;\n --grid-template-rows: auto 1fr;\n --button-group-gap: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n --button-group-order: 0;\n }\n .kol-tabs__button-group {\n display: var(--display);\n gap: var(--button-group-gap);\n order: var(--button-group-order);\n flex-wrap: wrap;\n }\n .kol-tabs .kol-button {\n color: var(--color-subtle);\n background-color: transparent;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0;\n font-size: calc(18 * 1rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n line-height: 1.2;\n border: none;\n font-style: normal;\n }\n .kol-tabs .kol-button:hover {\n color: var(--color-primary);\n }\n .kol-tabs .kol-button.primary, .kol-tabs .kol-button.selected {\n color: var(--color-primary);\n }\n .kol-tabs .kol-button:not(.kol-tabs .kol-button.selected) .kol-span__container {\n padding-bottom: 0.25em;\n }\n .kol-tabs .kol-button.selected .kol-span__container {\n border-bottom: 0.25em solid;\n }\n .kol-tabs .kol-button .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tabs__content {\n padding: 0.25em 0;\n }\n .kol-tabs__panel {\n height: 100%;\n }\n .kol-tabs .kol-button-wc {\n width: 100%;\n }\n}";
1064
1064
 
@@ -1072,7 +1072,7 @@ var css_248z$2 = "/* forward the rem function */\n@layer kol-theme-component {\n
1072
1072
 
1073
1073
  var css_248z$1 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-tree__treeview-navigation {\n border-radius: var(--border-radius);\n border: 2px solid transparent;\n }\n .kol-tree:focus-within {\n outline: 0;\n }\n .kol-tree:focus-within ul {\n border: 2px solid var(--color-primary);\n }\n}";
1074
1074
 
1075
- var css_248z = "/* forward the rem function */\n@layer kol-theme-global {\n :host {\n --border-radius: var(--kolibri-border-radius, 5px);\n --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n --font-size: var(--kolibri-font-size, calc(16 * 1rem / var(--kolibri-root-font-size, 16)));\n --spacing: var(--kolibri-spacing, calc(4 * 1rem / var(--kolibri-root-font-size, 16)));\n --border-width: var(--kolibri-border-width, 1px);\n --color-primary: var(--kolibri-color-primary, #003a5c);\n --color-primary-variant: var(--kolibri-color-primary-variant, #005a8f);\n --color-secondary: var(--kolibri-color-secondary, #ccebf7);\n --color-danger: var(--kolibri-color-danger, #b4003c);\n --color-warning: var(--kolibri-color-warning, #c44931);\n --color-success: var(--kolibri-color-success, #005c45);\n --color-subtle: var(--kolibri-color-subtle, #576164);\n --color-light: var(--kolibri-color-light, #ffffff);\n --color-text: var(--kolibri-color-text, #202020);\n --color-mute: var(--kolibri-color-mute, #f2f3f4);\n --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n --color-visited: var(\n \t--kolibri-color-visited,\n \t#551a8b\n );\n }\n :host {\n font-family: var(--font-family);\n font-size: var(--font-size);\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus,\n .kol-input:not(.checkbox, .radio) .input:focus-within,\n .kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n cursor: pointer;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-headline {\n font-weight: 700;\n }\n .kol-tooltip__floating {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip__arrow {\n background-color: var(--color-light);\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip__content {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n .kol-span,\n .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .badge-text-hint {\n color: var(--color-text);\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n padding: 0 0.3em;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}";
1075
+ var css_248z = "/* forward the rem function */\n@layer kol-theme-global {\n :host {\n --border-radius: var(--kolibri-border-radius, 5px);\n --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n --font-size: var(--kolibri-font-size, calc(16 * 1rem / var(--kolibri-root-font-size, 16)));\n --spacing: var(--kolibri-spacing, calc(4 * 1rem / var(--kolibri-root-font-size, 16)));\n --border-width: var(--kolibri-border-width, 1px);\n --color-primary: var(--kolibri-color-primary, #003a5c);\n --color-primary-variant: var(--kolibri-color-primary-variant, #005a8f);\n --color-secondary: var(--kolibri-color-secondary, #ccebf7);\n --color-danger: var(--kolibri-color-danger, #b4003c);\n --color-warning: var(--kolibri-color-warning, #c44931);\n --color-success: var(--kolibri-color-success, #005c45);\n --color-subtle: var(--kolibri-color-subtle, #576164);\n --color-light: var(--kolibri-color-light, #ffffff);\n --color-text: var(--kolibri-color-text, #202020);\n --color-mute: var(--kolibri-color-mute, #f2f3f4);\n --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n --color-visited: var(\n \t--kolibri-color-visited,\n \t#551a8b\n );\n }\n :host {\n font-family: var(--font-family);\n font-size: var(--font-size);\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus,\n .kol-input:not(.checkbox, .radio) .input:focus-within,\n .kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-headline {\n font-weight: 700;\n }\n .kol-tooltip__floating {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip__arrow {\n background-color: var(--color-light);\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip__content {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n .kol-span,\n .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .badge-text-hint {\n color: var(--color-text);\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n padding: 0 0.3em;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}";
1076
1076
 
1077
1077
  const DEFAULT = KoliBri.createTheme('default', {
1078
1078
  GLOBAL: css_248z,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/theme-default",
3
- "version": "4.1.1-rc.1",
3
+ "version": "4.1.1-rc.3",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": {
@@ -43,9 +43,9 @@
43
43
  "type": "module",
44
44
  "sideEffects": false,
45
45
  "devDependencies": {
46
- "@eslint/eslintrc": "3.3.4",
47
- "@eslint/js": "9.39.3",
48
- "@rollup/plugin-commonjs": "29.0.1",
46
+ "@eslint/eslintrc": "3.3.5",
47
+ "@eslint/js": "9.39.4",
48
+ "@rollup/plugin-commonjs": "29.0.2",
49
49
  "@rollup/plugin-node-resolve": "16.0.3",
50
50
  "@rollup/plugin-typescript": "12.3.0",
51
51
  "@typescript-eslint/eslint-plugin": "8.56.1",
@@ -53,7 +53,7 @@
53
53
  "autoprefixer": "10.4.27",
54
54
  "cpy-cli": "6.0.0",
55
55
  "cross-env": "10.1.0",
56
- "eslint": "9.39.3",
56
+ "eslint": "9.39.4",
57
57
  "nodemon": "3.1.14",
58
58
  "npm-run-all2": "8.0.4",
59
59
  "postcss": "8.5.8",
@@ -65,11 +65,11 @@
65
65
  "stylelint": "17.4.0",
66
66
  "typescript": "5.9.3",
67
67
  "unbuild": "3.6.1",
68
- "@public-ui/visual-tests": "4.1.1-rc.1",
69
- "@public-ui/components": "4.1.1-rc.1"
68
+ "@public-ui/components": "4.1.1-rc.3",
69
+ "@public-ui/visual-tests": "4.1.1-rc.3"
70
70
  },
71
71
  "peerDependencies": {
72
- "@public-ui/components": "4.1.1-rc.1"
72
+ "@public-ui/components": "4.1.1-rc.3"
73
73
  },
74
74
  "exports": {
75
75
  ".": {
@@ -95,8 +95,8 @@
95
95
  "lint:tsc": "tsc --noemit",
96
96
  "start": "npm-run-all2 --parallel dev serve",
97
97
  "serve": "sh serve.sh DEFAULT",
98
- "test": "cross-env THEME_MODULE=dist THEME_EXPORT=DEFAULT kolibri-visual-test",
99
- "test:update:e2e": "cross-env THEME_MODULE=dist THEME_EXPORT=DEFAULT kolibri-visual-test --update-snapshots=changed theme-snapshots.spec.js",
98
+ "test": "cross-env THEME_MODULE=dist THEME_EXPORT=DEFAULT THEME_CSS=$(pwd)/inject-assets.css kolibri-visual-test",
99
+ "test:update:e2e": "cross-env THEME_MODULE=dist THEME_EXPORT=DEFAULT THEME_CSS=$(pwd)/inject-assets.css kolibri-visual-test --update-snapshots=changed theme-snapshots.spec.js",
100
100
  "pretest": "pnpm build",
101
101
  "pretest:update:e2e": "pnpm build"
102
102
  }