@public-ui/theme-default 2.2.6-rc.2 → 2.2.7-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +95 -91
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.ts +3 -2
  4. package/dist/index.mjs +95 -91
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +4 -4
package/dist/index.mjs CHANGED
@@ -436,151 +436,155 @@ var TagEnum;
436
436
  TagEnum[TagEnum["modal"] = 34] = "modal";
437
437
  TagEnum[TagEnum["nav"] = 35] = "nav";
438
438
  TagEnum[TagEnum["pagination"] = 36] = "pagination";
439
- TagEnum[TagEnum["progress"] = 37] = "progress";
440
- TagEnum[TagEnum["select"] = 38] = "select";
441
- TagEnum[TagEnum["separator"] = 39] = "separator";
442
- TagEnum[TagEnum["skip-nav"] = 40] = "skip-nav";
443
- TagEnum[TagEnum["spin"] = 41] = "spin";
444
- TagEnum[TagEnum["single-select"] = 42] = "single-select";
445
- TagEnum[TagEnum["split-button"] = 43] = "split-button";
446
- TagEnum[TagEnum["symbol"] = 44] = "symbol";
447
- TagEnum[TagEnum["table"] = 45] = "table";
448
- TagEnum[TagEnum["table-stateless"] = 46] = "table-stateless";
439
+ TagEnum[TagEnum["popover-button"] = 37] = "popover-button";
440
+ TagEnum[TagEnum["progress"] = 38] = "progress";
441
+ TagEnum[TagEnum["select"] = 39] = "select";
442
+ TagEnum[TagEnum["separator"] = 40] = "separator";
443
+ TagEnum[TagEnum["single-select"] = 41] = "single-select";
444
+ TagEnum[TagEnum["skip-nav"] = 42] = "skip-nav";
445
+ TagEnum[TagEnum["spin"] = 43] = "spin";
446
+ TagEnum[TagEnum["split-button"] = 44] = "split-button";
447
+ TagEnum[TagEnum["symbol"] = 45] = "symbol";
448
+ TagEnum[TagEnum["table"] = 46] = "table";
449
449
  TagEnum[TagEnum["table-stateful"] = 47] = "table-stateful";
450
- TagEnum[TagEnum["tabs"] = 48] = "tabs";
451
- TagEnum[TagEnum["textarea"] = 49] = "textarea";
452
- TagEnum[TagEnum["toast-container"] = 50] = "toast-container";
453
- TagEnum[TagEnum["toolbar"] = 51] = "toolbar";
454
- TagEnum[TagEnum["tooltip"] = 52] = "tooltip";
455
- TagEnum[TagEnum["tree"] = 53] = "tree";
456
- TagEnum[TagEnum["tree-item"] = 54] = "tree-item";
450
+ TagEnum[TagEnum["table-stateless"] = 48] = "table-stateless";
451
+ TagEnum[TagEnum["tabs"] = 49] = "tabs";
452
+ TagEnum[TagEnum["textarea"] = 50] = "textarea";
453
+ TagEnum[TagEnum["toast-container"] = 51] = "toast-container";
454
+ TagEnum[TagEnum["toolbar"] = 52] = "toolbar";
455
+ TagEnum[TagEnum["tooltip"] = 53] = "tooltip";
456
+ TagEnum[TagEnum["tree"] = 54] = "tree";
457
+ TagEnum[TagEnum["tree-item"] = 55] = "tree-item";
457
458
  })(TagEnum || (TagEnum = {}));
458
459
 
459
460
  const KoliBri = new re('kol', KeyEnum, TagEnum);
460
461
 
461
- var css_248z$I = "@layer kol-theme-global {\n :host {\n --border-radius: var(--kolibri-border-radius, calc(5rem / var(--kolibri-root-font-size, 16)));\n --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n --font-size: var(--kolibri-font-size, calc(16rem / var(--kolibri-root-font-size, 16)));\n --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n --border-width: var(--kolibri-border-width, calc(1rem / var(--kolibri-root-font-size, 16)));\n --color-primary: var(--kolibri-color-primary, #004b76);\n --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n --color-danger: var(--kolibri-color-danger, #b4003c);\n --color-warning: var(--kolibri-color-warning, #c44931);\n --color-success: var(--kolibri-color-success, #005c45);\n --color-subtle: var(--kolibri-color-subtle, #576164);\n --color-light: var(--kolibri-color-light, #ffffff);\n --color-text: var(--kolibri-color-text, #202020);\n --color-mute: var(--kolibri-color-mute, #f2f3f4);\n --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n }\n * {\n box-sizing: border-box;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus,\n .kol-input:not(.checkbox, .radio) .input:focus-within,\n .kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n .kol-heading-wc {\n font-weight: 700;\n }\n .kol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n }\n .kol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n }\n .kol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}";
462
+ var css_248z$J = "@layer kol-theme-component {\n abbr {\n border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n}";
462
463
 
463
- var css_248z$H = "@layer kol-theme-component {\n abbr {\n border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n}";
464
+ var css_248z$I = "@layer kol-theme-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n .accordion {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .accordion__content {\n margin: 0;\n padding-left: 2.25em;\n padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading {\n margin: 0;\n }\n .accordion__heading-button {\n display: flex;\n border-radius: var(--border-radius);\n min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading-button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n .accordion__heading-button:focus-within button {\n outline: 0;\n }\n .accordion__heading-button .kol-span-wc > span {\n display: flex;\n place-items: baseline center;\n text-align: left;\n gap: 0.5em;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.1;\n }\n .accordion__heading-button button {\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading-button button :focus {\n outline: none;\n }\n .accordion__heading-button .kol-icon {\n color: var(--color-primary);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
464
465
 
465
- var css_248z$G = "@layer kol-theme-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n .accordion {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .accordion__content {\n margin: 0;\n padding-left: 2.25em;\n padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading {\n margin: 0;\n }\n .accordion__heading-button {\n display: flex;\n border-radius: var(--border-radius);\n min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading-button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n .accordion__heading-button:focus-within button {\n outline: 0;\n }\n .accordion__heading-button .kol-span-wc > span {\n display: flex;\n place-items: baseline center;\n text-align: left;\n gap: 0.5em;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.1;\n }\n .accordion__heading-button button {\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .accordion__heading-button button :focus {\n outline: none;\n }\n .accordion__heading-button .kol-icon {\n color: var(--color-primary);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
466
+ var css_248z$H = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
466
467
 
467
- var css_248z$F = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
468
+ var css_248z$G = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
468
469
 
469
- var css_248z$E = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
470
+ var css_248z$F = "@layer kol-theme-component {\n :host {\n display: inline-block;\n font-family: var(--font-family);\n }\n :host > span {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n :host > span.smart-button {\n align-items: center;\n }\n :host > span .kol-button-wc:hover > button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n :host > span .kol-button-wc > button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n :host > span .kol-span-wc {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n :host > span > .kol-span-wc {\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > span > .kol-span-wc > span {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
470
471
 
471
- var css_248z$D = "@layer kol-theme-component {\n :host {\n display: inline-block;\n font-family: var(--font-family);\n }\n :host > span {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n :host > span.smart-button {\n align-items: center;\n }\n :host > span .kol-button-wc:hover > button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n :host > span .kol-button-wc > button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n :host > span .kol-span-wc {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n :host > span > .kol-span-wc {\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > span > .kol-span-wc > span {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
472
+ var css_248z$E = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n .kol-link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
472
473
 
473
- var css_248z$C = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n .kol-link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
474
+ var css_248z$D = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
474
475
 
475
- var css_248z$B = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
476
+ var css_248z$C = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
476
477
 
477
- var css_248z$A = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
478
+ var css_248z$B = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n font-size: inherit;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n a:hover:not([aria-disabled]) .kol-span-wc .span-label,\n button:hover:not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
478
479
 
479
- var css_248z$z = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n font-size: inherit;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n a:hover:not([aria-disabled]) .kol-span-wc .span-label,\n button:hover:not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
480
+ var css_248z$A = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n border-radius: var(--border-radius);\n }\n :host .kol-heading-wc {\n line-height: 1.75;\n }\n :host div.header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host div.content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n :host div.footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
480
481
 
481
- var css_248z$y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) color-mix(in srgb, black 80%, var(--color-subtle));\n border-radius: var(--border-radius);\n }\n :host .kol-heading-wc {\n line-height: 1.75;\n }\n :host div.header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host div.content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n :host div.footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
482
+ var css_248z$z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
482
483
 
483
- var css_248z$x = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
484
+ var css_248z$y = "@layer kol-theme-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n .details {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .details__content.indented-text {\n font-family: var(--font-family);\n border-left: 2px solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading {\n margin: 0;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .details__heading-button .kol-span-wc .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n}";
484
485
 
485
- var css_248z$w = "@layer kol-theme-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n .details {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .details__content.indented-text {\n font-family: var(--font-family);\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading {\n margin: 0;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .details__heading-button .kol-span-wc .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n}";
486
+ var css_248z$x = "@layer kol-theme-component {\n .drawer__wrapper {\n box-shadow: 0 0 4px var(--color-subtle);\n }\n .drawer__wrapper--left {\n animation: slideInLeft 0.4s forwards;\n }\n .drawer__wrapper--left.is-closing {\n animation: slideOutLeft 0.4s forwards;\n }\n .drawer__wrapper--right {\n animation: slideInRight 0.4s forwards;\n }\n .drawer__wrapper--right.is-closing {\n animation: slideOutRight 0.4s forwards;\n }\n .drawer__wrapper--top {\n animation: slideInTop 0.4s forwards;\n }\n .drawer__wrapper--top.is-closing {\n animation: slideOutTop 0.4s forwards;\n }\n .drawer__wrapper--bottom {\n animation: slideInBottom 0.4s forwards;\n }\n .drawer__wrapper--bottom.is-closing {\n animation: slideOutBottom 0.4s forwards;\n }\n}\n@keyframes slideInLeft {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInRight {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInTop {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideInBottom {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideOutLeft {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n}\n@keyframes slideOutRight {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes slideOutTop {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n@keyframes slideOutBottom {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n}";
486
487
 
487
- var css_248z$v = "@layer kol-theme-component {\n .drawer__wrapper {\n box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) var(--color-subtle);\n }\n .drawer__wrapper--left {\n animation: slideInLeft 0.4s forwards;\n }\n .drawer__wrapper--left.is-closing {\n animation: slideOutLeft 0.4s forwards;\n }\n .drawer__wrapper--right {\n animation: slideInRight 0.4s forwards;\n }\n .drawer__wrapper--right.is-closing {\n animation: slideOutRight 0.4s forwards;\n }\n .drawer__wrapper--top {\n animation: slideInTop 0.4s forwards;\n }\n .drawer__wrapper--top.is-closing {\n animation: slideOutTop 0.4s forwards;\n }\n .drawer__wrapper--bottom {\n animation: slideInBottom 0.4s forwards;\n }\n .drawer__wrapper--bottom.is-closing {\n animation: slideOutBottom 0.4s forwards;\n }\n}\n@keyframes slideInLeft {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInRight {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes slideInTop {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideInBottom {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n@keyframes slideOutLeft {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n}\n@keyframes slideOutRight {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes slideOutTop {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n}\n@keyframes slideOutBottom {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n}";
488
+ var css_248z$w = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n line-height: 1;\n }\n .kol-link-wc :is(a, button):focus {\n outline: none;\n }\n .kol-link-wc :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-link-wc a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n .kol-link-wc button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n .kol-link-wc :is(a, button):visited {\n color: var(--visited);\n }\n .kol-link-wc .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .kol-link-wc .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n border-left: 2px solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
488
489
 
489
- var css_248z$u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n line-height: 1;\n }\n .kol-link-wc :is(a, button):focus {\n outline: none;\n }\n .kol-link-wc :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n .kol-link-wc a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n .kol-link-wc button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n .kol-link-wc :is(a, button):visited {\n color: var(--visited);\n }\n .kol-link-wc .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .kol-link-wc .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
490
+ var css_248z$v = "@layer kol-theme-global {\n :host {\n --border-radius: var(--kolibri-border-radius, calc(5rem / var(--kolibri-root-font-size, 16)));\n --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n --font-size: var(--kolibri-font-size, calc(16rem / var(--kolibri-root-font-size, 16)));\n --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n --border-width: var(--kolibri-border-width, calc(1rem / var(--kolibri-root-font-size, 16)));\n --color-primary: var(--kolibri-color-primary, #004b76);\n --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n --color-danger: var(--kolibri-color-danger, #b4003c);\n --color-warning: var(--kolibri-color-warning, #c44931);\n --color-success: var(--kolibri-color-success, #005c45);\n --color-subtle: var(--kolibri-color-subtle, #576164);\n --color-light: var(--kolibri-color-light, #ffffff);\n --color-text: var(--kolibri-color-text, #202020);\n --color-mute: var(--kolibri-color-mute, #f2f3f4);\n --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n }\n * {\n box-sizing: border-box;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n *[tabindex]:focus,\n .kol-input:not(.checkbox, .radio) .input:focus-within,\n .kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n .kol-heading-wc {\n font-weight: 700;\n }\n .kol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n }\n .kol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n }\n .kol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}";
490
491
 
491
- var css_248z$t = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n color: inherit;\n font-style: normal;\n font-family: var(--font-family);\n }\n .headline-h1,\n .headline-h2,\n .headline-h3 {\n font-weight: 700;\n }\n .headline-h1 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.667;\n }\n .headline-h2 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.4;\n }\n .headline-h3 {\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.333;\n }\n}";
492
+ var css_248z$u = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n color: inherit;\n font-style: normal;\n font-family: var(--font-family);\n }\n .headline-h1,\n .headline-h2,\n .headline-h3 {\n font-weight: 700;\n }\n .headline-h1 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.667;\n }\n .headline-h2 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.4;\n }\n .headline-h3 {\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.333;\n }\n}";
492
493
 
493
- var css_248z$s = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-indented-text-wc > div {\n font-family: var(--font-family);\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
494
+ var css_248z$t = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-indented-text-wc > div {\n font-family: var(--font-family);\n border-left: 2px solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
494
495
 
495
- var css_248z$r = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .kol-input input[type=checkbox]:focus {\n outline-color: var(--color-primary);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-left-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-right-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}";
496
+ var css_248z$s = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .kol-input input[type=checkbox]:focus {\n outline-color: var(--color-primary);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: 1px;\n border-left-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: 1px;\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: 1px 1px 1px 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: 1px 0 1px 1px;\n }\n}";
496
497
 
497
- var css_248z$q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n input[type=color] {\n background-color: transparent;\n }\n}";
498
+ var css_248z$r = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n input[type=color] {\n background-color: transparent;\n }\n}";
498
499
 
499
- var css_248z$p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
500
+ var css_248z$q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
500
501
 
501
- var css_248z$o = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
502
+ var css_248z$p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
502
503
 
503
- var css_248z$n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n .kol-input .input input[type=file] {\n padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=file] {\n background-color: transparent;\n }\n}";
504
+ var css_248z$o = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n .kol-input .input input[type=file] {\n padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=file] {\n background-color: transparent;\n }\n}";
504
505
 
505
- var css_248z$m = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
506
+ var css_248z$n = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
506
507
 
507
- var css_248z$l = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
508
+ var css_248z$m = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
508
509
 
509
- var css_248z$k = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n cursor: pointer;\n display: grid;\n line-height: 1.25;\n gap: calc(var(--spacing) * 2);\n width: 100%;\n }\n input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* RADIO */\n fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n display: grid;\n gap: 0.25em;\n }\n .radio-input-wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-input-wrapper label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .radio-input-wrapper input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n }\n .kol-alert-wc.error {\n order: 3;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset legend {\n order: 2;\n display: contents;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) input:focus,\n fieldset.error:not(.hidden-error) select:focus,\n fieldset.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert-wc.error {\n margin-left: -0.25em;\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n align-items: flex-start;\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n}";
510
+ var css_248z$l = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n cursor: pointer;\n display: grid;\n line-height: 1.25;\n gap: calc(var(--spacing) * 2);\n width: 100%;\n }\n input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* RADIO */\n fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n display: grid;\n gap: 0.25em;\n }\n .radio-input-wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-input-wrapper label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .radio-input-wrapper input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n }\n .kol-alert-wc.error {\n order: 3;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset legend {\n order: 2;\n display: contents;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) input:focus,\n fieldset.error:not(.hidden-error) select:focus,\n fieldset.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert-wc.error {\n margin-left: -0.25em;\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n align-items: flex-start;\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n}";
510
511
 
511
- var css_248z$j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
512
+ var css_248z$k = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
512
513
 
513
- var css_248z$i = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
514
+ var css_248z$j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
514
515
 
515
- var css_248z$h = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
516
+ var css_248z$i = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
516
517
 
517
- var css_248z$g = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--a11y-min-size);\n border-style: solid;\n outline-width: calc(var(--border-width) * 2);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
518
+ var css_248z$h = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--a11y-min-size);\n border-style: solid;\n outline-width: calc(var(--border-width) * 2);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
518
519
 
519
- var css_248z$f = "@layer kol-theme-component {\n :host {\n font-family: inherit;\n }\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n line-height: 1;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n}";
520
+ var css_248z$g = "@layer kol-theme-component {\n :host {\n font-family: inherit;\n }\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n line-height: 1;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: var(--border-radius);\n outline: var(--border-width) solid;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n}";
520
521
 
521
- var css_248z$e = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n nav {\n background-color: var(--color-mute);\n }\n ul {\n list-style: none;\n }\n .kol-link-wc {\n display: flex;\n }\n .entry-item a,\n .entry-item .button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .button {\n border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .horizontal .entry-item a,\n .horizontal .entry-item .button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .entry-item a:hover {\n text-decoration: underline;\n }\n .list .list {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .active .entry-item a,\n .active .entry-item .button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .button {\n font-weight: normal;\n border-left-color: transparent;\n }\n .expand-button {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .expand-button .button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .expand-button .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .expand-button .button-inner {\n justify-content: center;\n }\n}";
522
+ var css_248z$f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n nav {\n background-color: var(--color-mute);\n }\n ul {\n list-style: none;\n }\n .kol-link-wc {\n display: flex;\n }\n .entry-item a,\n .entry-item .button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .button {\n border-left: 2px solid transparent;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .horizontal .entry-item a,\n .horizontal .entry-item .button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .entry-item a:hover {\n text-decoration: underline;\n }\n .list .list {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .active .entry-item a,\n .active .entry-item .button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .button {\n font-weight: normal;\n border-left-color: transparent;\n }\n .expand-button {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .expand-button .button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .expand-button .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .expand-button .button-inner {\n justify-content: center;\n }\n}";
522
523
 
523
- var css_248z$d = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected button {\n opacity: 1;\n }\n .selected .button-inner {\n background-color: var(--color-primary);\n color: var(--color-light);\n border: 0;\n }\n}";
524
+ var css_248z$e = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected button {\n opacity: 1;\n }\n .selected .button-inner {\n background-color: var(--color-primary);\n color: var(--color-light);\n border: 0;\n }\n}";
525
+
526
+ var css_248z$d = "@layer kol-theme-component {\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-popover-button__popover {\n border: var(--border-width) solid var(--color-primary);\n padding: var(--spacing);\n }\n}";
524
527
 
525
528
  var css_248z$c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host progress,\n :host span {\n display: block;\n height: 0;\n overflow: hidden;\n width: 0;\n }\n :host svg line:first-child,\n :host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n }\n :host svg line:last-child,\n :host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n }\n .cycle .progress {\n stroke: var(--color-primary-variant);\n }\n}";
526
529
 
527
- var css_248z$b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select option:active:not(:disabled), select option:checked:not(:disabled), select option:focus:not(:disabled), select option:hover:not(:disabled) {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
530
+ var css_248z$b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select option:active:not(:disabled), select option:checked:not(:disabled), select option:focus:not(:disabled), select option:hover:not(:disabled) {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
528
531
 
529
- var css_248z$a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
532
+ var css_248z$a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
530
533
 
531
534
  var css_248z$9 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc > a > .kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
532
535
 
533
- var css_248z$8 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
536
+ var css_248z$8 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
534
537
 
535
- var css_248z$7 = "@layer kol-theme-component {\n :host * {\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc * {\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
538
+ var css_248z$7 = "@layer kol-theme-component {\n :host * {\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc * {\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
536
539
 
537
- var css_248z$6 = "@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc * {\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-style: solid;\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
540
+ var css_248z$6 = "@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc * {\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
538
541
 
539
542
  var css_248z$5 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .tabs-button-group {\n display: inline-flex;\n gap: calc(32rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n }\n button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) .kol-span-wc > span {\n padding-bottom: 0.25em;\n }\n button.selected .kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .tabs-button-group {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .tabs-button-group {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .tabs-button-group {\n order: 2;\n }\n :host > .tabs-align-bottom .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-top .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n gap: inherit;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .tabs-button-group button {\n border: none;\n }\n}";
540
543
 
541
- var css_248z$4 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
544
+ var css_248z$4 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
542
545
 
543
546
  var css_248z$3 = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n }\n .toast {\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .msg {\n border-width: 0;\n }\n .toast .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .toast .kol-alert-wc.msg {\n border-width: 0;\n }\n .toast .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .toast .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .toast .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .toast .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .toast .msg {\n align-items: start;\n }\n .toast .default {\n border-color: var(--color-subtle);\n }\n .toast .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .toast .error {\n border-color: var(--color-danger);\n }\n .toast .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .toast .info {\n border-color: var(--color-primary);\n }\n .toast .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .toast .success {\n border-color: var(--color-success);\n }\n .toast .success.msg .heading-icon {\n color: var(--color-success);\n }\n .toast .warning {\n border-color: var(--color-warning);\n }\n .toast .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .toast .heading-icon {\n color: var(--color-light);\n }\n .toast .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .toast .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .toast .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .toast .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .toast .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .toast .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .toast .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .toast .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .toast .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .toast .msg.error .close .icon {\n color: var(--color-danger);\n }\n .toast .msg.info .close .icon {\n color: var(--color-primary);\n }\n .toast .msg.success .close .icon {\n color: var(--color-success);\n }\n .toast .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .toast .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .toast .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .toast .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .toast .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .toast .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .toast .card.error > .heading {\n background-color: var(--color-danger);\n }\n .toast .card.info > .heading {\n background-color: var(--color-primary);\n }\n .toast .card.success > .heading {\n background-color: var(--color-success);\n }\n .toast .card.warning > .heading {\n background-color: var(--color-warning);\n }\n .toast :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .toast .card.default .close {\n background-color: var(--color-subtle);\n }\n .toast .card.error .close {\n background-color: var(--color-danger);\n }\n .toast .card.info .close {\n background-color: var(--color-primary);\n }\n .toast .card.success .close {\n background-color: var(--color-success);\n }\n .toast .card.warning .close {\n background-color: var(--color-warning);\n }\n .toast .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .toast .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .toast .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
544
547
 
545
548
  var css_248z$2 = "@layer kol-theme-component {\n .toolbar {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n background-color: var(--color-light);\n border-width: var(--border-width);\n border-style: solid;\n }\n}";
546
549
 
547
- var css_248z$1 = "@layer kol-theme-component {\n .tree-link {\n display: block;\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .tree-link:hover, .tree-link:focus-within {\n border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n background-color: var(--color-primary-variant);\n }\n .tree-link:hover > a, .tree-link:focus-within > a {\n outline-offset: 0;\n }\n .tree-link:hover > a,\n .tree-link:hover .toggle-button, .tree-link:focus-within > a,\n .tree-link:focus-within .toggle-button {\n color: var(--color-light);\n }\n .tree-link.active {\n background-color: var(--color-primary);\n }\n .tree-link.active a,\n .tree-link.active .toggle-button {\n color: var(--color-light);\n }\n .tree-link a {\n display: block;\n color: var(--color-text);\n text-decoration: none;\n text-align: left;\n }\n .tree-link a .toggle-button {\n display: inline-block;\n }\n .tree-link a .toggle-button:hover {\n transform: scale(1.3);\n }\n}";
550
+ var css_248z$1 = "@layer kol-theme-component {\n .tree ul {\n border: 2px solid transparent;\n border-radius: var(--border-radius);\n }\n .tree:focus-within {\n outline: 0;\n }\n .tree:focus-within ul {\n border: 2px solid var(--color-primary);\n }\n}";
548
551
 
549
- var css_248z = "@layer kol-theme-component {\n .tree ul {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-radius: var(--border-radius);\n }\n .tree:focus-within {\n outline: 0;\n }\n .tree:focus-within ul {\n border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n }\n}";
552
+ var css_248z = "@layer kol-theme-component {\n .tree-link {\n display: block;\n border: 1px solid transparent;\n }\n .tree-link:hover, .tree-link:focus-within {\n border: 1px solid var(--color-primary);\n background-color: var(--color-primary-variant);\n }\n .tree-link:hover > a, .tree-link:focus-within > a {\n outline-offset: 0;\n }\n .tree-link:hover > a,\n .tree-link:hover .toggle-button, .tree-link:focus-within > a,\n .tree-link:focus-within .toggle-button {\n color: var(--color-light);\n }\n .tree-link.active {\n background-color: var(--color-primary);\n }\n .tree-link.active a,\n .tree-link.active .toggle-button {\n color: var(--color-light);\n }\n .tree-link a {\n display: block;\n color: var(--color-text);\n text-decoration: none;\n text-align: left;\n }\n .tree-link a .toggle-button {\n display: inline-block;\n }\n .tree-link a .toggle-button:hover {\n transform: scale(1.3);\n }\n}";
550
553
 
551
554
  const DEFAULT = KoliBri.createTheme('default', {
552
- GLOBAL: css_248z$I,
553
- 'KOL-ABBR': css_248z$H,
554
- 'KOL-ACCORDION': css_248z$G,
555
- 'KOL-ALERT': css_248z$F,
556
- 'KOL-AVATAR': css_248z$E,
557
- 'KOL-BADGE': css_248z$D,
558
- 'KOL-BREADCRUMB': css_248z$C,
559
- 'KOL-BUTTON': css_248z$B,
560
- 'KOL-BUTTON-GROUP': css_248z$A,
561
- 'KOL-BUTTON-LINK': css_248z$z,
562
- 'KOL-CARD': css_248z$y,
563
- 'KOL-COMBOBOX': css_248z$x,
564
- 'KOL-DETAILS': css_248z$w,
565
- 'KOL-DRAWER': css_248z$v,
566
- 'KOL-FORM': css_248z$u,
567
- 'KOL-HEADING': css_248z$t,
568
- 'KOL-INDENTED-TEXT': css_248z$s,
569
- 'KOL-INPUT-CHECKBOX': css_248z$r,
570
- 'KOL-INPUT-COLOR': css_248z$q,
571
- 'KOL-INPUT-DATE': css_248z$p,
572
- 'KOL-INPUT-EMAIL': css_248z$o,
573
- 'KOL-INPUT-FILE': css_248z$n,
574
- 'KOL-INPUT-NUMBER': css_248z$m,
575
- 'KOL-INPUT-PASSWORD': css_248z$l,
576
- 'KOL-INPUT-RADIO': css_248z$k,
577
- 'KOL-INPUT-RANGE': css_248z$j,
578
- 'KOL-INPUT-TEXT': css_248z$i,
579
- 'KOL-KOLIBRI': css_248z$h,
580
- 'KOL-LINK': css_248z$f,
581
- 'KOL-LINK-BUTTON': css_248z$g,
582
- 'KOL-NAV': css_248z$e,
583
- 'KOL-PAGINATION': css_248z$d,
555
+ GLOBAL: css_248z$v,
556
+ 'KOL-ABBR': css_248z$J,
557
+ 'KOL-ACCORDION': css_248z$I,
558
+ 'KOL-ALERT': css_248z$H,
559
+ 'KOL-AVATAR': css_248z$G,
560
+ 'KOL-BADGE': css_248z$F,
561
+ 'KOL-BREADCRUMB': css_248z$E,
562
+ 'KOL-BUTTON': css_248z$D,
563
+ 'KOL-BUTTON-GROUP': css_248z$C,
564
+ 'KOL-BUTTON-LINK': css_248z$B,
565
+ 'KOL-CARD': css_248z$A,
566
+ 'KOL-COMBOBOX': css_248z$z,
567
+ 'KOL-DETAILS': css_248z$y,
568
+ 'KOL-DRAWER': css_248z$x,
569
+ 'KOL-FORM': css_248z$w,
570
+ 'KOL-HEADING': css_248z$u,
571
+ 'KOL-INDENTED-TEXT': css_248z$t,
572
+ 'KOL-INPUT-CHECKBOX': css_248z$s,
573
+ 'KOL-INPUT-COLOR': css_248z$r,
574
+ 'KOL-INPUT-DATE': css_248z$q,
575
+ 'KOL-INPUT-EMAIL': css_248z$p,
576
+ 'KOL-INPUT-FILE': css_248z$o,
577
+ 'KOL-INPUT-NUMBER': css_248z$n,
578
+ 'KOL-INPUT-PASSWORD': css_248z$m,
579
+ 'KOL-INPUT-RADIO': css_248z$l,
580
+ 'KOL-INPUT-RANGE': css_248z$k,
581
+ 'KOL-INPUT-TEXT': css_248z$j,
582
+ 'KOL-KOLIBRI': css_248z$i,
583
+ 'KOL-LINK': css_248z$g,
584
+ 'KOL-LINK-BUTTON': css_248z$h,
585
+ 'KOL-NAV': css_248z$f,
586
+ 'KOL-PAGINATION': css_248z$e,
587
+ 'KOL-POPOVER-BUTTON': css_248z$d,
584
588
  'KOL-PROGRESS': css_248z$c,
585
589
  'KOL-SELECT': css_248z$b,
586
590
  'KOL-SINGLE-SELECT': css_248z$a,
@@ -592,8 +596,8 @@ const DEFAULT = KoliBri.createTheme('default', {
592
596
  'KOL-TEXTAREA': css_248z$4,
593
597
  'KOL-TOAST-CONTAINER': css_248z$3,
594
598
  'KOL-TOOLBAR': css_248z$2,
595
- 'KOL-TREE': css_248z,
596
- 'KOL-TREE-ITEM': css_248z$1,
599
+ 'KOL-TREE': css_248z$1,
600
+ 'KOL-TREE-ITEM': css_248z,
597
601
  });
598
602
 
599
603
  export { DEFAULT };