npm - @public-ui/theme-ecl - Versions diffs - 4.2.0-rc.5 → 4.2.1 - Mend

@public-ui/theme-ecl 4.2.0-rc.5 → 4.2.1

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 (13) hide show

package/assets/ecl-icons/ecl-icons.eot +0 -0
package/assets/ecl-icons/ecl-icons.ttf +0 -0
package/assets/ecl-icons/ecl-icons.woff +0 -0
package/assets/ecl-icons/ecl-icons.woff2 +0 -0
package/assets/ecl-icons/style.css +6 -6
package/assets/kolicons/kolicons.eot +0 -0
package/assets/kolicons/kolicons.ttf +0 -0
package/assets/kolicons/kolicons.woff +0 -0
package/assets/kolicons/kolicons.woff2 +0 -0
package/assets/kolicons/style.css +6 -6
package/dist/index.cjs +10 -10
package/dist/index.mjs +10 -10
package/package.json +6 -6

package/dist/index.mjs CHANGED Viewed

@@ -1004,7 +1004,7 @@ var css_248z$1h = "/* forward the rem function */\n@layer kol-theme-component {\
 var css_248z$1g = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-card .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-card .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-card .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-card .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-card .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-card .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-card .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-card .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-card .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-card .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-card .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-card .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-card .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-card .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-card .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-card .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-card .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-card .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-card .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-card .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-card .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-card .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-card .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-card .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-card .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-card {\n    background-color: var(--ecl-color-white);\n    box-shadow: var(--ecl-shadow-1);\n    border-radius: 0 0 2px 2px;\n    border: 1px solid var(--ecl-color-stroke);\n    border-bottom: 4px solid var(--ecl-color-primary);\n  }\n  .kol-card__header {\n    display: block;\n    padding: var(--ecl-spacing-xl) var(--ecl-spacing-m) var(--ecl-spacing-s) var(--ecl-spacing-xl);\n    font-size: var(--ecl-font-size-l);\n    font-weight: 400;\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-card__content {\n    padding: 0 var(--ecl-spacing-xl) var(--ecl-spacing-xl);\n  }\n  .kol-card__content ::slotted(p:first-child) {\n    margin-top: 0;\n  }\n  .kol-card__content ::slotted(p:last-child) {\n    margin-bottom: 0;\n  }\n  .kol-card__close-button .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-card__close-button .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-card__close-button .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n}";
-var css_248z$1f = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    background-color: var(--ecl-color-neutral-80);\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--ecl-color-neutral-60);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--ecl-color-primary);\n    border-style: solid;\n    width: 100%;\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n  .kol-combobox__delete {\n    margin-top: -2px;\n    margin-bottom: -2px;\n  }\n}";
+var css_248z$1f = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    background-color: var(--ecl-color-neutral-80);\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--ecl-color-neutral-60);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--ecl-color-primary);\n    border-style: solid;\n    width: 100%;\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-combobox__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n  .kol-combobox__delete {\n    margin-top: -2px;\n    margin-bottom: -2px;\n  }\n}";
 var css_248z$1e = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-details {\n    --detail-icon-rotate: rotate(180deg);\n  }\n  .kol-details__heading-button .kol-button {\n    width: -moz-max-content;\n    width: max-content;\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-details__heading-button .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-details__heading-button .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-details__heading-button .kol-button .kol-span__container {\n    flex-direction: row-reverse;\n  }\n  .kol-details__heading-button .kol-button .kol-span__icon--left {\n    transform: var(--detail-icon-rotate);\n    transition: transform 0.3s ease-in-out;\n  }\n  .kol-details.collapsible--open {\n    --detail-icon-rotate: rotate(0);\n  }\n  .kol-details__content {\n    margin-top: var(--ecl-spacing-s);\n    padding-inline-start: var(--ecl-spacing-m);\n  }\n}";
@@ -1016,27 +1016,27 @@ var css_248z$1b = "/* forward the rem function */\n@layer kol-theme-component {\
 var css_248z$1a = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-headline--h1 {\n    font-size: var(--ecl-font-size-3xl);\n    line-height: var(--ecl-line-height-3xl);\n  }\n  @media (min-width: 768px) {\n    .kol-headline--h1 {\n      font-size: var(--ecl-font-size-4xl);\n      line-height: var(--ecl-line-height-4xl);\n    }\n  }\n  .kol-headline--h2 {\n    font-size: var(--ecl-font-size-2xl);\n    line-height: var(--ecl-line-height-2xl);\n  }\n  @media (min-width: 768px) {\n    .kol-headline--h2 {\n      font-size: var(--ecl-font-size-3xl);\n      line-height: var(--ecl-line-height-3xl);\n    }\n  }\n  .kol-headline--h3 {\n    font-size: var(--ecl-font-size-xl);\n    line-height: var(--ecl-line-height-xl);\n  }\n  @media (min-width: 768px) {\n    .kol-headline--h3 {\n      font-size: var(--ecl-font-size-2xl);\n      line-height: var(--ecl-line-height-2xl);\n    }\n  }\n  .kol-headline--h4 {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  @media (min-width: 768px) {\n    .kol-headline--h4 {\n      font-size: var(--ecl-font-size-xl);\n      line-height: var(--ecl-line-height-xl);\n    }\n  }\n  .kol-headline--h5 {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-headline--h6 {\n    font-size: var(--ecl-font-size-m);\n    font-weight: var(--ecl-font-weight-bold);\n    line-height: var(--ecl-line-height-m);\n  }\n}";
-var css_248z$19 = "@layer kol-theme-component {\n  @font-face {\n    font-family: \"ecl-icons\";\n    src: url(\"ecl-icons.eot?t=1780046830559\"); /* IE9*/\n    src: url(\"ecl-icons.eot?t=1780046830559#iefix\") format(\"embedded-opentype\"), url(\"ecl-icons.woff2?t=1780046830559\") format(\"woff2\"), url(\"ecl-icons.woff?t=1780046830559\") format(\"woff\"), url(\"ecl-icons.ttf?t=1780046830559\") format(\"truetype\"), url(\"ecl-icons.svg?t=1780046830559#ecl-icons\") format(\"svg\"); /* iOS 4.1- */\n  }\n  [class^=ecl-icons-], [class*=\" ecl-icons-\"] {\n    font-family: \"ecl-icons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .ecl-icons-arrow-left::before {\n    content: \"\\ea01\";\n  }\n  .ecl-icons-audio::before {\n    content: \"\\ea02\";\n  }\n  .ecl-icons-book::before {\n    content: \"\\ea03\";\n  }\n  .ecl-icons-brochure::before {\n    content: \"\\ea04\";\n  }\n  .ecl-icons-budget::before {\n    content: \"\\ea05\";\n  }\n  .ecl-icons-calendar::before {\n    content: \"\\ea06\";\n  }\n  .ecl-icons-camera::before {\n    content: \"\\ea07\";\n  }\n  .ecl-icons-chain::before {\n    content: \"\\ea08\";\n  }\n  .ecl-icons-check-filled::before {\n    content: \"\\ea09\";\n  }\n  .ecl-icons-check::before {\n    content: \"\\ea0a\";\n  }\n  .ecl-icons-clock-filled::before {\n    content: \"\\ea0b\";\n  }\n  .ecl-icons-clock::before {\n    content: \"\\ea0c\";\n  }\n  .ecl-icons-close-filled::before {\n    content: \"\\ea0d\";\n  }\n  .ecl-icons-close-outline::before {\n    content: \"\\ea0e\";\n  }\n  .ecl-icons-close::before {\n    content: \"\\ea0f\";\n  }\n  .ecl-icons-copy::before {\n    content: \"\\ea10\";\n  }\n  .ecl-icons-corner-arrow::before {\n    content: \"\\ea11\";\n  }\n  .ecl-icons-data::before {\n    content: \"\\ea12\";\n  }\n  .ecl-icons-digital::before {\n    content: \"\\ea13\";\n  }\n  .ecl-icons-document::before {\n    content: \"\\ea14\";\n  }\n  .ecl-icons-download::before {\n    content: \"\\ea15\";\n  }\n  .ecl-icons-edit::before {\n    content: \"\\ea16\";\n  }\n  .ecl-icons-email::before {\n    content: \"\\ea17\";\n  }\n  .ecl-icons-energy::before {\n    content: \"\\ea18\";\n  }\n  .ecl-icons-error-outline::before {\n    content: \"\\ea19\";\n  }\n  .ecl-icons-error::before {\n    content: \"\\ea1a\";\n  }\n  .ecl-icons-euro::before {\n    content: \"\\ea1b\";\n  }\n  .ecl-icons-event::before {\n    content: \"\\ea1c\";\n  }\n  .ecl-icons-external-events::before {\n    content: \"\\ea1d\";\n  }\n  .ecl-icons-external::before {\n    content: \"\\ea1e\";\n  }\n  .ecl-icons-eye::before {\n    content: \"\\ea1f\";\n  }\n  .ecl-icons-faq::before {\n    content: \"\\ea20\";\n  }\n  .ecl-icons-feedback::before {\n    content: \"\\ea21\";\n  }\n  .ecl-icons-file-blank::before {\n    content: \"\\ea22\";\n  }\n  .ecl-icons-file::before {\n    content: \"\\ea23\";\n  }\n  .ecl-icons-folder::before {\n    content: \"\\ea24\";\n  }\n  .ecl-icons-fullscreen::before {\n    content: \"\\ea25\";\n  }\n  .ecl-icons-global::before {\n    content: \"\\ea26\";\n  }\n  .ecl-icons-growth::before {\n    content: \"\\ea27\";\n  }\n  .ecl-icons-hamburger::before {\n    content: \"\\ea28\";\n  }\n  .ecl-icons-image::before {\n    content: \"\\ea29\";\n  }\n  .ecl-icons-infographic::before {\n    content: \"\\ea2a\";\n  }\n  .ecl-icons-information-outline::before {\n    content: \"\\ea2b\";\n  }\n  .ecl-icons-information-round::before {\n    content: \"\\ea2c\";\n  }\n  .ecl-icons-information::before {\n    content: \"\\ea2d\";\n  }\n  .ecl-icons-laco-filled::before {\n    content: \"\\ea2e\";\n  }\n  .ecl-icons-laco::before {\n    content: \"\\ea2f\";\n  }\n  .ecl-icons-list::before {\n    content: \"\\ea30\";\n  }\n  .ecl-icons-livestreaming::before {\n    content: \"\\ea31\";\n  }\n  .ecl-icons-location-filled::before {\n    content: \"\\ea32\";\n  }\n  .ecl-icons-location::before {\n    content: \"\\ea33\";\n  }\n  .ecl-icons-log-in-outline::before {\n    content: \"\\ea34\";\n  }\n  .ecl-icons-log-in::before {\n    content: \"\\ea35\";\n  }\n  .ecl-icons-logged-in::before {\n    content: \"\\ea36\";\n  }\n  .ecl-icons-minus-outline::before {\n    content: \"\\ea37\";\n  }\n  .ecl-icons-minus::before {\n    content: \"\\ea38\";\n  }\n  .ecl-icons-multiple-files::before {\n    content: \"\\ea39\";\n  }\n  .ecl-icons-notification-active::before {\n    content: \"\\ea3a\";\n  }\n  .ecl-icons-notification::before {\n    content: \"\\ea3b\";\n  }\n  .ecl-icons-organigram::before {\n    content: \"\\ea3c\";\n  }\n  .ecl-icons-package::before {\n    content: \"\\ea3d\";\n  }\n  .ecl-icons-pause-filled::before {\n    content: \"\\ea3e\";\n  }\n  .ecl-icons-pause-outline::before {\n    content: \"\\ea3f\";\n  }\n  .ecl-icons-pause::before {\n    content: \"\\ea40\";\n  }\n  .ecl-icons-play-filled::before {\n    content: \"\\ea41\";\n  }\n  .ecl-icons-play-outline::before {\n    content: \"\\ea42\";\n  }\n  .ecl-icons-play::before {\n    content: \"\\ea43\";\n  }\n  .ecl-icons-plus-filled::before {\n    content: \"\\ea44\";\n  }\n  .ecl-icons-plus-outline::before {\n    content: \"\\ea45\";\n  }\n  .ecl-icons-plus::before {\n    content: \"\\ea46\";\n  }\n  .ecl-icons-presentation::before {\n    content: \"\\ea47\";\n  }\n  .ecl-icons-print::before {\n    content: \"\\ea48\";\n  }\n  .ecl-icons-regulation::before {\n    content: \"\\ea49\";\n  }\n  .ecl-icons-rss::before {\n    content: \"\\ea4a\";\n  }\n  .ecl-icons-search::before {\n    content: \"\\ea4b\";\n  }\n  .ecl-icons-settings::before {\n    content: \"\\ea4c\";\n  }\n  .ecl-icons-share-filled::before {\n    content: \"\\ea4d\";\n  }\n  .ecl-icons-share::before {\n    content: \"\\ea4e\";\n  }\n  .ecl-icons-shopping-bag::before {\n    content: \"\\ea4f\";\n  }\n  .ecl-icons-solid-arrow::before {\n    content: \"\\ea50\";\n  }\n  .ecl-icons-sort-carets::before {\n    content: \"\\ea51\";\n  }\n  .ecl-icons-spinner::before {\n    content: \"\\ea52\";\n  }\n  .ecl-icons-spreadsheet::before {\n    content: \"\\ea53\";\n  }\n  .ecl-icons-star-filled::before {\n    content: \"\\ea54\";\n  }\n  .ecl-icons-star-outline::before {\n    content: \"\\ea55\";\n  }\n  .ecl-icons-tag::before {\n    content: \"\\ea56\";\n  }\n  .ecl-icons-trash::before {\n    content: \"\\ea57\";\n  }\n  .ecl-icons-upload::before {\n    content: \"\\ea58\";\n  }\n  .ecl-icons-warning-outline::before {\n    content: \"\\ea59\";\n  }\n  .ecl-icons-warning-round::before {\n    content: \"\\ea5a\";\n  }\n  .ecl-icons-warning::before {\n    content: \"\\ea5b\";\n  }\n}\n@layer kol-theme-component {\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n}";
+var css_248z$19 = "@layer kol-theme-component {\n  @font-face {\n    font-family: \"ecl-icons\";\n    src: url(\"ecl-icons.eot?t=1780571705367\"); /* IE9*/\n    src: url(\"ecl-icons.eot?t=1780571705367#iefix\") format(\"embedded-opentype\"), url(\"ecl-icons.woff2?t=1780571705367\") format(\"woff2\"), url(\"ecl-icons.woff?t=1780571705367\") format(\"woff\"), url(\"ecl-icons.ttf?t=1780571705367\") format(\"truetype\"), url(\"ecl-icons.svg?t=1780571705367#ecl-icons\") format(\"svg\"); /* iOS 4.1- */\n  }\n  [class^=ecl-icons-], [class*=\" ecl-icons-\"] {\n    font-family: \"ecl-icons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .ecl-icons-arrow-left::before {\n    content: \"\\ea01\";\n  }\n  .ecl-icons-audio::before {\n    content: \"\\ea02\";\n  }\n  .ecl-icons-book::before {\n    content: \"\\ea03\";\n  }\n  .ecl-icons-brochure::before {\n    content: \"\\ea04\";\n  }\n  .ecl-icons-budget::before {\n    content: \"\\ea05\";\n  }\n  .ecl-icons-calendar::before {\n    content: \"\\ea06\";\n  }\n  .ecl-icons-camera::before {\n    content: \"\\ea07\";\n  }\n  .ecl-icons-chain::before {\n    content: \"\\ea08\";\n  }\n  .ecl-icons-check-filled::before {\n    content: \"\\ea09\";\n  }\n  .ecl-icons-check::before {\n    content: \"\\ea0a\";\n  }\n  .ecl-icons-clock-filled::before {\n    content: \"\\ea0b\";\n  }\n  .ecl-icons-clock::before {\n    content: \"\\ea0c\";\n  }\n  .ecl-icons-close-filled::before {\n    content: \"\\ea0d\";\n  }\n  .ecl-icons-close-outline::before {\n    content: \"\\ea0e\";\n  }\n  .ecl-icons-close::before {\n    content: \"\\ea0f\";\n  }\n  .ecl-icons-copy::before {\n    content: \"\\ea10\";\n  }\n  .ecl-icons-corner-arrow::before {\n    content: \"\\ea11\";\n  }\n  .ecl-icons-data::before {\n    content: \"\\ea12\";\n  }\n  .ecl-icons-digital::before {\n    content: \"\\ea13\";\n  }\n  .ecl-icons-document::before {\n    content: \"\\ea14\";\n  }\n  .ecl-icons-download::before {\n    content: \"\\ea15\";\n  }\n  .ecl-icons-edit::before {\n    content: \"\\ea16\";\n  }\n  .ecl-icons-email::before {\n    content: \"\\ea17\";\n  }\n  .ecl-icons-energy::before {\n    content: \"\\ea18\";\n  }\n  .ecl-icons-error-outline::before {\n    content: \"\\ea19\";\n  }\n  .ecl-icons-error::before {\n    content: \"\\ea1a\";\n  }\n  .ecl-icons-euro::before {\n    content: \"\\ea1b\";\n  }\n  .ecl-icons-event::before {\n    content: \"\\ea1c\";\n  }\n  .ecl-icons-external-events::before {\n    content: \"\\ea1d\";\n  }\n  .ecl-icons-external::before {\n    content: \"\\ea1e\";\n  }\n  .ecl-icons-eye::before {\n    content: \"\\ea1f\";\n  }\n  .ecl-icons-faq::before {\n    content: \"\\ea20\";\n  }\n  .ecl-icons-feedback::before {\n    content: \"\\ea21\";\n  }\n  .ecl-icons-file-blank::before {\n    content: \"\\ea22\";\n  }\n  .ecl-icons-file::before {\n    content: \"\\ea23\";\n  }\n  .ecl-icons-folder::before {\n    content: \"\\ea24\";\n  }\n  .ecl-icons-fullscreen::before {\n    content: \"\\ea25\";\n  }\n  .ecl-icons-global::before {\n    content: \"\\ea26\";\n  }\n  .ecl-icons-growth::before {\n    content: \"\\ea27\";\n  }\n  .ecl-icons-hamburger::before {\n    content: \"\\ea28\";\n  }\n  .ecl-icons-image::before {\n    content: \"\\ea29\";\n  }\n  .ecl-icons-infographic::before {\n    content: \"\\ea2a\";\n  }\n  .ecl-icons-information-outline::before {\n    content: \"\\ea2b\";\n  }\n  .ecl-icons-information-round::before {\n    content: \"\\ea2c\";\n  }\n  .ecl-icons-information::before {\n    content: \"\\ea2d\";\n  }\n  .ecl-icons-laco-filled::before {\n    content: \"\\ea2e\";\n  }\n  .ecl-icons-laco::before {\n    content: \"\\ea2f\";\n  }\n  .ecl-icons-list::before {\n    content: \"\\ea30\";\n  }\n  .ecl-icons-livestreaming::before {\n    content: \"\\ea31\";\n  }\n  .ecl-icons-location-filled::before {\n    content: \"\\ea32\";\n  }\n  .ecl-icons-location::before {\n    content: \"\\ea33\";\n  }\n  .ecl-icons-log-in-outline::before {\n    content: \"\\ea34\";\n  }\n  .ecl-icons-log-in::before {\n    content: \"\\ea35\";\n  }\n  .ecl-icons-logged-in::before {\n    content: \"\\ea36\";\n  }\n  .ecl-icons-minus-outline::before {\n    content: \"\\ea37\";\n  }\n  .ecl-icons-minus::before {\n    content: \"\\ea38\";\n  }\n  .ecl-icons-multiple-files::before {\n    content: \"\\ea39\";\n  }\n  .ecl-icons-notification-active::before {\n    content: \"\\ea3a\";\n  }\n  .ecl-icons-notification::before {\n    content: \"\\ea3b\";\n  }\n  .ecl-icons-organigram::before {\n    content: \"\\ea3c\";\n  }\n  .ecl-icons-package::before {\n    content: \"\\ea3d\";\n  }\n  .ecl-icons-pause-filled::before {\n    content: \"\\ea3e\";\n  }\n  .ecl-icons-pause-outline::before {\n    content: \"\\ea3f\";\n  }\n  .ecl-icons-pause::before {\n    content: \"\\ea40\";\n  }\n  .ecl-icons-play-filled::before {\n    content: \"\\ea41\";\n  }\n  .ecl-icons-play-outline::before {\n    content: \"\\ea42\";\n  }\n  .ecl-icons-play::before {\n    content: \"\\ea43\";\n  }\n  .ecl-icons-plus-filled::before {\n    content: \"\\ea44\";\n  }\n  .ecl-icons-plus-outline::before {\n    content: \"\\ea45\";\n  }\n  .ecl-icons-plus::before {\n    content: \"\\ea46\";\n  }\n  .ecl-icons-presentation::before {\n    content: \"\\ea47\";\n  }\n  .ecl-icons-print::before {\n    content: \"\\ea48\";\n  }\n  .ecl-icons-regulation::before {\n    content: \"\\ea49\";\n  }\n  .ecl-icons-rss::before {\n    content: \"\\ea4a\";\n  }\n  .ecl-icons-search::before {\n    content: \"\\ea4b\";\n  }\n  .ecl-icons-settings::before {\n    content: \"\\ea4c\";\n  }\n  .ecl-icons-share-filled::before {\n    content: \"\\ea4d\";\n  }\n  .ecl-icons-share::before {\n    content: \"\\ea4e\";\n  }\n  .ecl-icons-shopping-bag::before {\n    content: \"\\ea4f\";\n  }\n  .ecl-icons-solid-arrow::before {\n    content: \"\\ea50\";\n  }\n  .ecl-icons-sort-carets::before {\n    content: \"\\ea51\";\n  }\n  .ecl-icons-spinner::before {\n    content: \"\\ea52\";\n  }\n  .ecl-icons-spreadsheet::before {\n    content: \"\\ea53\";\n  }\n  .ecl-icons-star-filled::before {\n    content: \"\\ea54\";\n  }\n  .ecl-icons-star-outline::before {\n    content: \"\\ea55\";\n  }\n  .ecl-icons-tag::before {\n    content: \"\\ea56\";\n  }\n  .ecl-icons-trash::before {\n    content: \"\\ea57\";\n  }\n  .ecl-icons-upload::before {\n    content: \"\\ea58\";\n  }\n  .ecl-icons-warning-outline::before {\n    content: \"\\ea59\";\n  }\n  .ecl-icons-warning-round::before {\n    content: \"\\ea5a\";\n  }\n  .ecl-icons-warning::before {\n    content: \"\\ea5b\";\n  }\n}\n@layer kol-theme-component {\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n}";
 var css_248z$18 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    --kol-checkbox-color: var(--ecl-color-primary);\n  }\n  .kol-form-field__input {\n    order: 2;\n  }\n  .kol-form-field__hint {\n    order: 1;\n    font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    justify-content: center;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox:focus-within::before, .kol-input-checkbox__field-control--variant-default .kol-checkbox:hover:not(:has(input:disabled))::before {\n    background-color: var(--ecl-color-primary-20);\n    border-radius: 100%;\n    position: absolute;\n    width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n    content: \"\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-check,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-up,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon,\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon {\n    color: var(--ecl-color-white);\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox input {\n    border-color: var(--kol-checkbox-color);\n    border-radius: 2px;\n    position: relative;\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox input:checked, .kol-input-checkbox__field-control--variant-default .kol-checkbox input:indeterminate {\n    background-color: var(--kol-checkbox-color);\n    border-color: var(--kol-checkbox-color);\n  }\n  .kol-input-checkbox__field-control--variant-default .kol-checkbox input:focus {\n    outline: transparent;\n  }\n  .kol-field-control--label-align-left .kol-field-control__label {\n    padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--label-align-right .kol-field-control__label {\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--error {\n    --kol-checkbox-color: var(--ecl-color-error);\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    border-color: var(--kol-checkbox-color);\n    border-radius: 16px;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: var(--ecl-color-white);\n    border-radius: 50%;\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    color: var(--kol-checkbox-color);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-input::before {\n    background-color: var(--kol-checkbox-color);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    color: var(--ecl-color-white);\n  }\n  .kol-checkbox--variant-switch:hover .kol-input:not(:disabled) {\n    outline: var(--ecl-color-primary-20) 8px solid;\n  }\n  .kol-input-checkbox--variant-button {\n    gap: var(--spacing-xs) 0;\n  }\n  .kol-input-checkbox--variant-button:focus-within {\n    outline-color: var(--ecl-color-primary-130);\n    outline-style: solid;\n    outline-width: 2px;\n  }\n}";
 var css_248z$17 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-color__inputs-wrapper {\n    height: 100%;\n    gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-color__input--text, .kol-input-color__input--color {\n    background-color: var(--ecl-color-white);\n    min-height: calc(var(--a11y-min-size) - 8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 0;\n  }\n}";
-var css_248z$16 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
+var css_248z$16 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
-var css_248z$15 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
+var css_248z$15 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
 var css_248z$14 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button__text {\n    white-space: nowrap;\n  }\n  .kol-input-container {\n    padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    -moz-column-gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n         column-gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--ecl-color-primary);\n  }\n}";
-var css_248z$13 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-input-number .kol-input-number__step-button {\n    color: var(--ecl-color-primary);\n    font-weight: 700;\n    transition-duration: 0.3s;\n    transition-property: background-color, color;\n  }\n  .kol-input-number .kol-input-number__step-button:focus {\n    outline: 0;\n  }\n  .kol-input-number .kol-input-number__step-button:hover {\n    color: var(--ecl-color-white);\n    background-color: var(--ecl-color-primary-140);\n  }\n  .kol-input-number .kol-input {\n    min-width: calc(3 * var(--a11y-min-size) + 8px);\n  }\n}";
+var css_248z$13 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-input-number .kol-input-number__step-button {\n    color: var(--ecl-color-primary);\n    font-weight: 700;\n    transition-duration: 0.3s;\n    transition-property: background-color, color;\n  }\n  .kol-input-number .kol-input-number__step-button:focus {\n    outline: 0;\n  }\n  .kol-input-number .kol-input-number__step-button:hover {\n    color: var(--ecl-color-white);\n    background-color: var(--ecl-color-primary-140);\n  }\n  .kol-input-number .kol-input {\n    min-width: calc(3 * var(--a11y-min-size) + 8px);\n  }\n}";
-var css_248z$12 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
+var css_248z$12 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
 var css_248z$11 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control .kol-input-radio {\n    width: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n    min-width: 0;\n  }\n  .kol-field-control input {\n    background-color: var(--ecl-color-white);\n    border-color: var(--kol-radio-color);\n    position: relative;\n    border-width: 1px;\n  }\n  .kol-field-control input:checked::before {\n    background-color: var(--kol-radio-color);\n    inset: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control:not(:has(input:disabled)):hover input {\n    outline: var(--ecl-color-primary-20) 8px solid;\n  }\n  .kol-form-field {\n    --kol-radio-color: var(--ecl-color-primary);\n    margin: 0;\n    padding: 0;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n    border: 0;\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__input {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 3;\n    align-items: flex-start;\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__hint {\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-field-control {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input--error {\n    --kol-radio-color: var(--ecl-color-error);\n  }\n}";
 var css_248z$10 = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container {\n    border-width: 0;\n  }\n  .kol-input-container:has(.kol-input:focus) {\n    outline-width: 0;\n  }\n  .kol-input-container:has(.kol-input:focus) ::-webkit-slider-thumb {\n    outline: 8px solid var(--ecl-color-primary-20);\n    outline-offset: 0;\n  }\n  .kol-input-range__inputs-wrapper {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .kol-input-range__input--number {\n    font-weight: bold;\n    border: 0;\n    text-align: left;\n  }\n  .kol-input-range__input--range {\n    background-color: var(--ecl-color-neutral);\n    width: 100%;\n    height: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: calc(20 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0;\n    border-width: 0;\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb {\n    background-color: var(--ecl-color-primary);\n    width: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb:hover {\n    outline: 4px solid var(--ecl-color-primary);\n    outline-offset: -1px;\n  }\n}";
-var css_248z$$ = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
+var css_248z$$ = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
 var css_248z$_ = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-link {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-link:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-link--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-link--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-link--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-link--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-link--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-link--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-link--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-link--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-link--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-link--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-link--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-link--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-link--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-link--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-link--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-link--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-link--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-link--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-link--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-link--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-link__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-link__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-link__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-link__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n}";
@@ -1052,9 +1052,9 @@ var css_248z$V = "/* forward the rem function */\n@layer kol-theme-component {\n
 var css_248z$U = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-quote--block {\n    box-shadow: var(--ecl-shadow-1);\n    border-radius: 2px;\n    display: block;\n    padding: var(--ecl-spacing-3xl);\n    border-inline-start: 4px solid var(--ecl-color-primary);\n  }\n  .kol-quote--block .kol-quote__blockquote {\n    margin: 0;\n    font-size: var(--ecl-font-size-l);\n  }\n  .kol-quote--block .kol-quote__cite {\n    display: inline-block;\n    margin-top: var(--ecl-spacing-m);\n    font-weight: 700;\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    display: none;\n  }\n}";
-var css_248z$T = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-select {\n    border: none;\n  }\n  .kol-select[multiple] {\n    overflow: auto;\n  }\n  .kol-select__option {\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n  }\n  .kol-select__option:active:not(:disabled), .kol-select__option:checked:not(:disabled), .kol-select__option:focus:not(:disabled), .kol-select__option:hover:not(:disabled) {\n    color: var(--ecl-color-white);\n    background-color: var(--ecl-color-dark);\n  }\n  .kol-select:not([multiple]) .kol-select__option {\n    padding: 0.5em;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n    border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n    border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n    border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n    border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
+var css_248z$T = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-select {\n    border: none;\n  }\n  .kol-select[multiple] {\n    overflow: auto;\n  }\n  .kol-select__option {\n    margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n  }\n  .kol-select__option:active:not(:disabled), .kol-select__option:checked:not(:disabled), .kol-select__option:focus:not(:disabled), .kol-select__option:hover:not(:disabled) {\n    color: var(--ecl-color-white);\n    background-color: var(--ecl-color-dark);\n  }\n  .kol-select:not([multiple]) .kol-select__option {\n    padding: 0.5em;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) {\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n    border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n    border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n    border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n    border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
-var css_248z$S = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    background-color: var(--ecl-color-neutral-80);\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--ecl-color-neutral-60);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--ecl-color-primary);\n    border-style: solid;\n    width: 100%;\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-single-select__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n  .kol-single-select__delete {\n    margin-top: -2px;\n    margin-bottom: -2px;\n  }\n}";
+var css_248z$S = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    line-height: 1.2;\n  }\n  .kol-custom-suggestions-option[aria-selected] {\n    background-color: var(--ecl-color-neutral-80);\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--ecl-color-neutral-60);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-color: var(--ecl-color-primary);\n    border-style: solid;\n    width: 100%;\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n    border-width: 1px;\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    padding-right: 1em;\n    padding-left: 1em;\n    place-items: center;\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-single-select__group {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n  }\n  .kol-single-select__delete {\n    margin-top: -2px;\n    margin-bottom: -2px;\n  }\n}";
 var css_248z$R = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-skip-nav .kol-link__text {\n    color: var(--ecl-color-white);\n    background-color: var(--ecl-color-primary);\n    border-color: var(--ecl-color-primary);\n    border-style: solid;\n    border-radius: 0;\n    padding: 0.25em 0.75em;\n    border-width: 2px;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    cursor: pointer;\n  }\n}";
@@ -1068,7 +1068,7 @@ var css_248z$N = "/* forward the rem function */\n@layer kol-theme-component {\n
 var css_248z$M = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-tabs__button-group {\n    border-bottom: 2px solid var(--ecl-color-neutral-60);\n  }\n  .kol-tabs .kol-button {\n    margin-bottom: -2px;\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border: none;\n    border-bottom: solid 2px transparent;\n  }\n  .kol-tabs .kol-button:hover:not(:disabled) {\n    border-bottom-color: var(--ecl-color-dark-80);\n  }\n  .kol-tabs .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    border-radius: 1px;\n    outline-offset: -2px;\n  }\n  .kol-tabs .kol-button.selected {\n    border-bottom-color: var(--ecl-color-primary);\n    font-weight: var(--ecl-font-weight-bold);\n  }\n}";
-var css_248z$L = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    position: relative;\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
+var css_248z$L = "/* forward the rem function */\n@layer kol-theme-component {\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: var(--ecl-spacing-xs);\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__label-text::after {\n    color: var(--ecl-color-error);\n    margin-left: var(--ecl-spacing-2xs);\n    vertical-align: text-bottom;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__label__read-only {\n    display: none;\n  }\n  .kol-form-field__hint {\n    margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-font-size-s);\n  }\n  .kol-form-field__msg {\n    order: 4;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter--exceeded {\n    color: var(--ecl-color-error);\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-input-container {\n    background-color: var(--ecl-color-white);\n    align-items: center;\n    border: 1px solid var(--ecl-color-dark-80);\n  }\n  .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: -2px;\n  }\n  .kol-input-container--error {\n    border-color: var(--ecl-color-error);\n  }\n  .kol-input-container--disabled {\n    opacity: 0.5;\n  }\n  .kol-input-container__smart-button {\n    position: relative;\n    z-index: 2;\n  }\n  .kol-input-container__smart-button .kol-button:focus {\n    outline: 2px solid var(--ecl-color-primary);\n    outline-offset: 0;\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon:first-child {\n    margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon:last-child {\n    margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    background-color: transparent;\n    height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n    border: none;\n  }\n  .kol-input::-moz-placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input::placeholder {\n    color: var(--ecl-color-dark-60);\n  }\n  .kol-input--disabled {\n    opacity: 1;\n  }\n  .kol-input-container {\n    padding: 0;\n    gap: 0;\n    grid-template-columns: auto max-content min-content;\n  }\n  .kol-input-container__adornment {\n    position: absolute;\n    top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start {\n    left: 0;\n  }\n  .kol-input-container__adornment--end {\n    right: 0;\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n    padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n    padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n    padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n}";
 var css_248z$K = "/* forward the rem function */\n@layer kol-theme-component {\n  :host {\n    top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(440 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n    content: \"\\ea11\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n    transform: rotate(-90deg);\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n    content: \"\\ea11\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n    transform: rotate(90deg);\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n    content: \"\\ea11\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n    content: \"\\ea11\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n    content: \"\\ea1f\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n    content: \"\\ea1e\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n    content: \"\\ea08\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n    content: \"\\ea46\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n    content: \"\\ea38\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n    content: \"\\ea5b\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n    content: \"\\ea1a\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n    content: \"\\ea09\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n    content: \"\\ea2d\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n    content: \"\\ea0a\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n    content: \"\\ea0f\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n    content: \"\\ea4c\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n    content: \"\\ea4c\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n    content: \"\\ea50\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n    transform: rotate(180deg);\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n    content: \"\\ea50\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n    content: \"\\ea51\";\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n    font-family: ecl-icons;\n  }\n  .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n    content: \"\\ea58\";\n  }\n  .kol-toast-item .kol-alert .kol-button {\n    --button-border-width: 2px;\n    --button-focus-outline-color: var(--ecl-color-dark);\n    --button-focus-outline-offset: -3px;\n    --button-focus-outline-width: 1px;\n  }\n  .kol-toast-item .kol-alert .kol-button:focus {\n    outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n    outline-offset: var(--button-focus-outline-offset);\n  }\n  .kol-toast-item .kol-alert .kol-button--primary {\n    --button-background-color: var(--ecl-color-primary);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-toast-item .kol-alert .kol-button--primary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-toast-item .kol-alert .kol-button--primary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n  }\n  .kol-toast-item .kol-alert .kol-button--secondary {\n    --button-background-color: var(--ecl-color-white);\n    --button-border-color: var(--ecl-color-primary);\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-toast-item .kol-alert .kol-button--secondary:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-toast-item .kol-alert .kol-button--secondary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-140);\n    --button-border-color: var(--ecl-color-primary-140);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-toast-item .kol-alert .kol-button--tertiary {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-toast-item .kol-alert .kol-button--tertiary:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-toast-item .kol-alert .kol-button--tertiary:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-toast-item .kol-alert .kol-button--normal {\n    --button-background-color: var(--ecl-color-white);\n    --button-text-color: var(--ecl-color-dark);\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n  }\n  .kol-toast-item .kol-alert .kol-button--normal:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-toast-item .kol-alert .kol-button--normal:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n  }\n  .kol-toast-item .kol-alert .kol-button--call-to-action {\n    --button-background-color: var(--ecl-color-secondary);\n    --button-border-color: var(--ecl-color-secondary);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-toast-item .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-secondary-120);\n    --button-border-color: var(--ecl-color-secondary-120);\n  }\n  .kol-toast-item .kol-alert .kol-button--danger {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-error);\n    --button-text-color: var(--ecl-color-white);\n  }\n  .kol-toast-item .kol-alert .kol-button--danger:focus {\n    --button-focus-outline-color: var(--ecl-color-white);\n  }\n  .kol-toast-item .kol-alert .kol-button--danger:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-error);\n    --button-border-color: var(--ecl-color-dark);\n  }\n  .kol-toast-item .kol-alert .kol-button--ghost {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-toast-item .kol-alert .kol-button--ghost:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-toast-item .kol-alert .kol-button--ghost:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-toast-item .kol-alert .kol-button__text {\n    color: var(--button-text-color);\n    background-color: var(--button-background-color);\n    border-color: var(--button-border-color);\n    border-style: solid;\n    border-radius: 2px;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n    border-width: var(--button-border-width);\n    line-height: 1.2;\n  }\n  .kol-toast-item .kol-alert .kol-button__text .kol-span__container {\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert .kol-button__text .kol-span__label {\n    word-break: keep-all;\n  }\n  .kol-toast-item .kol-alert .kol-button__text.kol-span--hide-label {\n    padding: var(--ecl-spacing-xs);\n  }\n  .kol-toast-item .kol-alert--variant-msg {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--variant-msg .kol-alert__icon {\n    margin-right: var(--ecl-spacing-2xs);\n    font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--variant-msg .kol-alert__container {\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-toast-item .kol-alert--variant-msg .kol-alert__content {\n    font-size: var(--ecl-font-size-s);\n    line-height: var(--ecl-line-height-s);\n  }\n  .kol-toast-item .kol-alert--variant-card {\n    background-color: var(--ecl-color-neutral-20);\n    padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n    border: solid 1px var(--ecl-color-neutral);\n    border-inline-start: 4px solid var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-alert__icon {\n    margin-right: var(--ecl-spacing-xs);\n    font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--variant-card .kol-alert__content {\n    margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--type-default {\n    --alert-accent-color: var(--ecl-color-dark);\n  }\n  .kol-toast-item .kol-alert--type-error {\n    --alert-accent-color: var(--ecl-color-error);\n  }\n  .kol-toast-item .kol-alert--type-info {\n    --alert-accent-color: var(--ecl-color-info);\n  }\n  .kol-toast-item .kol-alert--type-success {\n    --alert-accent-color: var(--ecl-color-success);\n  }\n  .kol-toast-item .kol-alert--type-warning {\n    --alert-accent-color: var(--ecl-color-warning);\n  }\n  .kol-toast-item .kol-alert__icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert__heading {\n    font-size: var(--ecl-font-size-l);\n    line-height: var(--ecl-line-height-l);\n  }\n  .kol-toast-item .kol-alert__closer .kol-button {\n    --button-background-color: transparent;\n    --button-border-color: transparent;\n    --button-border-width: 1px;\n    --button-text-color: var(--ecl-color-primary);\n  }\n  .kol-toast-item .kol-alert__closer .kol-button:focus {\n    --button-focus-outline-color: var(--ecl-color-primary);\n    --button-focus-outline-offset: 0;\n    --button-focus-outline-width: 2px;\n  }\n  .kol-toast-item .kol-alert__closer .kol-button:not(:disabled):hover {\n    --button-background-color: var(--ecl-color-primary-20);\n    --button-border-color: var(--ecl-color-dark-80);\n    --button-text-color: var(--ecl-color-dark);\n  }\n  .kol-toast-item .kol-alert__closer .kol-button {\n    height: var(--a11y-min-size);\n  }\n  .kol-toast-item .kol-alert__closer .kol-button .kol-icon {\n    font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item {\n    background-color: #fff;\n    display: block;\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item__alert {\n    display: block;\n  }\n}";