@public-ui/themes 3.0.0-alpha.1 → 3.0.0-rc.0

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 (9) hide show
  1. package/assets/README.md +1 -0
  2. package/assets/codicons/codicon.css +54 -1
  3. package/assets/codicons/codicon.csv +41 -0
  4. package/assets/codicons/codicon.html +328 -0
  5. package/assets/codicons/codicon.svg +1 -1
  6. package/assets/codicons/codicon.ttf +0 -0
  7. package/dist/index.cjs +93 -93
  8. package/dist/index.mjs +93 -93
  9. package/package.json +4 -3
package/dist/index.mjs CHANGED
@@ -12,83 +12,83 @@ var css_248z$2L = "@layer kol-theme-global {\n :host {\n --border-radius: va
12
12
 
13
13
  var css_248z$2K = "@layer kol-theme-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n .kol-accordion {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .kol-accordion__content {\n margin: 0;\n padding-left: 2.25em;\n padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading {\n margin: 0;\n }\n .kol-accordion__heading-button {\n display: flex;\n border-radius: var(--border-radius);\n min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n .kol-accordion__heading-button:focus-within button {\n outline: 0;\n }\n .kol-accordion__heading-button .kol-span-wc > span {\n display: flex;\n place-items: baseline center;\n text-align: left;\n gap: 0.5em;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.1;\n }\n .kol-accordion__heading-button button {\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button button :focus {\n outline: none;\n }\n .kol-accordion__heading-button .kol-icon {\n color: var(--color-primary);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
14
14
 
15
- var css_248z$2J = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
15
+ var css_248z$2J = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
16
16
 
17
17
  var css_248z$2I = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
18
18
 
19
- var css_248z$2H = "@layer kol-theme-component {\n .kol-badge {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n .kol-badge--has-smart-button {\n align-items: center;\n }\n .kol-badge__smart-button .button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__smart-button .button .kol-span-wc {\n align-items: center;\n font-style: normal;\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__smart-button:hover .button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .kol-badge__label {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__label .kol-span__container {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
19
+ var css_248z$2H = "@layer kol-theme-component {\n .kol-badge {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n .kol-badge--has-smart-button {\n align-items: center;\n }\n .kol-badge__smart-button .kol-button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__smart-button .kol-button:hover {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .kol-badge__smart-button .kol-button__text {\n align-items: center;\n font-style: normal;\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__label {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge__label .kol-span__container {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
20
20
 
21
21
  var css_248z$2G = "@layer kol-theme-component {\n .kol-breadcrumb {\n font-family: var(--font-family);\n }\n .kol-breadcrumb__list-element-span {\n color: var(--color-subtle);\n }\n .kol-breadcrumb__link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n}";
22
22
 
23
- var css_248z$2F = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
23
+ var css_248z$2F = "@layer kol-theme-component {\n .kol-button:focus {\n outline: none;\n }\n .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-button--secondary, .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .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-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-button--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n .kol-button:focus {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-button:disabled:hover .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n .kol-button .badge-text-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n .kol-button {\n font-family: var(--font-family);\n }\n .kol-button__text {\n font-weight: 700;\n border-style: solid;\n border-width: var(--border-width);\n border-radius: var(--border-radius);\n }\n}";
24
24
 
25
25
  var css_248z$2E = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
26
26
 
27
- var css_248z$2D = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n font-size: inherit;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n a:hover:not([aria-disabled]) .kol-span-wc .span-label,\n button:hover:not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
27
+ var css_248z$2D = "@layer kol-theme-component {\n .kol-button {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button:visited {\n color: var(--visited);\n }\n .kol-button:focus .kol-button__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .span-label {\n text-decoration-thickness: 0.25em;\n }\n .kol-button {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n font-size: inherit;\n }\n .kol-button:focus {\n outline: none;\n --text-border-radius: var(--border-radius);\n --text-outline: calc(var(--border-width) * 2) solid;\n }\n .kol-button:visited {\n color: var(--visited);\n }\n .kol-button:focus .kol-button__text {\n border-radius: var(--text-border-radius);\n outline: var(--text-outline);\n }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .span-label {\n text-decoration-thickness: 0.25em;\n }\n .badge-text-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
28
28
 
29
29
  var css_248z$2C = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) var(--color-subtle);\n border-radius: var(--border-radius);\n }\n :host .kol-heading-wc {\n line-height: 1.75;\n }\n :host div.header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host div.content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n :host div.footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
30
30
 
31
- var css_248z$2B = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
31
+ var css_248z$2B = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
32
32
 
33
33
  var css_248z$2A = "@layer kol-theme-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n .details {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .details__content.indented-text {\n font-family: var(--font-family);\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading {\n margin: 0;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .details__heading-button .kol-span-wc .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n}";
34
34
 
35
35
  var css_248z$2z = "@layer kol-theme-component {\n .drawer__wrapper {\n box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) var(--color-subtle);\n }\n .drawer__wrapper--left {\n animation: slideInLeft 0.4s forwards;\n }\n .drawer__wrapper--left.is-closing {\n animation: slideOutLeft 0.4s forwards;\n }\n .drawer__wrapper--right {\n animation: slideInRight 0.4s forwards;\n }\n .drawer__wrapper--right.is-closing {\n animation: slideOutRight 0.4s forwards;\n }\n .drawer__wrapper--top {\n animation: slideInTop 0.4s forwards;\n }\n .drawer__wrapper--top.is-closing {\n animation: slideOutTop 0.4s forwards;\n }\n .drawer__wrapper--bottom {\n animation: slideInBottom 0.4s forwards;\n }\n .drawer__wrapper--bottom.is-closing {\n animation: slideOutBottom 0.4s forwards;\n }\n}\n@keyframes slideInLeft {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInRight {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInTop {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideInBottom {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideOutLeft {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n}\n@keyframes slideOutRight {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes slideOutTop {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n@keyframes slideOutBottom {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n}";
36
36
 
37
- var css_248z$2y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n line-height: 1;\n }\n .kol-link-wc :is(a, button):focus {\n outline: none;\n }\n .kol-link-wc :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-link-wc a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n .kol-link-wc button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n .kol-link-wc :is(a, button):visited {\n color: var(--visited);\n }\n .kol-link-wc .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .kol-link-wc .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
37
+ var css_248z$2y = "@layer kol-theme-component {\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .span-label {\n text-decoration-thickness: 0.25em;\n }\n :host {\n font-family: var(--font-family);\n }\n .kol-form__link {\n display: inline-block;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
38
38
 
39
39
  var css_248z$2x = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n color: inherit;\n font-style: normal;\n font-family: var(--font-family);\n }\n .headline-h1,\n .headline-h2,\n .headline-h3 {\n font-weight: 700;\n }\n .headline-h1 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.667;\n }\n .headline-h2 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.4;\n }\n .headline-h3 {\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.333;\n }\n}";
40
40
 
41
41
  var css_248z$2w = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-indented-text-wc > div {\n font-family: var(--font-family);\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
42
42
 
43
- var css_248z$2v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .kol-input input[type=checkbox]:focus {\n outline-color: var(--color-primary);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-left-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
43
+ var css_248z$2v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .kol-input input[type=checkbox]:focus {\n outline-color: var(--color-primary);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-left-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
44
44
 
45
- var css_248z$2u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n input[type=color] {\n background-color: transparent;\n }\n}";
45
+ var css_248z$2u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n input[type=color] {\n background-color: transparent;\n }\n}";
46
46
 
47
- var css_248z$2t = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
47
+ var css_248z$2t = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
48
48
 
49
- var css_248z$2s = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
49
+ var css_248z$2s = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
50
50
 
51
- var css_248z$2r = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n .kol-input .input input[type=file] {\n padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=file] {\n background-color: transparent;\n }\n}";
51
+ var css_248z$2r = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n .kol-input .input input[type=file] {\n padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=file] {\n background-color: transparent;\n }\n}";
52
52
 
53
- var css_248z$2q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
53
+ var css_248z$2q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
54
54
 
55
- var css_248z$2p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
55
+ var css_248z$2p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
56
56
 
57
- var css_248z$2o = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n label {\n cursor: pointer;\n display: grid;\n line-height: 1.25;\n gap: calc(var(--spacing) * 2);\n width: 100%;\n }\n input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* RADIO */\n fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n display: grid;\n gap: 0.25em;\n }\n .radio-input-wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-input-wrapper label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .radio-input-wrapper input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n }\n .kol-alert.error {\n order: 3;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset legend {\n order: 2;\n display: contents;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) input:focus,\n fieldset.error:not(.hidden-error) select:focus,\n fieldset.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert.error {\n margin-left: -0.25em;\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n align-items: flex-start;\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
57
+ var css_248z$2o = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n label {\n cursor: pointer;\n display: grid;\n line-height: 1.25;\n gap: calc(var(--spacing) * 2);\n width: 100%;\n }\n input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* RADIO */\n fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n display: grid;\n gap: 0.25em;\n }\n .radio-input-wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-input-wrapper label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .radio-input-wrapper input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n }\n .kol-alert.error {\n order: 3;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset legend {\n order: 2;\n display: contents;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) input:focus,\n fieldset.error:not(.hidden-error) select:focus,\n fieldset.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert.error {\n margin-left: -0.25em;\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n align-items: flex-start;\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
58
58
 
59
- var css_248z$2n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
59
+ var css_248z$2n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
60
60
 
61
- var css_248z$2m = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
61
+ var css_248z$2m = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
62
62
 
63
63
  var css_248z$2l = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
64
64
 
65
- var css_248z$2k = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--a11y-min-size);\n border-style: solid;\n outline-width: calc(var(--border-width) * 2);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
65
+ var css_248z$2k = "@layer kol-theme-component {\n .kol-link:focus {\n outline: none;\n }\n .kol-link--primary {\n --text-background-color: var(--color-primary);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-light);\n }\n .kol-link--secondary, .kol-link--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .kol-link--danger {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n --text-color: var(--color-light);\n }\n .kol-link--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-link--primary:not([disabled]):hover, .kol-link--secondary:not([disabled]):hover, .kol-link--normal:not([disabled]):hover, .kol-link--danger:not([disabled]):hover, .kol-link--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-link--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-link__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-link__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-link--hide-label .kol-link__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-link--hide-label .kol-link__text .span-label {\n display: none;\n }\n .kol-link:focus {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-link:disabled:hover .kol-link__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n .kol-link .badge-text-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n :host {\n font-family: var(--font-family);\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link__text {\n font-weight: 700;\n border-style: solid;\n border-radius: var(--a11y-min-size);\n outline-width: calc(var(--border-width) * 2);\n }\n .kol-link:focus .kol-link__text {\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n }\n .kol-link:disabled:hover .kol-link__text {\n box-shadow: none;\n }\n .kol-link:focus:hover .kol-link__text {\n box-shadow: none;\n }\n}";
66
66
 
67
- var css_248z$2j = "@layer kol-theme-component {\n :host {\n font-family: inherit;\n }\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n line-height: 1;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n}";
67
+ var css_248z$2j = "@layer kol-theme-component {\n .kol-link {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link:visited {\n color: var(--visited);\n }\n .kol-link:focus .kol-link__text {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .span-label {\n text-decoration-thickness: 0.25em;\n }\n :host {\n font-family: inherit;\n }\n .kol-link {\n line-height: 1;\n }\n}";
68
68
 
69
- var css_248z$2i = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n nav {\n background-color: var(--color-mute);\n }\n ul {\n list-style: none;\n }\n .kol-link-wc {\n display: flex;\n }\n .entry-item a,\n .entry-item .button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .button {\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .horizontal .entry-item a,\n .horizontal .entry-item .button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .entry-item a:hover {\n text-decoration: underline;\n }\n .list .list {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .active .entry-item a,\n .active .entry-item .button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .button {\n font-weight: normal;\n border-left-color: transparent;\n }\n .expand-button {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .expand-button .button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .expand-button .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .expand-button .button-inner {\n justify-content: center;\n }\n}";
69
+ var css_248z$2i = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n nav {\n background-color: var(--color-mute);\n }\n ul {\n list-style: none;\n }\n .kol-button__text {\n display: flex;\n }\n .entry-item a,\n .entry-item .kol-button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .kol-button {\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .horizontal .entry-item a,\n .horizontal .entry-item .kol-button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .kol-button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .kol-button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .entry-item a:hover {\n text-decoration: underline;\n }\n .list .list {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .active .entry-item a,\n .active .entry-item .kol-button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .kol-button {\n font-weight: normal;\n border-left-color: transparent;\n }\n .expand-button {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button .expand-button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .expand-button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .expand-button .kol-button__text {\n justify-content: center;\n }\n}";
70
70
 
71
- var css_248z$2h = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected button {\n opacity: 1;\n }\n .selected .button-inner {\n background-color: var(--color-primary);\n color: var(--color-light);\n border: 0;\n }\n}";
71
+ var css_248z$2h = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-pagination__button--selected .kol-button {\n opacity: 1;\n }\n .kol-button__text {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\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__text {\n background-color: var(--color-primary);\n color: var(--color-light);\n border: 0;\n }\n .kol-button:focus .kol-button__text {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .kol-button:active .kol-button__text {\n color: var(--color-light);\n outline: none;\n }\n}";
72
72
 
73
73
  var css_248z$2g = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host progress,\n :host span {\n display: block;\n height: 0;\n overflow: hidden;\n width: 0;\n }\n :host svg line:first-child,\n :host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n }\n :host svg line:last-child,\n :host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n }\n .cycle .progress {\n stroke: var(--color-primary-variant);\n }\n}";
74
74
 
75
- var css_248z$2f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select option:active:not(:disabled), select option:checked:not(:disabled), select option:focus:not(:disabled), select option:hover:not(:disabled) {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
75
+ var css_248z$2f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-theme-component {\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select option:active:not(:disabled), select option:checked:not(:disabled), select option:focus:not(:disabled), select option:hover:not(:disabled) {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
76
76
 
77
- var css_248z$2e = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
77
+ var css_248z$2e = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
78
78
 
79
- var css_248z$2d = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc > a > .kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
79
+ var css_248z$2d = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link__text {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
80
80
 
81
- var css_248z$2c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
81
+ var css_248z$2c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .main-button :is(a, button) > .kol-span-wc {\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n }\n .secondary-button :is(a, button) > .kol-span-wc {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n .kol-button:focus {\n outline: none;\n }\n .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-button--secondary, .kol-button--normal {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-primary);\n --text-color: var(--color-primary);\n }\n .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-button--ghost {\n --text-background-color: var(--color-light);\n --text-border-color: var(--color-light);\n --text-color: var(--color-primary);\n --text-box-shadow: none;\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n --text-background-color: var(--color-primary-variant);\n --text-border-color: var(--color-primary-variant);\n --text-color: var(--color-light);\n }\n .kol-button--danger:not([disabled]):hover {\n --text-background-color: var(--color-danger);\n --text-border-color: var(--color-danger);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n .kol-button:focus {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .kol-button:disabled:hover .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n box-shadow: none;\n }\n .kol-button .badge-text-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
82
82
 
83
- var css_248z$2b = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
83
+ var css_248z$2b = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .kol-button,\n th[aria-sort=descending] .kol-button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
84
84
 
85
- var css_248z$2a = "@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
85
+ var css_248z$2a = "@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .kol-button,\n th[aria-sort=descending] .kol-button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
86
86
 
87
87
  var css_248z$29 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .tabs-button-group {\n display: inline-flex;\n gap: calc(32rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n }\n button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) .kol-span-wc > span {\n padding-bottom: 0.25em;\n }\n button.selected .kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .tabs-button-group {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .tabs-button-group {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .tabs-button-group {\n order: 2;\n }\n :host > .tabs-align-bottom .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-top .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n gap: inherit;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .tabs-button-group button {\n border: none;\n }\n}";
88
88
 
89
- var css_248z$28 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
89
+ var css_248z$28 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
90
90
 
91
- var css_248z$27 = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n }\n .toast {\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
91
+ var css_248z$27 = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n }\n .toast {\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert {\n display: flex;\n width: 100%;\n overflow: unset;\n background-color: var(--color-light);\n }\n .kol-alert--msg {\n align-items: start;\n }\n .kol-alert--card {\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--alert-accent-color);\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-subtle);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-danger);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-primary);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-success);\n }\n .kol-alert--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--card .kol-alert__container {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--alert-accent-color);\n }\n .kol-alert__container-content {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__container-content {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__close-button {\n place-self: center;\n }\n .kol-alert__close-button .kol-button {\n border-radius: 50%;\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-alert--msg .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-button {\n color: var(--color-light);\n }\n .kol-alert__close-button .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading {\n color: var(--alert-accent-color);\n padding-top: calc(--var-spacing / 2);\n }\n .kol-alert--card .kol-alert__heading {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .kol-alert__heading-icon {\n color: var(--color-light);\n padding: 0;\n }\n .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n place-items: baseline;\n }\n .kol-alert--card .kol-alert__heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
92
92
 
93
93
  var css_248z$26 = "@layer kol-theme-component {\n .toolbar {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n background-color: var(--color-light);\n border-width: var(--border-width);\n border-style: solid;\n }\n}";
94
94
 
@@ -147,7 +147,7 @@ var css_248z$23 = "@layer kol-theme-global {\n .kol-tooltip-wc .tooltip-area {\
147
147
 
148
148
  var css_248z$22 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion {\n background-color: var(--color-grey-5);\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button button {\n text-align: left;\n width: 100%;\n padding: 0 var(--spacing-m);\n display: flex;\n place-items: center;\n line-height: 1.2;\n }\n .kol-accordion__heading-button button span {\n color: var(--color-grey);\n font-weight: var(--font-weight-bold);\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) 0;\n width: 100%;\n border: none;\n }\n .kol-accordion__heading-button button:focus, .kol-accordion__heading-button button:hover {\n background-color: var(--color-grey-25);\n }\n .kol-accordion__heading-button button:focus {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button .kol-icon {\n margin-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n margin-inline-end: calc(16rem / var(--kolibri-root-font-size, 16));\n margin-inline-start: 0;\n margin-top: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__content {\n padding: var(--spacing-s) var(--spacing-m);\n }\n}";
149
149
 
150
- var css_248z$21 = "@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n }\n .kol-alert--msg {\n border: none;\n }\n .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--msg .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--card .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n}";
150
+ var css_248z$21 = "@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n }\n .kol-alert--msg {\n border: none;\n }\n .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--msg .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--card .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n}";
151
151
 
152
152
  var css_248z$20 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
153
153
 
@@ -155,77 +155,77 @@ var css_248z$1$ = "@layer kol-theme-component {\n .kol-badge {\n font: norma
155
155
 
156
156
  var css_248z$1_ = "@layer kol-theme-component {\n .kol-breadcrumb {\n font: normal normal 400 calc(14rem / var(--kolibri-root-font-size, 16))/calc(16rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: var(--font-weight-bold);\n }\n .kol-breadcrumb__icon::part(icon separator)::before {\n color: var(--color-blue);\n }\n .kol-breadcrumb__icon[exportparts*=separator] {\n margin-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n margin-inline-start: calc(8rem / var(--kolibri-root-font-size, 16));\n padding: 0;\n }\n .kol-breadcrumb__list-element:last-child {\n color: var(--color-grey-75);\n }\n .kol-breadcrumb__link {\n font-family: var(--font-family);\n }\n}";
157
157
 
158
- var css_248z$1Z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-radius: 0;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n a,\n button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: calc(-6rem / var(--kolibri-root-font-size, 16));\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
158
+ var css_248z$1Z = "@layer kol-theme-component {\n .kol-button {\n font-family: var(--font-family);\n appearance: none;\n outline: none;\n text-decoration: none;\n --text-focus-outline-color: var(--color-black);\n }\n .kol-button:focus {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--primary:hover {\n --text-background-color: var(--color-blue-130);\n --text-border-color: var(--color-blue-130);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-white);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-blue);\n }\n .kol-button--secondary:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--secondary:hover {\n --text-border-color: var(--color-blue-130);\n --text-color: var(--color-blue-130);\n }\n .kol-button--normal {\n --text-background-color: var(--color-yellow);\n --text-border-color: var(--color-yellow);\n --text-color: var(--color-black);\n }\n .kol-button--normal:hover {\n --text-background-color: var(--color-yellow-120);\n --text-border-color: var(--color-yellow-120);\n }\n .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-button--danger:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--danger:hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--ghost:hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n border-radius: 0;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: calc(-6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n }\n}";
159
159
 
160
160
  var css_248z$1Y = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--spacing-2xs);\n }\n}";
161
161
 
162
- var css_248z$1X = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n font-size: inherit;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n :is(a, button):hover .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
162
+ var css_248z$1X = "@layer kol-theme-component {\n .kol-button {\n font-family: var(--font-family);\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-button:hover {\n color: var(--color-blue-130);\n }\n .badge-text-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
163
163
 
164
164
  var css_248z$1W = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: white;\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n :host .kol-heading-wc {\n display: inline-flex;\n font-style: normal;\n font-weight: 700;\n font-size: 1.25em;\n line-height: 1.75em;\n }\n :host div.header {\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n }\n :host div.content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n overflow: hidden;\n }\n :host div.footer {\n padding: var(--spacing-xs) var(--spacing-m);\n }\n :host > div > div.content + div.footer {\n border-top: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n}";
165
165
 
166
- var css_248z$1V = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .combobox__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
166
+ var css_248z$1V = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .combobox__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
167
167
 
168
168
  var css_248z$1U = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button:focus-within {\n cursor: pointer;\n }\n .details__heading-button button .kol-span-wc .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .details__content.indented-text {\n font-family: var(--font-family);\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n margin: 0;\n }\n}";
169
169
 
170
170
  var css_248z$1T = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
171
171
 
172
- var css_248z$1S = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n width: 100%;\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc a,\n .kol-link-wc button {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link-wc a:hover,\n .kol-link-wc button:hover {\n color: var(--color-blue-130);\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n }\n .kol-alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
172
+ var css_248z$1S = "@layer kol-theme-component {\n .kol-link {\n font-family: var(--font-family);\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n :host {\n font-family: var(--font-family);\n width: 100%;\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form__link {\n display: inline-block;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n }\n .kol-alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
173
173
 
174
174
  var css_248z$1R = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .headline-h1 {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n }\n .headline-h2 {\n font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n line-height: 1.143;\n }\n .headline-h3 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.1667;\n }\n .headline-h4 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.4;\n }\n .headline-h5 {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n .headline-h6 {\n color: rgb(234, 0, 255);\n }\n}";
175
175
 
176
176
  var css_248z$1Q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-indented-text-wc > div {\n font-family: var(--font-family);\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n }\n}";
177
177
 
178
- var css_248z$1P = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n background-color: var(--color-white);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n color: var(--color-grey);\n line-height: 1.5;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
178
+ var css_248z$1P = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n background-color: var(--color-white);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n color: var(--color-grey);\n line-height: 1.5;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
179
179
 
180
- var css_248z$1O = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
180
+ var css_248z$1O = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
181
181
 
182
- var css_248z$1N = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
182
+ var css_248z$1N = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
183
183
 
184
- var css_248z$1M = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
184
+ var css_248z$1M = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
185
185
 
186
- var css_248z$1L = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
186
+ var css_248z$1L = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
187
187
 
188
- var css_248z$1K = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
188
+ var css_248z$1K = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
189
189
 
190
- var css_248z$1J = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
190
+ var css_248z$1J = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
191
191
 
192
- var css_248z$1I = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n fieldset {\n border: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n }\n .input-slot {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n fieldset .kol-alert {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n align-items: center;\n display: flex;\n flex-direction: row;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:focus {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 1;\n width: 100%;\n }\n .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n order: 4;\n }\n}";
192
+ var css_248z$1I = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n fieldset {\n border: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n }\n .input-slot {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n fieldset .kol-alert {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n align-items: center;\n display: flex;\n flex-direction: row;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:focus {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 1;\n width: 100%;\n }\n .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n order: 4;\n }\n}";
193
193
 
194
- var css_248z$1H = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
194
+ var css_248z$1H = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
195
195
 
196
- var css_248z$1G = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
196
+ var css_248z$1G = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
197
197
 
198
- var css_248z$1F = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n a,\n button {\n appearance: none;\n color: var(--color-blue);\n text-decoration: underline;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
198
+ var css_248z$1F = "@layer kol-theme-component {\n .kol-link {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n appearance: none;\n color: var(--color-blue);\n text-decoration: underline;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n}";
199
199
 
200
200
  var css_248z$1E = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
201
201
 
202
- var css_248z$1D = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n a,\n button {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
202
+ var css_248z$1D = "@layer kol-theme-component {\n .kol-link {\n font-family: var(--font-family);\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n}";
203
203
 
204
- var css_248z$1C = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .list.vertical {\n flex-direction: column;\n }\n .entry {\n display: flex;\n }\n .entry .kol-button-wc:first-child,\n .entry .kol-link-wc,\n .entry .kol-span-wc {\n flex-grow: 1;\n }\n /* custom. */\n nav {\n background-color: var(--color-blue);\n }\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .expand-button button {\n background-color: var(--color-blue-130);\n margin: auto;\n height: 100%;\n }\n .kol-span-wc {\n border-color: transparent;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n color: var(--color-white);\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n justify-items: start;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 100%;\n }\n li > ul,\n li + li {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n a {\n text-decoration: none;\n }\n :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {\n border-color: var(--color-white);\n }\n :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,\n :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {\n text-decoration: underline;\n }\n div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .expanded > div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n}";
204
+ var css_248z$1C = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .list.vertical {\n flex-direction: column;\n }\n .entry {\n display: flex;\n }\n .entry .kol-button-wc:first-child,\n .entry .kol-link,\n .entry .kol-span-wc {\n flex-grow: 1;\n }\n /* custom. */\n nav {\n background-color: var(--color-blue);\n }\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .expand-button button {\n background-color: var(--color-blue-130);\n margin: auto;\n height: 100%;\n }\n .kol-span-wc {\n border-color: transparent;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n color: var(--color-white);\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n justify-items: start;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 100%;\n }\n li > ul,\n li + li {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n a {\n text-decoration: none;\n }\n :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc {\n border-color: var(--color-white);\n }\n :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc,\n :is(.kol-button-wc, .kol-link):hover .kol-span-wc {\n text-decoration: underline;\n }\n div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .expanded > div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n}";
205
205
 
206
- var css_248z$1B = "@layer kol-theme-component {\n :host {\n display: grid;\n font-family: var(--font-family);\n }\n .button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n .button-inner {\n background-color: var(--color-yellow);\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n color: var(--color-black);\n font-weight: var(--font-weight-bold);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n }\n .button:not(:disabled):hover .button-inner {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .button:focus .button-inner {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-black);\n }\n .button:disabled .button-inner {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .selected .button-inner {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n opacity: 1;\n text-decoration: underline;\n }\n}";
206
+ var css_248z$1B = "@layer kol-theme-component {\n :host {\n display: grid;\n font-family: var(--font-family);\n }\n .kol-button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n .kol-button__text {\n background-color: var(--color-yellow);\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n color: var(--color-black);\n font-weight: var(--font-weight-bold);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n }\n .kol-button:not(:disabled):hover .kol-button__text {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .kol-button:focus .kol-button__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-black);\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n opacity: 1;\n text-decoration: underline;\n }\n .kol-button:disabled .kol-button__text {\n cursor: not-allowed;\n opacity: 0.5;\n }\n}";
207
207
 
208
208
  var css_248z$1A = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host progress,\n :host span {\n display: block;\n height: 0;\n overflow: hidden;\n width: 0;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-grey-25);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-blue-130);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
209
209
 
210
- var css_248z$1z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
210
+ var css_248z$1z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
211
211
 
212
- var css_248z$1y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n display: inline-flex;\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .single-select__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n cursor: pointer;\n padding-left: 1em;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 1rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n }\n .single-select__item {\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: 1em;\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
212
+ var css_248z$1y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n display: inline-flex;\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .single-select__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n cursor: pointer;\n padding-left: 1em;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 1rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n }\n .single-select__item {\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: 1em;\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
213
213
 
214
- var css_248z$1x = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc > a > .kol-span-wc {\n border-radius: 0;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n font-weight: var(--font-weight-bold);\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: 0.25em 0.75em;\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n cursor: pointer;\n }\n}";
214
+ var css_248z$1x = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link__text {\n border-radius: 0;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n font-weight: var(--font-weight-bold);\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: 0.25em 0.75em;\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n cursor: pointer;\n }\n}";
215
215
 
216
216
  var css_248z$1w = "@layer kol-theme-component {\n .cycle {\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .cycle span {\n background-color: var(--color-blue-75);\n }\n}";
217
217
 
218
- var css_248z$1v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: 0;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n }\n .popover {\n background-color: #fff;\n }\n .horizontal-line {\n border: 0;\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n padding: 0.25em 0.75em;\n }\n a,\n button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: calc(-6rem / var(--kolibri-root-font-size, 16));\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
218
+ var css_248z$1v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: 0;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n }\n .popover {\n background-color: #fff;\n }\n .horizontal-line {\n border: 0;\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n padding: 0.25em 0.75em;\n }\n .kol-button {\n font-family: var(--font-family);\n appearance: none;\n outline: none;\n text-decoration: none;\n --text-focus-outline-color: var(--color-black);\n }\n .kol-button:focus {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--primary {\n --text-background-color: var(--color-blue);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-white);\n }\n .kol-button--primary:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--primary:hover {\n --text-background-color: var(--color-blue-130);\n --text-border-color: var(--color-blue-130);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-white);\n --text-border-color: var(--color-blue);\n --text-color: var(--color-blue);\n }\n .kol-button--secondary:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--secondary:hover {\n --text-border-color: var(--color-blue-130);\n --text-color: var(--color-blue-130);\n }\n .kol-button--normal {\n --text-background-color: var(--color-yellow);\n --text-border-color: var(--color-yellow);\n --text-color: var(--color-black);\n }\n .kol-button--normal:hover {\n --text-background-color: var(--color-yellow-120);\n --text-border-color: var(--color-yellow-120);\n }\n .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-button--danger:focus {\n --text-focus-outline-color: var(--color-white);\n }\n .kol-button--danger:hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-button--ghost {\n --text-background-color: transparent;\n --text-border-color: transparent;\n --text-color: var(--color-blue);\n }\n .kol-button--ghost:focus {\n --text-focus-outline-color: var(--color-blue);\n }\n .kol-button--ghost:hover {\n --text-background-color: unset;\n --text-border-color: transparent;\n --text-color: var(--color-blue-130);\n }\n .kol-button__text {\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n border-radius: 0;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: calc(-6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n }\n}";
219
219
 
220
- var css_248z$1u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-family: var(--font-family);\n }\n :host > div,\n .kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n border-color: var(--color-grey-75);\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
220
+ var css_248z$1u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-family: var(--font-family);\n }\n :host > div,\n .kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .kol-button,\n th[aria-sort=descending] .kol-button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n border-color: var(--color-grey-75);\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
221
221
 
222
- var css_248z$1t = "@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-family: var(--font-family);\n }\n :host > div,\n .kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n border-color: var(--color-grey-75);\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
222
+ var css_248z$1t = "@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-family: var(--font-family);\n }\n :host > div,\n .kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .kol-button,\n th[aria-sort=descending] .kol-button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n border-color: var(--color-grey-75);\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
223
223
 
224
224
  var css_248z$1s = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group {\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-25);\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button .kol-span-wc {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button.selected .kol-span-wc {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-color: white;\n border-top-color: var(--color-blue);\n box-shadow: 0 calc(-3rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n }\n .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .tabs-button-group button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
225
225
 
226
- var css_248z$1r = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
226
+ var css_248z$1r = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
227
227
 
228
- var css_248z$1q = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n display: block;\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert {\n font-family: var(--font-family);\n }\n .toast .kol-alert--msg {\n border: none;\n }\n .toast .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .toast .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .toast .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .toast .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .toast .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .toast .kol-alert__container {\n background-color: var(--color-white);\n }\n .toast .kol-alert--card .toast .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--msg .toast .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .toast .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--card .toast .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--msg .toast .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .toast .kol-alert--card .toast .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--card .toast .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .alert {\n display: block;\n }\n}";
228
+ var css_248z$1q = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n display: block;\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert {\n font-family: var(--font-family);\n }\n .toast .kol-alert--msg {\n border: none;\n }\n .toast .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .toast .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .toast .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .toast .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .toast .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .toast .kol-alert__container {\n background-color: var(--color-white);\n }\n .toast .kol-alert--card .toast .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--msg .toast .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .toast .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--card .toast .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--msg .toast .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .toast .kol-alert--card .toast .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--card .toast .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .alert {\n display: block;\n }\n}";
229
229
 
230
230
  var css_248z$1p = "@layer kol-theme-component {\n .toolbar {\n padding: var(--spacing-s);\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-grey-5);\n }\n}";
231
231
 
@@ -285,7 +285,7 @@ var css_248z$1m = "@layer kol-theme-global {\n .kol-tooltip-wc .tooltip-area {\
285
285
 
286
286
  var css_248z$1l = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion {\n border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n margin: 0;\n overflow: hidden;\n }\n .kol-accordion__heading {\n font-size: 2em;\n }\n .kol-accordion__heading-button button {\n border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n outline-offset: calc(-1rem / var(--kolibri-root-font-size, 16));\n border: 0;\n border-bottom-color: #cfdaf5;\n border-bottom-style: solid;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n color: #171a22;\n position: relative;\n display: block;\n font: normal normal 400 calc(18rem / var(--kolibri-root-font-size, 16))/calc(28rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n padding: calc(24rem / var(--kolibri-root-font-size, 16));\n text-align: start;\n width: 100%;\n line-height: 1.2;\n }\n .kol-accordion__heading-button button .button-inner > span {\n align-items: baseline;\n }\n .kol-accordion__heading-button button::before {\n background-color: #fc0;\n border-end-end-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n height: calc(4rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n left: calc(24rem / var(--kolibri-root-font-size, 16));\n top: 0;\n width: 3rem 2;\n }\n .kol-accordion__heading-button .kol-icon {\n margin-right: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-accordion__heading-button .kol-icon::part(icon)::before {\n color: #0e47cb;\n font-weight: 900;\n font-family: \"Font Awesome 6 Free\";\n }\n .kol-accordion__content {\n -webkit-border-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-margin-start: 0;\n border-bottom: calc(2rem / var(--kolibri-root-font-size, 16)) solid #cfdaf5;\n border-inline-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n color: #515560;\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(24rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n margin-inline-start: 0;\n padding: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .open .kol-accordion__heading-button button {\n border-start-end-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n border-start-start-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .open .kol-accordion__heading-button .kol-icon::part(icon)::before {\n content: \"\\f077\";\n }\n :not(.open) .kol-accordion__heading-button button .kol-icon::part(icon)::before {\n content: \"\\f078\";\n }\n}";
287
287
 
288
- var css_248z$1k = "@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n }\n .kol-alert--msg {\n border: none;\n }\n .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--msg .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--card .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n}";
288
+ var css_248z$1k = "@layer kol-theme-component {\n .kol-alert {\n font-family: var(--font-family);\n }\n .kol-alert--msg {\n border: none;\n }\n .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .kol-alert__container {\n background-color: var(--color-white);\n }\n .kol-alert--card .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--msg .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .kol-alert--card .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .kol-alert--msg .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .kol-alert--card .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--card .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n}";
289
289
 
290
290
  var css_248z$1j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
291
291
 
@@ -293,19 +293,19 @@ var css_248z$1i = "@layer kol-theme-component {\n .kol-badge {\n font: norma
293
293
 
294
294
  var css_248z$1h = "@layer kol-theme-component {\n .kol-breadcrumb {\n font-family: var(--font-family);\n }\n .kol-breadcrumb__link {\n font-family: var(--font-family);\n }\n}";
295
295
 
296
- var css_248z$1g = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n a,\n button {\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n color: #0e47cb;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
296
+ var css_248z$1g = "@layer kol-theme-component {\n .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n font-family: var(--font-family);\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n .kol-button--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-button--primary:hover {\n --text-background-color: #3e6cd5;\n }\n .kol-button--secondary {\n --text-background-color: #fff;\n --text-color: #0e47cb;\n --text-border-color: #0e47cb;\n --text-focus-outline-color: #fff;\n }\n .kol-button--secondary:hover {\n --text-color: #0e47cb;\n }\n .kol-button--normal {\n --text-background-color: #fc0;\n --text-color: #171a22;\n --text-focus-outline-color: #000;\n --text-border-color: #fc0;\n }\n .kol-button--normal:hover {\n --text-background-color: #fc0;\n }\n .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-button--danger:hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-button--ghost {\n --text-color: #0e47cb;\n --text-focus-outline-color: #0e47cb;\n }\n .kol-button--ghost:hover {\n --text-color: #0e47cb;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button__text:active, .kol-button__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-button--secondary .kol-button__text {\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n }\n .kol-button--secondary.button:focus-visible .kol-button__text {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-button:focus-visible .kol-button__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n}";
297
297
 
298
298
  var css_248z$1f = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n gap: var(--spacing-2xs);\n }\n}";
299
299
 
300
- var css_248z$1e = "@layer kol-theme-component {\n a,\n button {\n appearance: none;\n color: var(--color-blue);\n text-decoration: underline;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
300
+ var css_248z$1e = "@layer kol-theme-component {\n .kol-button {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-button:hover {\n color: var(--color-blue-130);\n }\n}";
301
301
 
302
302
  var css_248z$1d = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: white;\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n :host .kol-heading-wc {\n display: inline-flex;\n font-style: normal;\n font-weight: 700;\n font-size: 1.25em;\n line-height: 1.75;\n }\n :host div.header {\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n }\n :host div.content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n overflow: hidden;\n }\n :host div.footer {\n padding: var(--spacing-xs) var(--spacing-m);\n }\n :host > div > div.content + div.footer {\n border-top: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n}";
303
303
 
304
- var css_248z$1c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-input .error {\n order: 1;\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .combobox {\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .combobox__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
304
+ var css_248z$1c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-input .error {\n order: 1;\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .combobox {\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .combobox__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
305
305
 
306
306
  var css_248z$1b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button:focus-within {\n cursor: pointer;\n }\n .details__heading-button button .kol-span-wc .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .details__content.indented-text {\n font-family: var(--font-family);\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n }\n}";
307
307
 
308
- var css_248z$1a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n width: 100%;\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc a,\n .kol-link-wc button {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link-wc a:hover,\n .kol-link-wc button:hover {\n color: var(--color-blue-130);\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
308
+ var css_248z$1a = "@layer kol-theme-component {\n .kol-link {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n :host {\n font-family: var(--font-family);\n width: 100%;\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form__link {\n display: inline-block;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
309
309
 
310
310
  var css_248z$19 = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
311
311
 
@@ -313,57 +313,57 @@ var css_248z$18 = "@layer kol-theme-component {\n :host {\n font-family: var
313
313
 
314
314
  var css_248z$17 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-indented-text-wc > div {\n font-family: var(--font-family);\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
315
315
 
316
- var css_248z$16 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n background-color: var(--color-white);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n color: var(--color-grey);\n line-height: 1.5;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
316
+ var css_248z$16 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n background-color: var(--color-white);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n color: var(--color-grey);\n line-height: 1.5;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
317
317
 
318
- var css_248z$15 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
318
+ var css_248z$15 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
319
319
 
320
- var css_248z$14 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
320
+ var css_248z$14 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
321
321
 
322
- var css_248z$13 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
322
+ var css_248z$13 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
323
323
 
324
- var css_248z$12 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
324
+ var css_248z$12 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
325
325
 
326
- var css_248z$11 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
326
+ var css_248z$11 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
327
327
 
328
- var css_248z$10 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
328
+ var css_248z$10 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
329
329
 
330
- var css_248z$$ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n fieldset {\n border: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n }\n fieldset .kol-alert {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n align-items: center;\n display: flex;\n flex-direction: row;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:focus {\n outline-color: var(--color-blue);\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 1;\n width: 100%;\n }\n .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n order: 4;\n }\n}";
330
+ var css_248z$$ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n fieldset {\n border: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n }\n fieldset .kol-alert {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n align-items: center;\n display: flex;\n flex-direction: row;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio]:focus {\n outline-color: var(--color-blue);\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 1;\n width: 100%;\n }\n .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n order: 4;\n }\n}";
331
331
 
332
- var css_248z$_ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
332
+ var css_248z$_ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
333
333
 
334
- var css_248z$Z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
334
+ var css_248z$Z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
335
335
 
336
336
  var css_248z$Y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
337
337
 
338
- var css_248z$X = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n a,\n button {\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n color: #0e47cb;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
338
+ var css_248z$X = "@layer kol-theme-component {\n .kol-link {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n font-family: var(--font-family);\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n .kol-link--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-link--primary:hover {\n --text-background-color: #3e6cd5;\n }\n .kol-link--secondary {\n --text-background-color: #fff;\n --text-color: #0e47cb;\n --text-border-color: #0e47cb;\n --text-focus-outline-color: #fff;\n }\n .kol-link--secondary:hover {\n --text-color: #0e47cb;\n }\n .kol-link--normal {\n --text-background-color: #fc0;\n --text-color: #171a22;\n --text-focus-outline-color: #000;\n --text-border-color: #fc0;\n }\n .kol-link--normal:hover {\n --text-background-color: #fc0;\n }\n .kol-link--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-link--danger:hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-link--ghost {\n --text-color: #0e47cb;\n --text-focus-outline-color: #0e47cb;\n }\n .kol-link--ghost:hover {\n --text-color: #0e47cb;\n }\n .kol-link:focus {\n outline: none;\n }\n .kol-link__text {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-link__text:active, .kol-link__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-link--secondary .kol-link__text {\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n }\n .kol-link--secondary.button:focus-visible .kol-link__text {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-link:focus-visible .kol-link__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link--hide-label .kol-link__text .span-label {\n display: none;\n }\n}";
339
339
 
340
- var css_248z$W = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n a,\n button {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
340
+ var css_248z$W = "@layer kol-theme-component {\n .kol-link {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n .kol-link:hover {\n color: var(--color-blue-130);\n }\n :host {\n font-family: var(--font-family);\n }\n}";
341
341
 
342
- var css_248z$V = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .list.vertical {\n flex-direction: column;\n }\n .entry {\n display: flex;\n }\n .entry .kol-button-wc:first-child,\n .entry .kol-link-wc,\n .entry .kol-span-wc {\n flex-grow: 1;\n }\n /* custom. */\n nav {\n background-color: var(--color-blue);\n }\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .expand-button button {\n background-color: var(--color-blue-130);\n margin: auto;\n height: 100%;\n }\n .kol-span-wc {\n border-color: transparent;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n color: var(--color-white);\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n justify-items: start;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 100%;\n }\n li > ul,\n li + li {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n a {\n text-decoration: none;\n }\n :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {\n border-color: var(--color-white);\n }\n :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,\n :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {\n text-decoration: underline;\n }\n div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .expanded > div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n}";
342
+ var css_248z$V = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .list.vertical {\n flex-direction: column;\n }\n .entry {\n display: flex;\n }\n .entry .kol-button-wc:first-child,\n .entry .kol-link,\n .entry .kol-span-wc {\n flex-grow: 1;\n }\n /* custom. */\n nav {\n background-color: var(--color-blue);\n }\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .expand-button button {\n background-color: var(--color-blue-130);\n margin: auto;\n height: 100%;\n }\n .kol-span-wc {\n border-color: transparent;\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n color: var(--color-white);\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n justify-items: start;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 100%;\n }\n li > ul,\n li + li {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n a {\n text-decoration: none;\n }\n :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc {\n border-color: var(--color-white);\n }\n :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc,\n :is(.kol-button-wc, .kol-link):hover .kol-span-wc {\n text-decoration: underline;\n }\n div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .expanded > div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n}";
343
343
 
344
- var css_248z$U = "@layer kol-theme-component {\n :host {\n display: grid;\n font-family: var(--font-family);\n }\n .button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n background-color: #fc0;\n color: #171a22;\n }\n .button:focus-visible .button-inner {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-black);\n }\n button:not(:disabled):active .button-inner,\n button:not(:disabled):hover .button-inner {\n background-color: #fc0;\n border-color: #fc0;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .button:disabled .button-inner {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .selected .button-inner {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n font-weight: bold;\n text-decoration: underline;\n opacity: 1;\n }\n}";
344
+ var css_248z$U = "@layer kol-theme-component {\n :host {\n display: grid;\n font-family: var(--font-family);\n }\n .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n background-color: #fc0;\n color: #171a22;\n }\n .kol-button:focus-visible .kol-button__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-black);\n }\n .kol-button:not(:disabled):active .kol-button__text, .kol-button:not(:disabled):hover .kol-button__text {\n background-color: #fc0;\n border-color: #fc0;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n font-weight: bold;\n text-decoration: underline;\n opacity: 1;\n }\n .kol-button:disabled .kol-button__text {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}";
345
345
 
346
346
  var css_248z$T = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
347
347
 
348
- var css_248z$S = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
348
+ var css_248z$S = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
349
349
 
350
- var css_248z$R = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .single-select {\n position: relative;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .single-select__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 2.5rem);\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n cursor: pointer;\n padding-left: 1em;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n display: flex;\n align-items: flex-start;\n justify-items: center;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: 1em;\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
350
+ var css_248z$R = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .single-select {\n position: relative;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n color: var(--color-grey);\n order: 4;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .single-select__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 2.5rem);\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n cursor: pointer;\n padding-left: 1em;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n display: flex;\n align-items: flex-start;\n justify-items: center;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: 1em;\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
351
351
 
352
- var css_248z$Q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc > a > .kol-span-wc {\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n background-color: #0e47cb;\n color: #fff;\n cursor: pointer;\n }\n}";
352
+ var css_248z$Q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link__text {\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n background-color: #0e47cb;\n color: #fff;\n cursor: pointer;\n }\n}";
353
353
 
354
354
  var css_248z$P = "@layer kol-theme-component {\n .cycle {\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .cycle span {\n background-color: var(--color-blue-80);\n }\n}";
355
355
 
356
- var css_248z$O = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .horizontal-line {\n border: 0;\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n .popover {\n background-color: #fff;\n }\n a,\n button {\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n color: #0e47cb;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
356
+ var css_248z$O = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-color: var(--color-blue);\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .horizontal-line {\n border: 0;\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n .popover {\n background-color: #fff;\n }\n .kol-button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --text-focus-outline-color: var(--color-white);\n font-family: var(--font-family);\n appearance: none;\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n .kol-button--primary {\n --text-background-color: #0e47cb;\n --text-color: #fff;\n --text-focus-outline-color: #fff;\n }\n .kol-button--primary:hover {\n --text-background-color: #3e6cd5;\n }\n .kol-button--secondary {\n --text-background-color: #fff;\n --text-color: #0e47cb;\n --text-border-color: #0e47cb;\n --text-focus-outline-color: #fff;\n }\n .kol-button--secondary:hover {\n --text-color: #0e47cb;\n }\n .kol-button--normal {\n --text-background-color: #fc0;\n --text-color: #171a22;\n --text-focus-outline-color: #000;\n --text-border-color: #fc0;\n }\n .kol-button--normal:hover {\n --text-background-color: #fc0;\n }\n .kol-button--danger {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n --text-color: var(--color-white);\n }\n .kol-button--danger:hover {\n --text-background-color: var(--color-red);\n --text-border-color: var(--color-red);\n }\n .kol-button--ghost {\n --text-color: #0e47cb;\n --text-focus-outline-color: #0e47cb;\n }\n .kol-button--ghost:hover {\n --text-color: #0e47cb;\n }\n .kol-button:focus {\n outline: none;\n }\n .kol-button__text {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button__text:active, .kol-button__text:hover {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .kol-button--secondary .kol-button__text {\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n }\n .kol-button--secondary.button:focus-visible .kol-button__text {\n box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n }\n .kol-button:focus-visible .kol-button__text {\n outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n}";
357
357
 
358
- var css_248z$N = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .pagination {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n font-family: var(--font-family);\n display: block;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
358
+ var css_248z$N = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .pagination {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n font-family: var(--font-family);\n display: block;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .kol-button,\n th[aria-sort=descending] .kol-button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
359
359
 
360
- var css_248z$M = "@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n font-family: var(--font-family);\n display: block;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
360
+ var css_248z$M = "@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n font-family: var(--font-family);\n display: block;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .kol-button,\n th[aria-sort=descending] .kol-button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n border-color: var(--color-blue);\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
361
361
 
362
362
  var css_248z$L = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group {\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-25);\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button .kol-span-wc {\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button.selected .kol-span-wc {\n border-color: var(--color-grey-25);\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-color: white;\n border-top-color: var(--color-blue);\n box-shadow: 0 calc(-3rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n }\n .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .tabs-button-group button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
363
363
 
364
- var css_248z$K = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
364
+ var css_248z$K = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-alert {\n font-family: var(--font-family);\n }\n :host .kol-alert--msg {\n border: none;\n }\n :host .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n :host .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n :host .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n :host .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n :host .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n :host .kol-alert__container {\n background-color: var(--color-white);\n }\n :host .kol-alert--card :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--msg :host .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n :host .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n :host .kol-alert--msg :host .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .kol-alert--card :host .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert--card :host .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n }\n label {\n font-weight: var(--font-weight-bold);\n order: 1;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n order: 2;\n }\n .kol-alert {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 3;\n }\n .input {\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n color: var(--color-grey);\n order: 4;\n align-items: center;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
365
365
 
366
- var css_248z$J = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n display: block;\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert {\n font-family: var(--font-family);\n }\n .toast .kol-alert--msg {\n border: none;\n }\n .toast .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .toast .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .toast .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .toast .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .toast .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .toast .kol-alert__container {\n background-color: var(--color-white);\n }\n .toast .kol-alert--card .toast .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--msg .toast .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .toast .kol-alert__close-button .button {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--card .toast .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--msg .toast .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .toast .kol-alert--card .toast .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--card .toast .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .toast .heading {\n width: 100%;\n }\n .toast .heading .heading-content {\n flex: 1;\n }\n .alert {\n display: block;\n }\n}";
366
+ var css_248z$J = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n display: block;\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert {\n font-family: var(--font-family);\n }\n .toast .kol-alert--msg {\n border: none;\n }\n .toast .kol-alert--card {\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--default {\n --alert-accent-color: var(--color-grey);\n }\n .toast .kol-alert--error {\n --alert-accent-color: var(--color-red);\n }\n .toast .kol-alert--info {\n --alert-accent-color: var(--color-blue);\n }\n .toast .kol-alert--success {\n --alert-accent-color: var(--color-green);\n }\n .toast .kol-alert--warning {\n --alert-accent-color: var(--color-orange);\n }\n .toast .kol-alert__container {\n background-color: var(--color-white);\n }\n .toast .kol-alert--card .toast .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--msg .toast .kol-alert__container-content {\n padding: var(--spacing-2xs);\n }\n .toast .kol-alert__close-button .kol-button {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--card .toast .kol-alert__close-button .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert__heading-icon {\n color: var(--alert-accent-color);\n }\n .toast .kol-alert--msg .toast .kol-alert__heading-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .toast .kol-alert--card .toast .kol-alert__heading-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .kol-alert--card .toast .kol-alert__content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .toast .heading {\n width: 100%;\n }\n .toast .heading .heading-content {\n flex: 1;\n }\n .alert {\n display: block;\n }\n}";
367
367
 
368
368
  var css_248z$I = "@layer kol-theme-component {\n .toolbar {\n padding: var(--spacing-s);\n border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n background-color: var(--color-white);\n }\n}";
369
369
 
@@ -429,11 +429,11 @@ var css_248z$C = "@layer kol-theme-component {\n .kol-badge {\n display: inl
429
429
 
430
430
  var css_248z$B = "@layer kol-theme-component {\n .kol-breadcrumb__list-element-span {\n font-weight: bold;\n /* text-transform: uppercase; */\n }\n}";
431
431
 
432
- var css_248z$A = "@layer kol-theme-component {\n a,\n button {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border-width: var(--spacing);\n font-size: inherit;\n /*line-height: 1.25em;*/\n /*padding: calc(4 * var(--spacing));*/\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
432
+ var css_248z$A = "@layer kol-theme-component {\n .kol-button {\n background-color: transparent;\n }\n .kol-button--primary {\n --text-background-color: var(--color-petrol);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--primary:focus {\n --text-background-color: var(--color-achat);\n --text-border-color: var(--color-achat);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-petrol);\n }\n .kol-button--secondary:not([disabled]):hover, .kol-button--secondary:focus {\n --text-background-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--normal {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-anthrazit);\n --text-color: var(--color-anthrazit);\n }\n .kol-button--normal:not([disabled]):hover, .kol-button--normal:focus {\n --text-background-color: var(--color-anthrazit);\n --text-color: var(--color-weiss);\n }\n .kol-button--danger {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-blut);\n --text-color: var(--color-blut);\n }\n .kol-button--danger:hover, .kol-button--danger:focus {\n --text-background-color: var(--color-blut);\n --text-color: var(--color-weiss);\n }\n .kol-button--ghost {\n --text-background-color: var(--color-ghost);\n --text-border-color: transparent;\n --text-color: var(--color-anthrazit);\n }\n .kol-button--ghost:not([disabled]):hover, .kol-button--ghost:focus {\n --text-border-color: var(--color-ghost);\n }\n .kol-button__text {\n gap: 0.25em;\n transition-delay: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n .kol-button {\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border-width: var(--spacing);\n font-size: inherit;\n /*line-height: 1.25em;*/\n /*padding: calc(4 * var(--spacing));*/\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
433
433
 
434
434
  var css_248z$z = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: inline-flex;\n flex-wrap: wrap;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
435
435
 
436
- var css_248z$y = "@layer kol-theme-component {\n a,\n button {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border-width: var(--spacing);\n font-size: inherit;\n /*line-height: 1.25em;*/\n /*padding: calc(4 * var(--spacing));*/\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
436
+ var css_248z$y = "@layer kol-theme-component {\n .kol-button {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n .kol-button--primary {\n --background-color: var(--color-petrol);\n --border-color: var(--color-petrol);\n --color: var(--color-weiss);\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--primary:focus {\n --background-color: var(--color-achat);\n --border-color: var(--color-achat);\n }\n .kol-button--secondary {\n --background-color: var(--color-weiss);\n --border-color: var(--color-petrol);\n --color: var(--color-petrol);\n }\n .kol-button--secondary:not([disabled]):hover, .kol-button--secondary:focus {\n --background-color: var(--color-petrol);\n --border-color: var(--color-petrol);\n --color: var(--color-weiss);\n }\n .kol-button--normal {\n --background-color: var(--color-weiss);\n --border-color: var(--color-anthrazit);\n --color: var(--color-anthrazit);\n }\n .kol-button--normal:not([disabled]):hover, .kol-button--normal:focus {\n --background-color: var(--color-anthrazit);\n --border-color: var(--color-anthrazit);\n --color: var(--color-weiss);\n }\n .kol-button--danger {\n --background-color: var(--color-weiss);\n --border-color: var(--color-blut);\n --color: var(--color-blut);\n }\n .kol-button--danger:not([disabled]):hover, .kol-button--danger:focus {\n --background-color: var(--color-blut);\n --border-color: var(--color-blut);\n --color: var(--color-weiss);\n }\n .kol-button--ghost {\n --background-color: var(--color-ghost);\n --border-color: transparent;\n --color: var(--color-anthrazit);\n }\n .kol-button--ghost:not([disabled]):hover, .kol-button--ghost:focus {\n --background-color: var(--color-ghost);\n --border-color: var(--color-ghost);\n --color: var(--color-anthrazit);\n }\n .kol-button__text {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border-width: var(--spacing);\n font-size: inherit;\n /*line-height: 1.25em;*/\n /*padding: calc(4 * var(--spacing));*/\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n background-color: var(--background-color);\n border-color: var(--border-color);\n color: var(--color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n}";
437
437
 
438
438
  var css_248z$x = "@layer kol-theme-component {\n :host > div {\n background-color: white;\n border-color: var(--border-color);\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(2 * var(--border-radius));\n width: 100%;\n height: 100%;\n }\n .kol-heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n display: block;\n border-bottom-style: solid;\n border-bottom-color: var(--border-color);\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host > div > div {\n display: block;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div > div:last-child {\n display: block;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-top-color: var(--color-achat);\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}";
439
439
 
@@ -443,7 +443,7 @@ var css_248z$v = "@layer kol-theme-component {\n :host {\n font-family: var(
443
443
 
444
444
  var css_248z$u = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 0.25em gray;\n }\n}";
445
445
 
446
- var css_248z$t = "@layer kol-theme-component {\n .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc .kol-link-wc a,\n .kol-link-wc .kol-button-wc button {\n text-decoration-line: none;\n }\n .kol-link-wc a,\n .kol-link-wc button {\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-repeat: no-repeat;\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n border-radius: var(--spacing);\n color: var(--color-petrol);\n font-family: var(--font-family-sans);\n font-size: inherit;\n /* text-transform: uppercase; */\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc a:focus,\n .kol-link-wc a:hover,\n .kol-link-wc button:focus,\n .kol-link-wc button:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n .kol-link-wc a > .kol-span-wc,\n .kol-link-wc button > .kol-span-wc {\n gap: 0.25em;\n }\n .kol-link-wc a.skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .kol-link-wc a.skip:focus {\n background-color: white;\n box-shadow: 0 0 calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) white;\n left: unset;\n position: unset;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n border-left: calc(4rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n padding: 0.25em 0.5em;\n margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n .kol-alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
446
+ var css_248z$t = "@layer kol-theme-component {\n .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n .kol-link {\n text-decoration-line: none;\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-repeat: no-repeat;\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n border-radius: var(--spacing);\n color: var(--color-petrol);\n font-family: var(--font-family-sans);\n font-size: inherit;\n /* text-transform: uppercase; */\n transition-delay: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n .kol-link__text {\n gap: 0.25em;\n }\n .kol-form__link {\n display: inline-block;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n border-left: calc(4rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n padding: 0.25em 0.5em;\n margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n .kol-alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
447
447
 
448
448
  var css_248z$s = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n margin: 0;\n padding: 0;\n }\n .headline-h1 {\n font-family: var(--font-family-serif);\n font-size: calc(54rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h2 {\n font-family: var(--font-family-serif);\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h3 {\n font-family: var(--font-family-serif);\n font-size: calc(26rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h4 {\n font-family: var(--font-family-serif);\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n font-weight: normal;\n line-height: 1;\n }\n .headline-h5 {\n font-family: var(--font-family-serif);\n font-size: calc(17rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n line-height: 1;\n }\n .headline-h6 {\n font-family: var(--font-family-sans);\n font-size: calc(17rem / var(--kolibri-root-font-size, 16));\n font-weight: normal;\n line-height: 1;\n }\n}";
449
449
 
@@ -467,13 +467,13 @@ var css_248z$j = "@layer kol-theme-component {\n label {\n font-size: calc(1
467
467
 
468
468
  var css_248z$i = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n :host .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n :host .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n :host .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n :host .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n cursor: pointer;\n width: 100%;\n overflow: hidden;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
469
469
 
470
- var css_248z$h = "@layer kol-theme-component {\n .kol-link-wc a,\n .kol-button-wc button {\n text-decoration-line: none;\n }\n a,\n button {\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-repeat: no-repeat;\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n border-radius: var(--spacing);\n color: var(--color-petrol);\n font-family: var(--font-family-sans);\n font-size: inherit;\n /* text-transform: uppercase; */\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n a:focus,\n a:hover,\n button:focus,\n button:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n }\n a.skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n a.skip:focus {\n background-color: white;\n box-shadow: 0 0 calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) white;\n left: unset;\n position: unset;\n }\n}";
470
+ var css_248z$h = "@layer kol-theme-component {\n .kol-link {\n text-decoration-line: none;\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-repeat: no-repeat;\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n border-radius: var(--spacing);\n color: var(--color-petrol);\n font-family: var(--font-family-sans);\n font-size: inherit;\n /* text-transform: uppercase; */\n transition-delay: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n .kol-link__text {\n gap: 0.25em;\n }\n}";
471
471
 
472
- var css_248z$g = "@layer kol-theme-component {\n .kol-link-wc a,\n .kol-button-wc button {\n text-decoration-line: none;\n }\n a,\n button {\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-repeat: no-repeat;\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n border-radius: var(--spacing);\n color: var(--color-petrol);\n font-family: var(--font-family-sans);\n font-size: inherit;\n /* text-transform: uppercase; */\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n a:focus,\n a:hover,\n button:focus,\n button:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n }\n a.skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n a.skip:focus {\n background-color: white;\n box-shadow: 0 0 calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) white;\n left: unset;\n position: unset;\n }\n}";
472
+ var css_248z$g = "@layer kol-theme-component {\n .kol-link {\n text-decoration-line: none;\n background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n background-repeat: no-repeat;\n background-position: left 0 bottom 0;\n background-size: 25% 0.25ex;\n border-radius: var(--spacing);\n color: var(--color-petrol);\n font-family: var(--font-family-sans);\n font-size: inherit;\n /* text-transform: uppercase; */\n transition-delay: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link:hover {\n background-size: 100% 0.25ex;\n color: var(--color-achat);\n }\n .kol-link__text {\n gap: 0.25em;\n }\n}";
473
473
 
474
- var css_248z$f = "@layer kol-theme-component {\n :host > div > nav ul {\n list-style: none;\n margin: 0;\n padding: 0;\n border-radius: var(--border-radius);\n background-color: var(--color-petrol);\n }\n :host > div > nav ul > li {\n border-radius: var(--border-radius);\n overflow: hidden;\n padding: 0.125em;\n }\n :host > div > nav ul > li[part*=vertical] + li {\n border-radius: 0;\n border-top: 0.1em dotted white;\n }\n :host > div > nav ul > li[part*=\"vertical selected\"] {\n border-right: 0.375em solid var(--color-citrin);\n }\n :host > div > nav ul > li[part*=horizontal] + li {\n border-radius: 0;\n border-left: 0.1em dotted white;\n }\n :host > div > nav ul > li[part*=\"horizontal selected\"] {\n border-bottom: 0.375em solid var(--color-citrin);\n }\n :host > div > nav ul > li > div {\n height: 100%;\n }\n :host > div > nav .kol-link-wc {\n width: 100%;\n /*height: 100%;font-weight: 600;*/\n display: block;\n }\n :host > div > nav .kol-link-wc a {\n border-radius: var(--border-radius);\n background-color: var(--color-petrol);\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n grid: flex;\n line-height: 2;\n padding: 0.5em;\n color: white;\n height: 100%;\n -webkit-box-align: center;\n align-items: center;\n display: flex;\n cursor: pointer;\n text-decoration: inherit;\n }\n :host > div > nav .kol-link-wc[exportparts*=selected] a {\n background-color: var(--color-achat);\n font-weight: 700;\n }\n :host > div > nav .kol-link-wc a .kol-icon.mr-2 {\n margin-right: calc(4 * var(--spacing));\n }\n :host > div > nav .kol-link-wc a .kol-icon.ml-2 {\n margin-left: calc(4 * var(--spacing));\n }\n :host > div > nav .kol-link-wc a:focus,\n :host > div > nav .kol-link-wc a:hover {\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid white;\n background-color: var(--color-fluorit);\n color: var(--color-anthrazit);\n }\n /* compact button */\n :host > div > div:last-child {\n margin-top: 0.5em;\n width: 100%;\n text-align: center;\n }\n :host > div > nav .kol-link-wc a.text-center {\n display: grid;\n align-items: center;\n justify-items: center;\n }\n /* horizontal */\n ul.flex {\n display: flex;\n }\n li > div > div.absolute {\n position: absolute;\n }\n .kol-span-wc {\n justify-items: baseline;\n }\n}";
474
+ var css_248z$f = "@layer kol-theme-component {\n :host > div > nav ul {\n list-style: none;\n margin: 0;\n padding: 0;\n border-radius: var(--border-radius);\n background-color: var(--color-petrol);\n }\n :host > div > nav ul > li {\n border-radius: var(--border-radius);\n overflow: hidden;\n padding: 0.125em;\n }\n :host > div > nav ul > li[part*=vertical] + li {\n border-radius: 0;\n border-top: 0.1em dotted white;\n }\n :host > div > nav ul > li[part*=\"vertical selected\"] {\n border-right: 0.375em solid var(--color-citrin);\n }\n :host > div > nav ul > li[part*=horizontal] + li {\n border-radius: 0;\n border-left: 0.1em dotted white;\n }\n :host > div > nav ul > li[part*=\"horizontal selected\"] {\n border-bottom: 0.375em solid var(--color-citrin);\n }\n :host > div > nav ul > li > div {\n height: 100%;\n }\n :host > div > nav .kol-link {\n width: 100%;\n /*height: 100%;font-weight: 600;*/\n display: block;\n }\n :host > div > nav .kol-link a {\n border-radius: var(--border-radius);\n background-color: var(--color-petrol);\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n grid: flex;\n line-height: 2;\n padding: 0.5em;\n color: white;\n height: 100%;\n -webkit-box-align: center;\n align-items: center;\n display: flex;\n cursor: pointer;\n text-decoration: inherit;\n }\n :host > div > nav .kol-link[exportparts*=selected] a {\n background-color: var(--color-achat);\n font-weight: 700;\n }\n :host > div > nav .kol-link a .kol-icon.mr-2 {\n margin-right: calc(4 * var(--spacing));\n }\n :host > div > nav .kol-link a .kol-icon.ml-2 {\n margin-left: calc(4 * var(--spacing));\n }\n :host > div > nav .kol-link a:focus,\n :host > div > nav .kol-link a:hover {\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid white;\n background-color: var(--color-fluorit);\n color: var(--color-anthrazit);\n }\n /* compact button */\n :host > div > div:last-child {\n margin-top: 0.5em;\n width: 100%;\n text-align: center;\n }\n :host > div > nav .kol-link a.text-center {\n display: grid;\n align-items: center;\n justify-items: center;\n }\n /* horizontal */\n ul.flex {\n display: flex;\n }\n li > div > div.absolute {\n position: absolute;\n }\n .kol-span-wc {\n justify-items: baseline;\n }\n}";
475
475
 
476
- var css_248z$e = "@layer kol-theme-component {\n .button {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family-sans);\n }\n .button-inner {\n background-color: var(--color-weiss);\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border: var(--spacing) solid var(--color-anthrazit);\n color: var(--color-anthrazit);\n font-size: inherit;\n gap: 0.25em;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n transition-timing-function: ease-in-out;\n }\n .hide-label .button-inner {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .button:not(:disabled):hover .button-inner,\n .button:focus .button-inner {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .button:disabled .button-inner {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .selected .button-inner {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n color: var(--color-weiss);\n font-weight: bold;\n opacity: 1;\n text-decoration: underline;\n }\n}";
476
+ var css_248z$e = "@layer kol-theme-component {\n .kol-button {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family-sans);\n }\n .kol-button__text {\n background-color: var(--color-weiss);\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border: var(--spacing) solid var(--color-anthrazit);\n color: var(--color-anthrazit);\n font-size: inherit;\n gap: 0.25em;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n transition-timing-function: ease-in-out;\n }\n .kol-button__text:not(:disabled):hover .kol-button__text, .kol-button__text:focus .kol-button__text {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n :disabled .kol-button__text {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .kol-button__text--hide-label .kol-button__text {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination__button--selected .kol-button__text {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n color: var(--color-weiss);\n font-weight: bold;\n opacity: 1;\n text-decoration: underline;\n }\n}";
477
477
 
478
478
  var css_248z$d = "@layer kol-theme-component {\n :host {\n --kolibri-text-label-padding: calc(60rem / var(--kolibri-root-font-size, 16));\n }\n :host progress,\n :host span {\n display: block;\n height: 0;\n overflow: hidden;\n width: 0;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-fluorit);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-achat);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
479
479
 
@@ -481,15 +481,15 @@ var css_248z$c = "@layer kol-theme-component {\n label {\n font-size: calc(1
481
481
 
482
482
  var css_248z$b = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n font-weight: 700;\n color: var(--color-anthrazit);\n width: 100%;\n }\n}\n@layer kol-theme-component {\n .kol-alert {\n margin-top: calc(2 * var(--spacing));\n display: block;\n }\n .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host .kol-alert {\n --kolibri-border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert .default {\n --alert-background-color: var(--color-anthrazit);\n --alert-border-color: var(--color-anthrazit);\n }\n :host .kol-alert .error {\n --alert-background-color: var(--color-rotton);\n --alert-border-color: var(--color-rotton);\n }\n :host .kol-alert .info {\n --alert-background-color: var(--color-petrol);\n --alert-border-color: var(--color-petrol);\n }\n :host .kol-alert .success {\n --alert-background-color: var(--color-gras);\n --alert-border-color: var(--color-gras);\n }\n :host .kol-alert .warning {\n --alert-background-color: var(--color-warn);\n --alert-border-color: var(--color-warn);\n }\n :host .kol-alert__container {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-alert__heading-icon {\n background-color: var(--alert-background-color);\n border-color: var(--alert-border-color);\n }\n .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: 0;\n border-color: var(--kolibri-color-normal);\n background-color: #e8edf2;\n display: inline-flex;\n align-items: center;\n min-height: var(--a11y-min-size);\n text-align: left;\n width: 100%;\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__group:not(.disabled) .single-select__group:hover, .single-select__group:focus-within {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select:not(.disabled) .single-select__group:hover {\n border-color: var(--default-border-hover);\n outline-color: var(--primary);\n outline-offset: 0;\n outline-style: solid;\n outline-width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n flex-grow: 1;\n background-color: transparent;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input:focus {\n outline-offset: 0;\n outline-width: 0;\n }\n .single-select__button {\n display: grid;\n place-items: center;\n cursor: pointer;\n padding-left: 1em;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--kolibri-color-normal);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n background-color: #e8edf2;\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: 1em;\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-petrol);\n outline: 0;\n }\n .single-select__item:focus .radio-label, .single-select__item.highlighted .radio-label {\n color: var(--color-weiss);\n }\n .error .single-select__group {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
483
483
 
484
- var css_248z$a = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n cursor: pointer;\n }\n}";
484
+ var css_248z$a = "@layer kol-theme-component {\n .kol-link__text {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n cursor: pointer;\n }\n}";
485
485
 
486
486
  var css_248z$9 = "@layer kol-theme-component {\n .cycle {\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .cycle span {\n background-color: #fc0;\n }\n}";
487
487
 
488
- var css_248z$8 = "@layer kol-theme-component {\n :host {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: var(--spacing);\n }\n .popover {\n background-color: #fff;\n }\n .horizontal-line {\n background-color: var(--border-color);\n border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .secondary-button button {\n height: 100%;\n }\n .secondary-button > button > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > button > :active > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > button > :focus > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > a,\n .secondary-button > button {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a,\n button {\n border-top-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-top-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n font-size: inherit;\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
488
+ var css_248z$8 = "@layer kol-theme-component {\n :host {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-width: var(--spacing);\n }\n .popover {\n background-color: #fff;\n }\n .horizontal-line {\n background-color: var(--border-color);\n border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .secondary-button button {\n height: 100%;\n }\n .secondary-button > button > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > button > :active > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > button > :focus > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > a,\n .secondary-button > button {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a,\n button {\n border-top-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-top-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n font-size: inherit;\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button {\n background-color: transparent;\n }\n .kol-button--primary {\n --text-background-color: var(--color-petrol);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--primary:not([disabled]):hover, .kol-button--primary:focus {\n --text-background-color: var(--color-achat);\n --text-border-color: var(--color-achat);\n }\n .kol-button--secondary {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-petrol);\n --text-color: var(--color-petrol);\n }\n .kol-button--secondary:not([disabled]):hover, .kol-button--secondary:focus {\n --text-background-color: var(--color-petrol);\n --text-color: var(--color-weiss);\n }\n .kol-button--normal {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-anthrazit);\n --text-color: var(--color-anthrazit);\n }\n .kol-button--normal:not([disabled]):hover, .kol-button--normal:focus {\n --text-background-color: var(--color-anthrazit);\n --text-color: var(--color-weiss);\n }\n .kol-button--danger {\n --text-background-color: var(--color-weiss);\n --text-border-color: var(--color-blut);\n --text-color: var(--color-blut);\n }\n .kol-button--danger:hover, .kol-button--danger:focus {\n --text-background-color: var(--color-blut);\n --text-color: var(--color-weiss);\n }\n .kol-button--ghost {\n --text-background-color: var(--color-ghost);\n --text-border-color: transparent;\n --text-color: var(--color-anthrazit);\n }\n .kol-button--ghost:not([disabled]):hover, .kol-button--ghost:focus {\n --text-border-color: var(--color-ghost);\n }\n .kol-button__text {\n gap: 0.25em;\n transition-delay: 0ms;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n background-color: var(--text-background-color);\n border-color: var(--text-border-color);\n color: var(--text-color);\n }\n .kol-button--hide-label .kol-button__text {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--hide-label .kol-button__text .span-label {\n display: none;\n }\n}";
489
489
 
490
- var css_248z$7 = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n :host > div:last-child {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--border-color);\n }\n @media (min-width: 1024px) {\n :host > div.pagination,\n :host > div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n :host > div.pagination .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n border-width: 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n tr {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n th,\n td {\n border-right: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n th:last-child,\n td:last-child {\n border-right-width: 0;\n }\n tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n th,\n td {\n padding: 0.25em 0.5em;\n }\n th {\n background-color: #eee;\n }\n .table-sort-button .button {\n font-weight: bold;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .input input[type=checkbox]:focus {\n border-color: var(--color-petrol);\n outline-color: var(--color-petrol);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input .icon {\n color: var(--color-weiss);\n }\n .input.indeterminate input {\n background-color: var(--color-weiss);\n }\n .input.indeterminate .icon {\n color: var(--color-petrol);\n }\n .input input[type=radio] {\n display: flex;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-achat);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-anthrazit);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n }\n .input input[type=radio]:focus {\n border-color: var(--color-petrol);\n border-color: var(--color-anthrazit);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
490
+ var css_248z$7 = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n :host > div:last-child {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-color: var(--border-color);\n }\n @media (min-width: 1024px) {\n :host > div.pagination,\n :host > div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n :host > div.pagination .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n border-width: 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n tr {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n th,\n td {\n border-right: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n th:last-child,\n td:last-child {\n border-right-width: 0;\n }\n tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n th,\n td {\n padding: 0.25em 0.5em;\n }\n th {\n background-color: #eee;\n }\n .table-sort-button .kol-button {\n font-weight: bold;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .input input[type=checkbox]:focus {\n border-color: var(--color-petrol);\n outline-color: var(--color-petrol);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input .icon {\n color: var(--color-weiss);\n }\n .input.indeterminate input {\n background-color: var(--color-weiss);\n }\n .input.indeterminate .icon {\n color: var(--color-petrol);\n }\n .input input[type=radio] {\n display: flex;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-achat);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-anthrazit);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n }\n .input input[type=radio]:focus {\n border-color: var(--color-petrol);\n border-color: var(--color-anthrazit);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
491
491
 
492
- var css_248z$6 = "@layer kol-theme-component {\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n border-width: 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n tr {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n th,\n td {\n border-right: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n th:last-child,\n td:last-child {\n border-right-width: 0;\n }\n tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n th,\n td {\n padding: 0.25em 0.5em;\n }\n th {\n background-color: #eee;\n }\n .table-sort-button .button {\n font-weight: bold;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .input input[type=checkbox]:focus {\n border-color: var(--color-petrol);\n outline-color: var(--color-petrol);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input .icon {\n color: var(--color-weiss);\n }\n .input.indeterminate input {\n background-color: var(--color-weiss);\n }\n .input.indeterminate .icon {\n color: var(--color-petrol);\n }\n .input input[type=radio] {\n display: flex;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-achat);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-anthrazit);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n }\n .input input[type=radio]:focus {\n border-color: var(--color-petrol);\n border-color: var(--color-anthrazit);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
492
+ var css_248z$6 = "@layer kol-theme-component {\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n border-width: 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n tr {\n border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n th,\n td {\n border-right: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-petrol);\n }\n th:last-child,\n td:last-child {\n border-right-width: 0;\n }\n tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n th,\n td {\n padding: 0.25em 0.5em;\n }\n th {\n background-color: #eee;\n }\n .table-sort-button .kol-button {\n font-weight: bold;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .input input[type=checkbox]:focus {\n border-color: var(--color-petrol);\n outline-color: var(--color-petrol);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input .icon {\n color: var(--color-weiss);\n }\n .input.indeterminate input {\n background-color: var(--color-weiss);\n }\n .input.indeterminate .icon {\n color: var(--color-petrol);\n }\n .input input[type=radio] {\n display: flex;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-achat);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-anthrazit);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n }\n .input input[type=radio]:focus {\n border-color: var(--color-petrol);\n border-color: var(--color-anthrazit);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
493
493
 
494
494
  var css_248z$5 = "@layer kol-theme-component {\n :host > div {\n display: block;\n width: 100%;\n }\n :host .tabs-button-group {\n display: flex;\n background-color: var(--color-petrol);\n }\n :host .tabs-button-group > div {\n display: inline-flex;\n }\n :host .tabs-button-group > div + div {\n margin-left: 0.25em;\n }\n .tabs-content {\n padding: 0.25em;\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--border-color);\n }\n button {\n box-sizing: border-box;\n font-size: inherit;\n line-height: 1.25;\n cursor: pointer;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n box-shadow: 0 0 0.25em gray;\n width: inherit;\n overflow: hidden;\n border-style: solid;\n padding: calc(4 * var(--spacing));\n display: grid;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button-wc button.selected,\n .kol-button-wc[aria-selected=true] button {\n background-color: white;\n border-bottom-width: 0.25em;\n border-bottom-style: solid;\n border-bottom-color: var(--color-citrin);\n }\n button > .kol-span-wc span {\n display: flex;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n }\n button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n button.primary,\n button.primary:disabled:hover {\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\n color: white;\n }\n button.primary:hover,\n button.primary:focus {\n color: var(--kolibri-color-primary);\n }\n button.secondary,\n button.secondary:disabled:hover {\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\n color: white;\n }\n button.secondary:hover,\n button.secondary:focus {\n color: var(--kolibri-color-secondary);\n }\n button.normal,\n button.normal:disabled:hover {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: white;\n }\n button.normal:hover,\n button.normal:focus {\n color: var(--color-petrol);\n }\n button.danger,\n button.danger:disabled:hover {\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\n color: white;\n }\n button.danger:hover,\n button.danger:focus {\n color: var(--kolibri-color-danger);\n }\n button.ghost,\n button.ghost:disabled:hover {\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n color: var(--kolibri-color-ghost);\n }\n button.ghost:hover,\n button.ghost:focus {\n background-color: var(--kolibri-color-ghost);\n color: white;\n }\n button:hover,\n button:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n }\n button:active {\n outline: 0;\n box-shadow: none;\n }\n .close-button {\n font-size: 25%;\n height: fit-content;\n width: 0;\n }\n .close-button button {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n position: relative;\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n left: -4.25em;\n top: 0.25em;\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n}";
495
495