@public-ui/theme-ecl 3.0.0-rc.11 → 3.0.0-rc.13

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 (5) hide show
  1. package/dist/index.cjs +8 -8
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.mjs +8 -8
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +4 -4
package/dist/index.cjs CHANGED
@@ -635,7 +635,7 @@ var css_248z$1m = "@layer kol-theme-component {\n :host {\n font-family: var
635
635
 
636
636
  var css_248z$1l = "@layer kol-theme-component {\n .kol-badge {\n font: normal normal var(--font-weight) 1em var(--font-family);\n padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n text-transform: uppercase;\n }\n}";
637
637
 
638
- var css_248z$1k = "@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}";
638
+ var css_248z$1k = "@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 .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}";
639
639
 
640
640
  var css_248z$1j = "@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: -4px;\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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):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: 2px;\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: -6px;\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: -2px;\n }\n}";
641
641
 
@@ -643,7 +643,7 @@ var css_248z$1i = "@layer kol-theme-component {\n .kol-button {\n font-famil
643
643
 
644
644
  var css_248z$1h = "@layer kol-theme-component {\n .kol-card {\n font-family: var(--font-family);\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 .kol-card__headline {\n display: inline-flex;\n font-style: normal;\n font-weight: 700;\n font-size: 1.25em;\n line-height: 1.75em;\n }\n .kol-card__header {\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n }\n .kol-card__content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n overflow: hidden;\n }\n}";
645
645
 
646
- 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: 2px;\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: var(--a11y-min-size);\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: 1px;\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: 1px solid var(--color-blue);\n border-bottom: 1px 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: 1px 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}";
646
+ var css_248z$1g = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}\n@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: 2px;\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 .kol-custom-suggestions-option {\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 .kol-custom-suggestions-option[aria-selected] {\n color: var(--color-blue);\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-style: solid;\n border-width: 1px;\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 .kol-custom-suggestions-toggle {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n :host {\n font-family: var(--font-family);\n }\n .kol-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: var(--a11y-min-size);\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 .kol-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 .kol-combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .kol-combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .kol-combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .kol-combobox__input:focus {\n border: none;\n }\n}";
647
647
 
648
648
  var css_248z$1f = "@layer kol-theme-component {\n .kol-details {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button:focus-within {\n cursor: pointer;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: #000;\n }\n .kol-details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button .kol-span__container {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .kol-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}";
649
649
 
@@ -661,7 +661,7 @@ var css_248z$19 = "@layer kol-theme-component {\n :host {\n font-family: var
661
661
 
662
662
  var css_248z$18 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}";
663
663
 
664
- var css_248z$17 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}\n@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: -4px;\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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):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: 2px;\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: -6px;\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: -2px;\n }\n .kol-button__text {\n white-space: nowrap;\n }\n .kol-input-container--is-dragover {\n border-color: var(--color-blue) !important;\n }\n}";
664
+ var css_248z$17 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}\n@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: -4px;\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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):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: 2px;\n font-weight: var(--font-weight-bold);\n margin: 0;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n .kol-button--hide-label .kol-button__text .kol-span__label {\n display: none;\n }\n .kol-button--secondary:focus .kol-button__text {\n outline-offset: -6px;\n }\n .kol-button--ghost:focus .kol-button__text {\n outline-offset: -2px;\n }\n .kol-button__text {\n white-space: nowrap;\n }\n .kol-input-container {\n padding: 0 0 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--is-dragover {\n border-color: var(--color-blue);\n }\n}";
665
665
 
666
666
  var css_248z$16 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}";
667
667
 
@@ -691,7 +691,7 @@ var css_248z$W = "@layer kol-theme-component {\n .kol-progress {\n font-fami
691
691
 
692
692
  var css_248z$V = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}";
693
693
 
694
- var css_248z$U = "@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: 2px;\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: var(--a11y-min-size);\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 padding-left: 1em;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\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: 1px solid var(--color-blue);\n border-bottom: 1px 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: 1px 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}";
694
+ var css_248z$U = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}\n@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: 2px;\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 .kol-custom-suggestions-option {\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 .kol-custom-suggestions-option[aria-selected] {\n color: var(--color-blue);\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-style: solid;\n border-width: 1px;\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 .kol-custom-suggestions-toggle {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n :host {\n font-family: var(--font-family);\n }\n .kol-single-select__group {\n display: inline-flex;\n text-align: left;\n width: 100%;\n min-height: var(--a11y-min-size);\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 .kol-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 .kol-single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .kol-single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .kol-single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .kol-single-select__input:not(.disabled) .kol-single-select__input:hover {\n border-color: var(--color-blue);\n }\n .kol-single-select__input:focus {\n border: none;\n }\n}";
695
695
 
696
696
  var css_248z$T = "@layer kol-theme-component {\n .kol-skip-nav {\n font-family: var(--font-family);\n }\n .kol-skip-nav .kol-link__text {\n border-radius: 0;\n border-style: solid;\n border-width: 2px;\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}";
697
697
 
@@ -773,7 +773,7 @@ var css_248z$F = "@layer kol-theme-component {\n :host {\n font-family: var(
773
773
 
774
774
  var css_248z$E = "@layer kol-theme-component {\n .kol-badge {\n font: normal normal var(--font-weight) calc(14rem / var(--kolibri-root-font-size, 16))/1em var(--font-family);\n font-family: var(--font-family);\n padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n text-transform: uppercase;\n }\n}";
775
775
 
776
- var css_248z$D = "@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}";
776
+ var css_248z$D = "@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 .kol-breadcrumb {\n font-family: var(--font-family);\n }\n .kol-breadcrumb__link {\n font-family: var(--font-family);\n }\n}";
777
777
 
778
778
  var css_248z$C = "@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: 4px;\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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):hover {\n --text-color: #0e47cb;\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: 4px;\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:not(:disabled):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: 2px 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: -4px;\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 .kol-span__label {\n display: none;\n }\n}";
779
779
 
@@ -781,7 +781,7 @@ var css_248z$B = "@layer kol-theme-component {\n .kol-button {\n appearance:
781
781
 
782
782
  var css_248z$A = "@layer kol-theme-component {\n .kol-card {\n font-family: var(--font-family);\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 .kol-card__headline {\n display: inline-flex;\n font-style: normal;\n font-weight: 700;\n font-size: 1.25em;\n line-height: 1.75;\n }\n .kol-card__header {\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n }\n .kol-card__content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n overflow: hidden;\n }\n}";
783
783
 
784
- 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: 2px;\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: var(--a11y-min-size);\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: 1px;\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: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\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: var(--a11y-min-size);\n border: 1px 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}";
784
+ var css_248z$z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}\n@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: 2px;\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 .kol-custom-suggestions-option {\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 .kol-custom-suggestions-option[aria-selected] {\n color: var(--color-blue);\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n left: calc(-8rem / var(--kolibri-root-font-size, 16));\n right: calc(-8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-toggle {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n :host {\n font-family: var(--font-family);\n }\n .kol-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: var(--a11y-min-size);\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 .kol-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 .kol-combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .kol-combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .kol-combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .kol-combobox__input:focus {\n border: none;\n }\n}";
785
785
 
786
786
  var css_248z$y = "@layer kol-theme-component {\n .kol-details {\n font-family: var(--font-family);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button:focus-within {\n cursor: pointer;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: #000;\n }\n .kol-details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-details__heading-button .kol-span__container {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .kol-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}";
787
787
 
@@ -799,7 +799,7 @@ var css_248z$s = "@layer kol-theme-component {\n :host {\n font-family: var(
799
799
 
800
800
  var css_248z$r = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}";
801
801
 
802
- var css_248z$q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}\n@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: 4px;\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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):hover {\n --text-color: #0e47cb;\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: 4px;\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:not(:disabled):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: 2px 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: -4px;\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 .kol-span__label {\n display: none;\n }\n .kol-button__text {\n border-radius: 0 !important;\n white-space: nowrap;\n }\n .kol-input-container--is-dragover {\n border-color: var(--color-blue) !important;\n }\n}";
802
+ var css_248z$q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}\n@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: 4px;\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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):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:not(:disabled):hover {\n --text-color: #0e47cb;\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: 4px;\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:not(:disabled):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: 2px 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: -4px;\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 .kol-span__label {\n display: none;\n }\n .kol-button__text {\n border-radius: 0;\n white-space: nowrap;\n }\n .kol-input-container {\n padding: 0 0 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--is-dragover {\n border-color: var(--color-blue);\n }\n}";
803
803
 
804
804
  var css_248z$p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}";
805
805
 
@@ -829,7 +829,7 @@ var css_248z$d = "@layer kol-theme-component {\n :host {\n font-family: var(
829
829
 
830
830
  var css_248z$c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}";
831
831
 
832
- var css_248z$b = "@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: 2px;\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: var(--a11y-min-size);\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 padding-left: 1em;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\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: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\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: var(--a11y-min-size);\n border: 1px 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}";
832
+ var css_248z$b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\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: 2px;\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 .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__hint {\n order: 2;\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-form-field__input {\n order: 4;\n }\n .kol-form-field {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-form-field__label {\n font-weight: var(--font-weight-bold);\n }\n .kol-form-field__label-text::after {\n color: var(--color-red);\n padding-left: 0.25em;\n }\n .kol-form-field__hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n color: var();\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-form-field__msg.kol-alert--error {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .kol-input-container {\n min-height: var(--a11y-min-size);\n border: 1px 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 .kol-input-container: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 .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n border-color: var(--color-blue);\n }\n .kol-input-container--disabled {\n cursor: not-allowed;\n }\n .kol-input-container.kol-input-container--error {\n border-color: var(--color-red);\n }\n}\n@layer kol-theme-component {\n .kol-input,\n .kol-select,\n .kol-textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n .kol-input,\n .kol-select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-input:focus,\n .kol-select:focus,\n .kol-textarea:focus {\n border-top: 1px solid var(--color-blue);\n border-bottom: 1px solid var(--color-blue);\n }\n .kol-input::placeholder,\n .kol-textarea::placeholder {\n color: var(--color-grey-50);\n }\n}\n@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: 2px;\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 .kol-custom-suggestions-option {\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 .kol-custom-suggestions-option[aria-selected] {\n color: var(--color-blue);\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--color-blue);\n color: white;\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n left: calc(-8rem / var(--kolibri-root-font-size, 16));\n right: calc(-8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-toggle {\n display: grid;\n place-items: center;\n padding-left: 1em;\n padding-right: 1em;\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n :host {\n font-family: var(--font-family);\n }\n .kol-single-select__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: var(--a11y-min-size);\n color: var(--color-grey);\n order: 4;\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n }\n .kol-single-select__input {\n border: none;\n flex-grow: 1;\n width: calc(100% - 2.5rem);\n position: relative;\n }\n .kol-single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .kol-single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .kol-single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .kol-single-select__input:not(.disabled) .kol-single-select__input:hover {\n border-color: var(--color-blue);\n }\n .kol-single-select__input:focus {\n border: none;\n }\n}";
833
833
 
834
834
  var css_248z$a = "@layer kol-theme-component {\n .kol-skip-nav {\n font-family: var(--font-family);\n }\n .kol-skip-nav .kol-link__text {\n border-radius: 4px;\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}";
835
835