@public-ui/themes 2.2.15 → 2.2.16-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/bwst/src/index.d.ts +1 -2
  2. package/dist/default/src/index.d.ts +1 -2
  3. package/dist/ecl/src/ecl-ec/index.d.ts +1 -2
  4. package/dist/ecl/src/ecl-eu/index.d.ts +1 -2
  5. package/dist/index.cjs +130 -131
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.mjs +130 -131
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/itzbund/src/index.d.ts +1 -2
  10. package/package.json +6 -5
package/dist/index.mjs CHANGED
@@ -397,60 +397,59 @@ var TagEnum;
397
397
  (function (TagEnum) {
398
398
  TagEnum[TagEnum["abbr"] = 0] = "abbr";
399
399
  TagEnum[TagEnum["accordion"] = 1] = "accordion";
400
- TagEnum[TagEnum["accordion-group"] = 2] = "accordion-group";
401
- TagEnum[TagEnum["alert"] = 3] = "alert";
402
- TagEnum[TagEnum["avatar"] = 4] = "avatar";
403
- TagEnum[TagEnum["badge"] = 5] = "badge";
404
- TagEnum[TagEnum["breadcrumb"] = 6] = "breadcrumb";
405
- TagEnum[TagEnum["button"] = 7] = "button";
406
- TagEnum[TagEnum["button-group"] = 8] = "button-group";
407
- TagEnum[TagEnum["button-link"] = 9] = "button-link";
408
- TagEnum[TagEnum["card"] = 10] = "card";
409
- TagEnum[TagEnum["combobox"] = 11] = "combobox";
410
- TagEnum[TagEnum["details"] = 12] = "details";
411
- TagEnum[TagEnum["drawer"] = 13] = "drawer";
412
- TagEnum[TagEnum["form"] = 14] = "form";
413
- TagEnum[TagEnum["heading"] = 15] = "heading";
414
- TagEnum[TagEnum["icon"] = 16] = "icon";
415
- TagEnum[TagEnum["image"] = 17] = "image";
416
- TagEnum[TagEnum["indented-text"] = 18] = "indented-text";
417
- TagEnum[TagEnum["input-checkbox"] = 19] = "input-checkbox";
418
- TagEnum[TagEnum["input-color"] = 20] = "input-color";
419
- TagEnum[TagEnum["input-date"] = 21] = "input-date";
420
- TagEnum[TagEnum["input-email"] = 22] = "input-email";
421
- TagEnum[TagEnum["input-file"] = 23] = "input-file";
422
- TagEnum[TagEnum["input-number"] = 24] = "input-number";
423
- TagEnum[TagEnum["input-password"] = 25] = "input-password";
424
- TagEnum[TagEnum["input-radio"] = 26] = "input-radio";
425
- TagEnum[TagEnum["input-range"] = 27] = "input-range";
426
- TagEnum[TagEnum["input-text"] = 28] = "input-text";
427
- TagEnum[TagEnum["kolibri"] = 29] = "kolibri";
428
- TagEnum[TagEnum["link"] = 30] = "link";
429
- TagEnum[TagEnum["link-button"] = 31] = "link-button";
430
- TagEnum[TagEnum["link-group"] = 32] = "link-group";
431
- TagEnum[TagEnum["logo"] = 33] = "logo";
432
- TagEnum[TagEnum["modal"] = 34] = "modal";
433
- TagEnum[TagEnum["nav"] = 35] = "nav";
434
- TagEnum[TagEnum["pagination"] = 36] = "pagination";
435
- TagEnum[TagEnum["popover-button"] = 37] = "popover-button";
436
- TagEnum[TagEnum["progress"] = 38] = "progress";
400
+ TagEnum[TagEnum["alert"] = 2] = "alert";
401
+ TagEnum[TagEnum["avatar"] = 3] = "avatar";
402
+ TagEnum[TagEnum["badge"] = 4] = "badge";
403
+ TagEnum[TagEnum["breadcrumb"] = 5] = "breadcrumb";
404
+ TagEnum[TagEnum["button"] = 6] = "button";
405
+ TagEnum[TagEnum["button-group"] = 7] = "button-group";
406
+ TagEnum[TagEnum["button-link"] = 8] = "button-link";
407
+ TagEnum[TagEnum["card"] = 9] = "card";
408
+ TagEnum[TagEnum["combobox"] = 10] = "combobox";
409
+ TagEnum[TagEnum["details"] = 11] = "details";
410
+ TagEnum[TagEnum["drawer"] = 12] = "drawer";
411
+ TagEnum[TagEnum["form"] = 13] = "form";
412
+ TagEnum[TagEnum["heading"] = 14] = "heading";
413
+ TagEnum[TagEnum["icon"] = 15] = "icon";
414
+ TagEnum[TagEnum["image"] = 16] = "image";
415
+ TagEnum[TagEnum["indented-text"] = 17] = "indented-text";
416
+ TagEnum[TagEnum["input-checkbox"] = 18] = "input-checkbox";
417
+ TagEnum[TagEnum["input-color"] = 19] = "input-color";
418
+ TagEnum[TagEnum["input-date"] = 20] = "input-date";
419
+ TagEnum[TagEnum["input-email"] = 21] = "input-email";
420
+ TagEnum[TagEnum["input-file"] = 22] = "input-file";
421
+ TagEnum[TagEnum["input-number"] = 23] = "input-number";
422
+ TagEnum[TagEnum["input-password"] = 24] = "input-password";
423
+ TagEnum[TagEnum["input-radio"] = 25] = "input-radio";
424
+ TagEnum[TagEnum["input-range"] = 26] = "input-range";
425
+ TagEnum[TagEnum["input-text"] = 27] = "input-text";
426
+ TagEnum[TagEnum["kolibri"] = 28] = "kolibri";
427
+ TagEnum[TagEnum["link"] = 29] = "link";
428
+ TagEnum[TagEnum["link-button"] = 30] = "link-button";
429
+ TagEnum[TagEnum["link-group"] = 31] = "link-group";
430
+ TagEnum[TagEnum["logo"] = 32] = "logo";
431
+ TagEnum[TagEnum["modal"] = 33] = "modal";
432
+ TagEnum[TagEnum["nav"] = 34] = "nav";
433
+ TagEnum[TagEnum["pagination"] = 35] = "pagination";
434
+ TagEnum[TagEnum["popover-button"] = 36] = "popover-button";
435
+ TagEnum[TagEnum["progress"] = 37] = "progress";
436
+ TagEnum[TagEnum["quote"] = 38] = "quote";
437
437
  TagEnum[TagEnum["select"] = 39] = "select";
438
- TagEnum[TagEnum["separator"] = 40] = "separator";
439
- TagEnum[TagEnum["single-select"] = 41] = "single-select";
440
- TagEnum[TagEnum["skip-nav"] = 42] = "skip-nav";
441
- TagEnum[TagEnum["spin"] = 43] = "spin";
442
- TagEnum[TagEnum["split-button"] = 44] = "split-button";
443
- TagEnum[TagEnum["symbol"] = 45] = "symbol";
444
- TagEnum[TagEnum["table"] = 46] = "table";
445
- TagEnum[TagEnum["table-stateful"] = 47] = "table-stateful";
446
- TagEnum[TagEnum["table-stateless"] = 48] = "table-stateless";
447
- TagEnum[TagEnum["tabs"] = 49] = "tabs";
448
- TagEnum[TagEnum["textarea"] = 50] = "textarea";
449
- TagEnum[TagEnum["toast-container"] = 51] = "toast-container";
450
- TagEnum[TagEnum["toolbar"] = 52] = "toolbar";
451
- TagEnum[TagEnum["tooltip"] = 53] = "tooltip";
452
- TagEnum[TagEnum["tree"] = 54] = "tree";
453
- TagEnum[TagEnum["tree-item"] = 55] = "tree-item";
438
+ TagEnum[TagEnum["single-select"] = 40] = "single-select";
439
+ TagEnum[TagEnum["skip-nav"] = 41] = "skip-nav";
440
+ TagEnum[TagEnum["spin"] = 42] = "spin";
441
+ TagEnum[TagEnum["split-button"] = 43] = "split-button";
442
+ TagEnum[TagEnum["symbol"] = 44] = "symbol";
443
+ TagEnum[TagEnum["table"] = 45] = "table";
444
+ TagEnum[TagEnum["table-stateful"] = 46] = "table-stateful";
445
+ TagEnum[TagEnum["table-stateless"] = 47] = "table-stateless";
446
+ TagEnum[TagEnum["tabs"] = 48] = "tabs";
447
+ TagEnum[TagEnum["textarea"] = 49] = "textarea";
448
+ TagEnum[TagEnum["toast-container"] = 50] = "toast-container";
449
+ TagEnum[TagEnum["toolbar"] = 51] = "toolbar";
450
+ TagEnum[TagEnum["tooltip"] = 52] = "tooltip";
451
+ TagEnum[TagEnum["tree"] = 53] = "tree";
452
+ TagEnum[TagEnum["tree-item"] = 54] = "tree-item";
454
453
  })(TagEnum || (TagEnum = {}));
455
454
  let DEV_MODE = false;
456
455
  const getDevMode = () => DEV_MODE === true;
@@ -956,7 +955,7 @@ var css_248z$3g = "@layer kol-theme-component {\n :is(a, button) {\n color:
956
955
 
957
956
  var css_248z$3f = "@layer kol-theme-component {\n /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n :host > div {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n display: grid;\n width: 100%;\n height: 100%;\n grid-template-rows: min-content 2fr min-content;\n border: 1px solid var(--color-subtle);\n }\n :host .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 line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n :host .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 }\n :host .footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
958
957
 
959
- var css_248z$3e = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .combobox__input {\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\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 padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .combobox__item {\n display: flex;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1;\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\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 padding: 0;\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 input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
958
+ var css_248z$3e = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .combobox__input {\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n }\n .combobox__input::-moz-placeholder {\n color: var(--color-subtle);\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 padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .combobox__item {\n display: flex;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1;\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\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 padding: 0;\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 input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
960
959
 
961
960
  var css_248z$3d = "@layer kol-theme-component {\n .details__heading {\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__heading-button .kol-span-wc > span {\n gap: 0;\n }\n .details__heading-button .span-label {\n border-bottom-color: var(--color-subtle);\n }\n .details__heading-button .button:not(:disabled):is(:hover, :focus) .span-label, .details.open .details__heading-button .span-label {\n border-bottom-color: var(--color-primary);\n }\n .details .button:not(:disabled):focus {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n outline-width: 2px;\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__content {\n background-color: var(--color-light);\n box-shadow: -2px 0 0 var(--color-primary-variant);\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-left: none;\n width: unset;\n margin: calc(8rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n}";
962
961
 
@@ -966,25 +965,25 @@ var css_248z$3b = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2
966
965
 
967
966
  var css_248z$3a = "@layer kol-theme-component {\n kol-indented-text-wc > div {\n background-color: var(--color-light);\n box-shadow: -2px 0 0 var(--color-primary-variant);\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-left: none;\n }\n}";
968
967
 
969
- var css_248z$39 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 :host fieldset legend {\n display: contents;\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n :host .kol-input {\n display: grid;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n justify-items: left;\n }\n :host .kol-input .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :host .kol-input:is(.default, .switch) {\n grid-template-areas: unset;\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n :host .kol-input:is(.default, .switch) .input,\n :host .kol-input:is(.default, .switch) .input-label {\n grid-area: unset;\n }\n :host .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n :host .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 :host .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n :host .kol-input > div.input input {\n margin: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n :host .kol-input > .kol-alert-wc.error {\n padding-top: calc(var(--spacing) / 2);\n order: 1;\n grid-column: span 2;\n }\n :host .kol-input.error {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n :host .kol-input.error input:focus,\n .kol-input.error select:focus,\n .kol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n :host .kol-input.error .kol-alert-wc.error {\n color: var(--color-danger);\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n :host input {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n border-width: 2px;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n cursor: pointer;\n }\n :host input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n :host input:focus:hover {\n box-shadow: none;\n }\n :host input:active {\n box-shadow: none;\n }\n :host .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n :host .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .required label > span::after {\n padding-left: calc(2rem / var(--kolibri-root-font-size, 16));\n content: \"*\";\n }\n :host .kol-input input[type=checkbox] {\n background-color: white;\n appearance: none;\n cursor: pointer;\n transition: 0.5s;\n }\n :host .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n :host .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n :host .kol-input.default .icon {\n color: var(--color-light);\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n display: block;\n position: relative;\n width: calc(56rem / var(--kolibri-root-font-size, 16));\n min-width: calc(56rem / var(--kolibri-root-font-size, 16));\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n }\n :host .kol-input.switch input[type=checkbox]:before {\n background-color: white;\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n top: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n left: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(calc(32rem / var(--kolibri-root-font-size, 16)));\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(calc(16rem / var(--kolibri-root-font-size, 16)));\n }\n .switch .icon {\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(calc(32rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .button .input {\n border-top-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-style: solid;\n }\n .button.hide-label .input {\n border-right-width: 1px;\n border-right-style: solid;\n }\n .button .input-label {\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n align-self: stretch;\n justify-self: stretch;\n border-bottom-style: solid;\n border-right-style: solid;\n border-top-style: solid;\n }\n .button .input-label .input-label-span {\n margin: auto 0;\n }\n .button:focus-within {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n color: var(--color-primary);\n background-color: var(--color-mute);\n border-color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .kol-input:not(.checkbox.switch, .radio) .input:focus,\n .kol-input:not(.checkbox) .input:focus,\n .kol-input:is(.checkbox.switch, .radio) input:focus,\n .kol-input:is(.checkbox) input:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 2px;\n cursor: pointer;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n}";
968
+ var css_248z$39 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 :host fieldset legend {\n display: contents;\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n :host .kol-input {\n display: grid;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n justify-items: left;\n }\n :host .kol-input .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :host .kol-input:is(.default, .switch) {\n grid-template-areas: unset;\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n :host .kol-input:is(.default, .switch) .input,\n :host .kol-input:is(.default, .switch) .input-label {\n grid-area: unset;\n }\n :host .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n :host .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 :host .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n :host .kol-input > div.input input {\n margin: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n :host .kol-input > .kol-alert-wc.error {\n padding-top: calc(var(--spacing) / 2);\n order: 1;\n grid-column: span 2;\n }\n :host .kol-input.error {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\n }\n :host .kol-input.error input:focus,\n .kol-input.error select:focus,\n .kol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n :host .kol-input.error .kol-alert-wc.error {\n color: var(--color-danger);\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n :host input {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n border-width: 2px;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n cursor: pointer;\n }\n :host input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\n }\n :host input:focus:hover {\n box-shadow: none;\n }\n :host input:active {\n box-shadow: none;\n }\n :host .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n :host .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .required label > span::after {\n padding-left: calc(2rem / var(--kolibri-root-font-size, 16));\n content: \"*\";\n }\n :host .kol-input input[type=checkbox] {\n background-color: white;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: pointer;\n transition: 0.5s;\n }\n :host .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n :host .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n :host .kol-input.default .icon {\n color: var(--color-light);\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n display: block;\n position: relative;\n width: calc(56rem / var(--kolibri-root-font-size, 16));\n min-width: calc(56rem / var(--kolibri-root-font-size, 16));\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n }\n :host .kol-input.switch input[type=checkbox]:before {\n background-color: white;\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n top: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n left: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(calc(32rem / var(--kolibri-root-font-size, 16)));\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(calc(16rem / var(--kolibri-root-font-size, 16)));\n }\n .switch .icon {\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(calc(32rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .button .input {\n border-top-width: 1px;\n border-bottom-width: 1px;\n border-left-width: 1px;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-style: solid;\n }\n .button.hide-label .input {\n border-right-width: 1px;\n border-right-style: solid;\n }\n .button .input-label {\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n align-self: stretch;\n justify-self: stretch;\n border-bottom-style: solid;\n border-right-style: solid;\n border-top-style: solid;\n }\n .button .input-label .input-label-span {\n margin: auto 0;\n }\n .button:focus-within {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n color: var(--color-primary);\n background-color: var(--color-mute);\n border-color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .kol-input:not(.checkbox.switch, .radio) .input:focus,\n .kol-input:not(.checkbox) .input:focus,\n .kol-input:is(.checkbox.switch, .radio) input:focus,\n .kol-input:is(.checkbox) input:focus {\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-width: 2px;\n cursor: pointer;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n}";
970
969
 
971
- var css_248z$38 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\n border: none;\n }\n input[type=color] {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16)) !important;\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
970
+ var css_248z$38 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\n border: none;\n }\n input[type=color] {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16)) !important;\n border: none;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
972
971
 
973
- var css_248z$37 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
972
+ var css_248z$37 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\n border: none;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
974
973
 
975
- var css_248z$36 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
974
+ var css_248z$36 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\n border: none;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
976
975
 
977
- var css_248z$35 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
976
+ var css_248z$35 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\n border: none;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
978
977
 
979
- var css_248z$34 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
978
+ var css_248z$34 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\n border: none;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
980
979
 
981
- var css_248z$33 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
980
+ var css_248z$33 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\n border: none;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
982
981
 
983
- var css_248z$32 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 display: grid;\n width: 100%;\n gap: calc(var(--spacing) * 2);\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n cursor: pointer;\n }\n input {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n cursor: pointer;\n }\n input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\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 padding-left: 0.125em;\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n display: grid;\n margin: calc(0rem / var(--kolibri-root-font-size, 16));\n padding: calc(0rem / var(--kolibri-root-font-size, 16));\n gap: 0.25em;\n border: 0;\n }\n .radio-input-wrapper {\n display: flex;\n position: relative;\n min-height: var(--a11y-min-size);\n margin: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-input-wrapper label {\n display: flex;\n width: 100%;\n padding-left: calc(var(--spacing) / 2);\n cursor: pointer;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:before {\n border-radius: 100%;\n display: block;\n content: \"\";\n cursor: pointer;\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 background-color: var(--color-mute-variant);\n cursor: not-allowed;\n }\n .kol-alert-wc.error {\n order: 1;\n }\n fieldset legend {\n display: contents;\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n fieldset .kol-input {\n order: 3;\n }\n fieldset.error {\n color: var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border-left: 3px solid var(--color-danger);\n }\n fieldset.error input:focus,\n fieldset.error select:focus,\n fieldset.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n fieldset.error .kol-alert-wc.error {\n margin-left: -0.25em;\n color: var(--color-danger);\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n fieldset.horizontal {\n display: flex;\n gap: var(--spacing) calc(var(--spacing) * 2);\n flex-wrap: wrap;\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}";
982
+ var css_248z$32 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 display: grid;\n width: 100%;\n gap: calc(var(--spacing) * 2);\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n cursor: pointer;\n }\n input {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n cursor: pointer;\n }\n input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\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 padding-left: 0.125em;\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n display: grid;\n margin: calc(0rem / var(--kolibri-root-font-size, 16));\n padding: calc(0rem / var(--kolibri-root-font-size, 16));\n gap: 0.25em;\n border: 0;\n }\n .radio-input-wrapper {\n display: flex;\n position: relative;\n min-height: var(--a11y-min-size);\n margin: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-input-wrapper label {\n display: flex;\n width: 100%;\n padding-left: calc(var(--spacing) / 2);\n cursor: pointer;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:before {\n border-radius: 100%;\n display: block;\n content: \"\";\n cursor: pointer;\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 background-color: var(--color-mute-variant);\n cursor: not-allowed;\n }\n .kol-alert-wc.error {\n order: 1;\n }\n fieldset legend {\n display: contents;\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n fieldset .kol-input {\n order: 3;\n }\n fieldset.error {\n color: var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n border-left: 3px solid var(--color-danger);\n }\n fieldset.error input:focus,\n fieldset.error select:focus,\n fieldset.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n fieldset.error .kol-alert-wc.error {\n margin-left: -0.25em;\n color: var(--color-danger);\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n fieldset.horizontal {\n display: flex;\n gap: var(--spacing) calc(var(--spacing) * 2);\n flex-wrap: wrap;\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}";
984
983
 
985
- var css_248z$31 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\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-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input input[type=range] {\n background-color: var(--color-mute-variant);\n height: calc(16rem / var(--kolibri-root-font-size, 16) / 2);\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n appearance: none;\n border: 1px solid var(--border-color);\n }\n .kol-input input[type=range]::-webkit-slider-thumb {\n background: var(--color-primary);\n border-radius: 50%;\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n appearance: none;\n cursor: ew-resize;\n transition: background 0.3s ease-in-out;\n }\n .kol-input input[type=range]::-moz-range-thumb {\n background: var(--color-primary);\n border-radius: 50%;\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n appearance: none;\n cursor: ew-resize;\n transition: background 0.3s ease-in-out;\n }\n /*\t.kol-input input[type=range]::-webkit-slider-runnable-track {\n \tappearance: none;\n \tbox-shadow: none;\n \tborder: none;\n \tbackground: transparent;\n }*/\n}";
984
+ var css_248z$31 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\n border: none;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\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-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input input[type=range] {\n background-color: var(--color-mute-variant);\n height: calc(16rem / var(--kolibri-root-font-size, 16) / 2);\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border: 1px solid var(--border-color);\n }\n .kol-input input[type=range]::-webkit-slider-thumb {\n background: var(--color-primary);\n border-radius: 50%;\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n appearance: none;\n cursor: ew-resize;\n -webkit-transition: background 0.3s ease-in-out;\n transition: background 0.3s ease-in-out;\n }\n .kol-input input[type=range]::-moz-range-thumb {\n background: var(--color-primary);\n border-radius: 50%;\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n -moz-appearance: none;\n appearance: none;\n cursor: ew-resize;\n -moz-transition: background 0.3s ease-in-out;\n transition: background 0.3s ease-in-out;\n }\n /*\t.kol-input input[type=range]::-webkit-slider-runnable-track {\n \tappearance: none;\n \tbox-shadow: none;\n \tborder: none;\n \tbackground: transparent;\n }*/\n}";
986
985
 
987
- var css_248z$30 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
986
+ var css_248z$30 = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 {\n border: none;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
988
987
 
989
988
  var css_248z$2$ = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc {\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n font-weight: 400;\n text-align: center;\n transition-duration: 0.2s;\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 outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n :is(a, button).primary > .kol-span-wc,\n :is(a, button).primary:disabled:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n :is(a, button).secondary > .kol-span-wc,\n :is(a, button).secondary:disabled:hover > .kol-span-wc,\n :is(a, button).normal > .kol-span-wc,\n :is(a, button).normal:disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n :is(a, button).danger > .kol-span-wc,\n :is(a, button).danger:disabled:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button).ghost > .kol-span-wc,\n :is(a, button).ghost:disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n box-shadow: none;\n border-color: var(--color-light);\n }\n /*-----------*/\n :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).primary:hover > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).secondary:hover > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).normal:hover > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger:hover > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc,\n :is(a, button).ghost:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).danger: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 :is(a, button).primary:active > .kol-span-wc,\n :is(a, button).secondary:active > .kol-span-wc,\n :is(a, button).normal:active > .kol-span-wc,\n :is(a, button).danger:active > .kol-span-wc,\n :is(a, button).ghost:active > .kol-span-wc {\n box-shadow: none;\n outline: none;\n border-color: var(--color-light);\n }\n :is(a, button).hide-label > .kol-span-wc {\n width: unset;\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\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 :is(a, button).ghost.small > .kol-span-wc {\n background-color: transparent;\n box-shadow: none;\n border: none;\n }\n :is(a, button).ghost.small > .kol-span-wc > span {\n background-color: var(--color-light);\n border-color: var(--color-light);\n border-style: solid;\n border-radius: 1.5em;\n border-width: var(--border-width);\n }\n :is(a, button).ghost.small:active > .kol-span-wc > span,\n :is(a, button).ghost.small:hover > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:active > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent:hover > .kol-span-wc > span {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n :is(a, button).ghost.small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
990
989
 
@@ -1000,9 +999,9 @@ var css_248z$2W = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc
1000
999
 
1001
1000
  var css_248z$2V = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n width: calc(0rem / var(--kolibri-root-font-size, 16));\n height: calc(0rem / var(--kolibri-root-font-size, 16));\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 .bar .progress {\n fill: var(--color-primary-variant);\n }\n}";
1002
1001
 
1003
- var css_248z$2U = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 select {\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input select {\n background-color: var(--color-light);\n }\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 select:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n border-radius: var(--border-radius);\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n color: var(--color-light);\n background: var(--color-primary-variant);\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1002
+ var css_248z$2U = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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 select {\n border: none;\n }\n input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input select {\n background-color: var(--color-light);\n }\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 select:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n border-radius: var(--border-radius);\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n color: var(--color-light);\n background: var(--color-primary-variant);\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1004
1003
 
1005
- var css_248z$2T = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n border: none;\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 padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .single-select__item .radio-label {\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\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 padding: 0;\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 input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1004
+ var css_248z$2T = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .single-select__input::-moz-placeholder {\n color: var(--color-subtle);\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 padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .single-select__item .radio-label {\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\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 padding: 0;\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 input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1006
1005
 
1007
1006
  var css_248z$2S = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n border-style: solid;\n border-radius: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: calc(16rem / var(--kolibri-root-font-size, 16));\n cursor: pointer;\n }\n}";
1008
1007
 
@@ -1016,7 +1015,7 @@ var css_248z$2O = "@layer kol-theme-component {\n :host {\n display: flex;\n
1016
1015
 
1017
1016
  var css_248z$2N = "@layer kol-theme-component {\n :host .kol-button-group-wc {\n display: inline-flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n color: var(--color-subtle);\n background-color: transparent;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0;\n font-weight: 400;\n line-height: calc(19.2rem / var(--kolibri-root-font-size, 16));\n border: 0;\n font-style: normal;\n transition: all 0.2s linear;\n }\n button.selected,\n button .primary {\n color: var(--color-primary);\n }\n button.selected:hover {\n color: var(--color-light);\n }\n button:hover {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n *[tabindex]:is(.kol-button-group-wc button) {\n box-shadow: none;\n border-radius: var(--border-radius);\n position: relative;\n top: var(--border-width);\n width: 100%;\n padding: 0 calc(4rem / var(--kolibri-root-font-size, 16));\n border-bottom-width: var(--border-width);\n border: var(--border-width) solid transparent;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n *[tabindex]:is(.kol-button-group-wc button.selected) {\n border-color: var(--color-primary);\n border-bottom-color: var(--page-bg);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):hover {\n border-bottom-color: var(--color-primary);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):before {\n background-color: var(--color-primary);\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n height: calc(16rem / var(--kolibri-root-font-size, 16) / 4);\n content: \"\";\n border-top-left-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n border-top-right-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):after {\n background-color: var(--page-bg);\n position: absolute;\n bottom: calc(-7rem / var(--kolibri-root-font-size, 16));\n left: calc(-5rem / var(--kolibri-root-font-size, 16));\n width: calc(100% + 10rem / var(--kolibri-root-font-size, 16));\n height: calc(6rem / var(--kolibri-root-font-size, 16));\n content: \" \";\n }\n button .kol-span-wc > span {\n gap: calc(8rem / 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 .kol-button-group-wc {\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 .kol-button-group-wc {\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 .kol-button-group-wc {\n order: 2;\n }\n :host > .tabs-align-bottom .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > 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 .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-top .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .kol-button-group-wc > 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 .kol-button-group-wc,\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n order: 1;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n gap: inherit;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div,\n :host > div.tabs-align-left .kol-button-group-wc > div > div,\n :host > div.tabs-align-right .kol-button-group-wc > div,\n :host > div.tabs-align-right .kol-button-group-wc > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .kol-button-group-wc div,\n :host > div.tabs-align-top .kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .kol-button-group-wc {\n border-bottom: 1px solid var(--color-primary);\n }\n}";
1018
1017
 
1019
- var css_248z$2M = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1018
+ var css_248z$2M = "@layer kol-theme-component {\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n :host .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\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 {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\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::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1020
1019
 
1021
1020
  var css_248z$2L = "@layer kol-theme-component {\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\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}";
1022
1021
 
@@ -1093,7 +1092,7 @@ var css_248z$2A = "@layer kol-theme-component {\n :is(a, button) {\n color:
1093
1092
 
1094
1093
  var css_248z$2z = "@layer kol-theme-component {\n :host > div {\n background-color: var(--color-light);\n box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n border-radius: var(--border-radius);\n display: grid;\n width: 100%;\n height: 100%;\n grid-template-rows: min-content 2fr min-content;\n }\n :host .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 line-height: 1.75;\n }\n :host .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 }\n :host .footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
1095
1094
 
1096
- var css_248z$2y = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .combobox__input {\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\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 padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .combobox__item {\n display: flex;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1;\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\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 padding: 0;\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 input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1095
+ var css_248z$2y = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .combobox__input {\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n }\n .combobox__input::-moz-placeholder {\n color: var(--color-subtle);\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 padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .combobox__item {\n display: flex;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1;\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\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 padding: 0;\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 input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1097
1096
 
1098
1097
  var css_248z$2x = "@layer kol-theme-component {\n .details {\n display: grid;\n width: 100%;\n height: 100%;\n }\n .details__content.indented-text {\n width: 100%;\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-left: 2px solid var(--color-primary-variant);\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 gap: 0;\n text-align: left;\n }\n .details__heading-button .kol-span-wc .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button button:focus-within {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n}";
1099
1098
 
@@ -1107,25 +1106,25 @@ var css_248z$2t = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2
1107
1106
 
1108
1107
  var css_248z$2s = "@layer kol-theme-component {\n .kol-indented-text-wc > div {\n width: 100%;\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-left: 2px solid var(--color-primary-variant);\n }\n}";
1109
1108
 
1110
- var css_248z$2r = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n display: grid;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n justify-items: left;\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 padding-top: calc(var(--spacing) / 2);\n order: 1;\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n border-width: 2px;\n order: 1;\n cursor: pointer;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input input[type=checkbox] {\n background-color: white;\n appearance: none;\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 width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: 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 /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n display: block;\n position: relative;\n width: 3.5em;\n min-width: 3.5em;\n height: 1.5em;\n border-width: 0;\n }\n .kol-input.switch input[type=checkbox]:before {\n background-color: white;\n border-radius: 1.25em;\n position: absolute;\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n width: 1.25em;\n height: 1.25em;\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-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n .switch .icon {\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n width: 1.25em;\n height: 1.25em;\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-bottom-width: 1px;\n border-left-width: 1px;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-style: solid;\n }\n .button.hide-label .input {\n border-right-width: 1px;\n border-right-style: solid;\n }\n .button .input-label {\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n align-self: stretch;\n justify-self: stretch;\n border-bottom-style: solid;\n border-right-style: solid;\n border-top-style: solid;\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n color: var(--color-primary);\n background-color: var(--color-mute);\n border-color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\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}";
1109
+ var css_248z$2r = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n display: grid;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n justify-items: left;\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 padding-top: calc(var(--spacing) / 2);\n order: 1;\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n border-width: 2px;\n order: 1;\n cursor: pointer;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input input[type=checkbox] {\n background-color: white;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\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 width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: 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 /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n display: block;\n position: relative;\n width: 3.5em;\n min-width: 3.5em;\n height: 1.5em;\n border-width: 0;\n }\n .kol-input.switch input[type=checkbox]:before {\n background-color: white;\n border-radius: 1.25em;\n position: absolute;\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n width: 1.25em;\n height: 1.25em;\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-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n .switch .icon {\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n width: 1.25em;\n height: 1.25em;\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-bottom-width: 1px;\n border-left-width: 1px;\n border-bottom-style: solid;\n border-left-style: solid;\n border-top-style: solid;\n }\n .button.hide-label .input {\n border-right-width: 1px;\n border-right-style: solid;\n }\n .button .input-label {\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n align-self: stretch;\n justify-self: stretch;\n border-bottom-style: solid;\n border-right-style: solid;\n border-top-style: solid;\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n color: var(--color-primary);\n background-color: var(--color-mute);\n border-color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n -moz-column-gap: 0;\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}";
1111
1110
 
1112
- var css_248z$2q = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n}";
1111
+ var css_248z$2q = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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::-moz-placeholder {\n color: var(--color-subtle);\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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n}";
1113
1112
 
1114
- var css_248z$2p = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1113
+ var css_248z$2p = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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::-moz-placeholder {\n color: var(--color-subtle);\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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1115
1114
 
1116
- var css_248z$2o = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1115
+ var css_248z$2o = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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::-moz-placeholder {\n color: var(--color-subtle);\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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1117
1116
 
1118
- var css_248z$2n = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1117
+ var css_248z$2n = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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::-moz-placeholder {\n color: var(--color-subtle);\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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1119
1118
 
1120
- var css_248z$2m = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1119
+ var css_248z$2m = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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::-moz-placeholder {\n color: var(--color-subtle);\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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1121
1120
 
1122
- var css_248z$2l = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1121
+ var css_248z$2l = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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::-moz-placeholder {\n color: var(--color-subtle);\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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1123
1122
 
1124
- var css_248z$2k = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n display: grid;\n width: 100%;\n gap: calc(var(--spacing) * 2);\n line-height: 1.25;\n cursor: pointer;\n }\n input {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n line-height: 1.5;\n cursor: pointer;\n }\n input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\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 padding-left: 0.125em;\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n display: grid;\n margin: 0;\n padding: 0;\n gap: 0.25em;\n border: 0;\n }\n .radio-input-wrapper {\n display: flex;\n position: relative;\n min-height: var(--a11y-min-size);\n margin: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-input-wrapper label {\n display: flex;\n width: 100%;\n padding-left: calc(var(--spacing) / 2);\n cursor: pointer;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:before {\n border-radius: 100%;\n display: block;\n content: \"\";\n cursor: pointer;\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 background-color: var(--color-mute-variant);\n cursor: not-allowed;\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 display: contents;\n order: 2;\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 padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 gap: var(--spacing) calc(var(--spacing) * 2);\n flex-wrap: wrap;\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}";
1123
+ var css_248z$2k = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n display: grid;\n width: 100%;\n gap: calc(var(--spacing) * 2);\n line-height: 1.25;\n cursor: pointer;\n }\n input {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n line-height: 1.5;\n cursor: pointer;\n }\n input:hover {\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary);\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 padding-left: 0.125em;\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n display: grid;\n margin: 0;\n padding: 0;\n gap: 0.25em;\n border: 0;\n }\n .radio-input-wrapper {\n display: flex;\n position: relative;\n min-height: var(--a11y-min-size);\n margin: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-input-wrapper label {\n display: flex;\n width: 100%;\n padding-left: calc(var(--spacing) / 2);\n cursor: pointer;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:before {\n border-radius: 100%;\n display: block;\n content: \"\";\n cursor: pointer;\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 background-color: var(--color-mute-variant);\n cursor: not-allowed;\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 display: contents;\n order: 2;\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 padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 gap: var(--spacing) calc(var(--spacing) * 2);\n flex-wrap: wrap;\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}";
1125
1124
 
1126
- var css_248z$2j = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\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-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1125
+ var css_248z$2j = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\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-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1127
1126
 
1128
- var css_248z$2i = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1127
+ var css_248z$2i = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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::-moz-placeholder {\n color: var(--color-subtle);\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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}";
1129
1128
 
1130
1129
  var css_248z$2h = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc {\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n font-weight: 700;\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 outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n outline-offset: 2px;\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 color: var(--color-light);\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-secondary);\n border-color: var(--color-primary);\n }\n .tertiary:is(a, button) > .kol-span-wc,\n .tertiary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n border-color: var(--color-primary);\n }\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-text);\n background-color: var(--color-light);\n border-color: var(--color-text);\n }\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-primary);\n background-color: var(--color-light);\n box-shadow: none;\n border-color: var(--color-light);\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 .tertiary:is(a, button):active > .kol-span-wc,\n .tertiary: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 color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n .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 .tertiary: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 box-shadow: none;\n outline: none;\n border-color: var(--color-light);\n }\n :is(a, button).hide-label > .kol-span-wc {\n width: unset;\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\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 background-color: transparent;\n box-shadow: none;\n border: none;\n }\n .ghost:is(a, button).small > .kol-span-wc > span {\n background-color: var(--color-light);\n border-color: var(--color-light);\n border-style: solid;\n border-radius: 1.5em;\n border-width: var(--border-width);\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 color: var(--color-light);\n background-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n border-color: var(--color-primary-variant);\n }\n /** :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}";
1131
1130
 
@@ -1139,9 +1138,9 @@ var css_248z$2d = "@layer kol-theme-component {\n :is(a, button) > .kol-span-wc
1139
1138
 
1140
1139
  var css_248z$2c = "@layer kol-theme-component {\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n }\n svg line:last-child,\n svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n }\n .bar .progress {\n fill: var(--color-primary-variant);\n }\n .cycle .progress {\n stroke: var(--color-primary-variant);\n }\n}";
1141
1140
 
1142
- var css_248z$2b = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}\n@layer kol-theme-component {\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n border-radius: var(--border-radius);\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\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 color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
1141
+ var css_248z$2b = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n order: 3;\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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::-moz-placeholder {\n color: var(--color-subtle);\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 .kol-input:not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n}\n@layer kol-theme-component {\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n border-radius: var(--border-radius);\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\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 color: var(--color-light);\n background-color: var(--color-primary-variant);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
1143
1142
 
1144
- var css_248z$2a = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n border: none;\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 padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .single-select__item .radio-label {\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\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 padding: 0;\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 input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1143
+ var css_248z$2a = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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 position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .single-select__input::-moz-placeholder {\n color: var(--color-subtle);\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 padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n place-items: center;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-subtle);\n border-style: solid;\n border-radius: var(--border-radius);\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .single-select__item .radio-label {\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\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 padding: 0;\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 input::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1145
1144
 
1146
1145
  var css_248z$29 = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n border-style: solid;\n border-radius: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1;\n cursor: pointer;\n }\n}";
1147
1146
 
@@ -1153,7 +1152,7 @@ var css_248z$26 = ":host {\n display: flex;\n gap: calc(8rem / var(--kolibri-r
1153
1152
 
1154
1153
  var css_248z$25 = "@layer kol-theme-component {\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 color: var(--color-subtle);\n background-color: transparent;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n line-height: 1.2;\n border: 0;\n font-style: normal;\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 .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}";
1155
1154
 
1156
- var css_248z$24 = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1155
+ var css_248z$24 = "@layer kol-theme-component {\n .msg {\n border-width: 0;\n }\n .kol-alert-wc {\n background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\n }\n .kol-alert-wc.msg {\n border-width: 0;\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\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 border-style: solid;\n border-width: var(--border-width);\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-column: 1/span 2;\n grid-row: 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .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::-moz-placeholder {\n color: var(--color-subtle);\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-style: solid;\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n }\n .input:is(.icon-left, .icon-right) {\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-left: 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 padding-left: 0.125em;\n content: \"*\";\n }\n .kol-input.error:not(.hidden-error) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n border-left: 3px solid var(--color-danger);\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 color: var(--color-text);\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n}";
1157
1156
 
1158
1157
  var css_248z$23 = "@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 background-color: var(--color-light);\n border-color: transparent;\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n border-width: var(--border-width);\n overflow: unset;\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 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 border-style: solid;\n border-width: var(--border-width);\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-right: 0;\n padding-bottom: 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 margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n justify-self: right;\n }\n .toast .card > .heading .kol-heading-wc {\n color: var(--color-light);\n display: flex;\n width: 100%;\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-column: 1/span 2;\n grid-row: 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 /* visible on focus */\n color: var(--color-light);\n border-radius: 50%;\n cursor: pointer;\n }\n .toast .close > button.hide-label .kol-icon {\n display: flex;\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}";
1159
1158
 
@@ -1220,7 +1219,7 @@ var css_248z$1Y = "@layer kol-theme-component {\n :host > span {\n padding:
1220
1219
 
1221
1220
  var css_248z$1X = "@layer kol-theme-component {\n :host {\n font: normal normal 400 calc(14rem / var(--kolibri-root-font-size, 16))/calc(16rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: var(--font-weight-bold);\n }\n .kol-icon::part(icon separator)::before {\n color: var(--color-blue);\n }\n li:last-child {\n color: var(--color-grey-75);\n }\n .kol-icon[exportparts*=separator] {\n padding: 0;\n margin-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n margin-inline-start: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n}";
1222
1221
 
1223
- var css_248z$1W = "@layer kol-theme-component {\n a,\n button {\n background-color: none;\n outline: none;\n text-decoration: none;\n appearance: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n color: var(--color-blue);\n background-color: var(--color-white);\n border-color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n color: var(--color-black);\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n color: var(--color-blue);\n background-color: transparent;\n border-color: transparent;\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
1222
+ var css_248z$1W = "@layer kol-theme-component {\n a,\n button {\n background-color: none;\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n color: var(--color-blue);\n background-color: var(--color-white);\n border-color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n color: var(--color-black);\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n color: var(--color-blue);\n background-color: transparent;\n border-color: transparent;\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
1224
1223
 
1225
1224
  var css_248z$1V = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: inline-flex;\n gap: var(--spacing-2xs);\n flex-wrap: wrap;\n }\n}";
1226
1225
 
@@ -1228,57 +1227,57 @@ var css_248z$1U = "@layer kol-theme-component {\n :is(a, button) {\n color:
1228
1227
 
1229
1228
  var css_248z$1T = "@layer kol-theme-component {\n :host > div {\n background-color: white;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n display: grid;\n width: 100%;\n height: 100%;\n grid-template-rows: min-content 2fr min-content;\n }\n :host .header {\n display: inline-flex;\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n font-size: 1.25em;\n font-weight: 700;\n line-height: 1.75em;\n font-style: normal;\n }\n :host .content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n }\n :host .footer {\n padding: var(--spacing-xs) var(--spacing-m);\n }\n :host > div > .content + .footer {\n border-top: 2px solid var(--color-blue);\n }\n}";
1230
1229
 
1231
- var css_248z$1S = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n color: var(--color-grey);\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n align-items: center;\n text-align: left;\n }\n .combobox__input {\n position: relative;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n padding-right: 1em;\n padding-left: 1em;\n place-items: center;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-color: var(--color-blue);\n border-style: solid;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .combobox__item {\n display: flex;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1.2;\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n color: white;\n background-color: var(--color-blue);\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n border: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1230
+ var css_248z$1S = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n color: var(--color-grey);\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n align-items: center;\n text-align: left;\n }\n .combobox__input {\n position: relative;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n }\n .combobox__input::-moz-placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n padding-right: 1em;\n padding-left: 1em;\n place-items: center;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-color: var(--color-blue);\n border-style: solid;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .combobox__item {\n display: flex;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1.2;\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n color: white;\n background-color: var(--color-blue);\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n border: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1232
1231
 
1233
1232
  var css_248z$1R = "@layer kol-theme-component {\n .details__heading-button:focus-within {\n cursor: pointer;\n }\n .details__heading-button button .kol-span-wc .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n gap: 0;\n text-align: left;\n }\n .details__content.indented-text {\n margin: 0;\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n }\n}";
1234
1233
 
1235
1234
  var css_248z$1Q = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
1236
1235
 
1237
- var css_248z$1P = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc a,\n .kol-link-wc button {\n color: var(--color-blue);\n line-height: 1.2;\n appearance: none;\n }\n .kol-link-wc a:hover,\n .kol-link-wc button:hover {\n color: var(--color-blue-130);\n }\n .mandatory-fields-hint {\n margin: 0;\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}";
1236
+ var css_248z$1P = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc a,\n .kol-link-wc button {\n color: var(--color-blue);\n line-height: 1.2;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-link-wc a:hover,\n .kol-link-wc button:hover {\n color: var(--color-blue-130);\n }\n .mandatory-fields-hint {\n margin: 0;\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: 0;\n border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n border-start-start-radius: 0;\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}";
1238
1237
 
1239
1238
  var css_248z$1O = "@layer kol-theme-component {\n .headline-h1 {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n }\n .headline-h2 {\n font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n line-height: 1.143;\n }\n .headline-h3 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.1667;\n }\n .headline-h4 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.4;\n }\n .headline-h5 {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n .headline-h6 {\n color: rgb(234, 0, 255);\n }\n}";
1240
1239
 
1241
1240
  var css_248z$1N = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n color: var(--color-grey);\n background-color: var(--color-white);\n border-style: solid;\n border-width: 2px;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input kol-alert-wc.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert-wc {\n grid-column: span 2;\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n}";
1242
1241
 
1243
- var css_248z$1M = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1242
+ var css_248z$1M = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1244
1243
 
1245
- var css_248z$1L = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1244
+ var css_248z$1L = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1246
1245
 
1247
- var css_248z$1K = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1246
+ var css_248z$1K = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1248
1247
 
1249
- var css_248z$1J = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1248
+ var css_248z$1J = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1250
1249
 
1251
- var css_248z$1I = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1250
+ var css_248z$1I = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1252
1251
 
1253
- var css_248z$1H = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1252
+ var css_248z$1H = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1254
1253
 
1255
1254
  var css_248z$1G = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n fieldset {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n border: 0;\n }\n .input-slot {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n fieldset .kol-alert-wc {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert-wc {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n display: flex;\n position: relative;\n min-height: var(--a11y-min-size);\n margin: 0;\n flex-direction: row;\n align-items: center;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n border: 2px solid var(--color-grey-75);\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n input[type=radio]:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: 2px solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: 7px;\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n width: 100%;\n order: 1;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n}";
1256
1255
 
1257
- var css_248z$1F = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1256
+ var css_248z$1F = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1258
1257
 
1259
- var css_248z$1E = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1258
+ var css_248z$1E = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1260
1259
 
1261
- var css_248z$1D = "@layer kol-theme-component {\n a,\n button {\n background-color: none;\n outline: none;\n text-decoration: none;\n appearance: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n color: var(--color-blue);\n background-color: var(--color-white);\n border-color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n color: var(--color-black);\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n color: var(--color-blue);\n background-color: transparent;\n border-color: transparent;\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
1260
+ var css_248z$1D = "@layer kol-theme-component {\n a,\n button {\n background-color: none;\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n color: var(--color-blue);\n background-color: var(--color-white);\n border-color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n color: var(--color-black);\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n color: var(--color-blue);\n background-color: transparent;\n border-color: transparent;\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
1262
1261
 
1263
- var css_248z$1C = "@layer kol-theme-component {\n a,\n button {\n color: var(--color-blue);\n line-height: 1.2;\n appearance: none;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
1262
+ var css_248z$1C = "@layer kol-theme-component {\n a,\n button {\n color: var(--color-blue);\n line-height: 1.2;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
1264
1263
 
1265
1264
  var css_248z$1B = "@layer kol-theme-component {\n .list {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .list.vertical {\n flex-direction: column;\n }\n .entry {\n display: flex;\n }\n .entry .kol-button-wc:first-child,\n .entry .kol-link-wc,\n .entry .kol-span-wc {\n flex-grow: 1;\n }\n /* custom. */\n nav {\n background-color: var(--color-blue);\n }\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .expand-button button {\n background-color: var(--color-blue-130);\n height: 100%;\n margin: auto;\n }\n .kol-span-wc {\n color: var(--color-white);\n border-color: transparent;\n border-style: solid;\n height: 100%;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n justify-items: start;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n }\n li > ul,\n li + li {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n border-top-width: 2px;\n }\n a {\n text-decoration: none;\n }\n :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {\n border-color: var(--color-white);\n }\n :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,\n :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {\n text-decoration: underline;\n }\n div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .expanded > div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n button.toggle-button :focus .kol-span-wc {\n outline-offset: -2px;\n }\n .toggle-button a .kol-span-wc,\n .toggle-button button .kol-span-wc {\n color: var(--color-blue);\n background-color: transparent;\n border-color: transparent;\n }\n .toggle-button a:focus .kol-span-wc,\n .toggle-button button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .toggle-button a:hover .kol-span-wc,\n .toggle-button button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
1266
1265
 
1267
- var css_248z$1A = "@layer kol-theme-component {\n :host {\n display: grid;\n }\n .button {\n background-color: none;\n outline: none;\n text-decoration: none;\n appearance: none;\n }\n .button-inner {\n color: var(--color-black);\n background-color: var(--color-yellow);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n font-weight: var(--font-weight-bold);\n border: 2px solid var(--color-yellow);\n }\n .button:not(:disabled):hover .button-inner {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .button:focus .button-inner {\n outline: 2px solid var(--color-black);\n outline-offset: -4px;\n }\n .button:disabled .button-inner {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .selected .button-inner {\n opacity: 1;\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n text-decoration: underline;\n }\n}";
1266
+ var css_248z$1A = "@layer kol-theme-component {\n :host {\n display: grid;\n }\n .button {\n background-color: none;\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .button-inner {\n color: var(--color-black);\n background-color: var(--color-yellow);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n font-weight: var(--font-weight-bold);\n border: 2px solid var(--color-yellow);\n }\n .button:not(:disabled):hover .button-inner {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .button:focus .button-inner {\n outline: 2px solid var(--color-black);\n outline-offset: -4px;\n }\n .button:disabled .button-inner {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .selected .button-inner {\n opacity: 1;\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n text-decoration: underline;\n }\n}";
1268
1267
 
1269
- var css_248z$1z = "@layer kol-theme-component {\n a,\n button {\n background-color: none;\n outline: none;\n text-decoration: none;\n appearance: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n color: var(--color-blue);\n background-color: var(--color-white);\n border-color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n color: var(--color-black);\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n color: var(--color-blue);\n background-color: transparent;\n border-color: transparent;\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n}";
1268
+ var css_248z$1z = "@layer kol-theme-component {\n a,\n button {\n background-color: none;\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n color: var(--color-blue);\n background-color: var(--color-white);\n border-color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n color: var(--color-black);\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n color: var(--color-blue);\n background-color: transparent;\n border-color: transparent;\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n}";
1270
1269
 
1271
1270
  var css_248z$1y = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n width: 0;\n height: 0;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-grey-25);\n }\n svg line:last-child,\n svg circle:last-child {\n fill: transparent;\n stroke: var(--color-blue-130);\n }\n progress {\n display: none;\n }\n}";
1272
1271
 
1273
- var css_248z$1x = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1272
+ var css_248z$1x = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1274
1273
 
1275
- var css_248z$1w = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n color: var(--color-grey);\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n text-align: left;\n }\n .single-select__input {\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n padding-left: 1em;\n place-items: center;\n cursor: pointer;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-blue);\n border-style: solid;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 1rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n padding-left: 1em;\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n color: white;\n background-color: var(--color-blue);\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n border: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1274
+ var css_248z$1w = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n color: var(--color-grey);\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n text-align: left;\n }\n .single-select__input {\n position: relative;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n }\n .single-select__input::-moz-placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n padding-left: 1em;\n place-items: center;\n cursor: pointer;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-blue);\n border-style: solid;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 1rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n padding-left: 1em;\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n color: white;\n background-color: var(--color-blue);\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n border: none;\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1276
1275
 
1277
1276
  var css_248z$1v = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n border-style: solid;\n border-radius: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: var(--font-weight-bold);\n line-height: 1;\n cursor: pointer;\n }\n}";
1278
1277
 
1279
1278
  var css_248z$1u = "@layer kol-theme-component {\n .cycle {\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .cycle span {\n background-color: var(--color-blue-75);\n }\n}";
1280
1279
 
1281
- var css_248z$1t = "@layer kol-theme-component {\n :host {\n border-color: var(--color-blue);\n border-style: solid;\n border-radius: 0;\n border-width: 2px;\n }\n .popover {\n background-color: #fff;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n font-weight: var(--font-weight-bold);\n }\n a,\n button {\n background-color: none;\n outline: none;\n text-decoration: none;\n appearance: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n color: var(--color-blue);\n background-color: var(--color-white);\n border-color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n color: var(--color-black);\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n color: var(--color-blue);\n background-color: transparent;\n border-color: transparent;\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
1280
+ var css_248z$1t = "@layer kol-theme-component {\n :host {\n border-color: var(--color-blue);\n border-style: solid;\n border-radius: 0;\n border-width: 2px;\n }\n .popover {\n background-color: #fff;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n font-weight: var(--font-weight-bold);\n }\n a,\n button {\n background-color: none;\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n color: var(--color-blue);\n background-color: var(--color-white);\n border-color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n color: var(--color-black);\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n color: var(--color-blue);\n background-color: transparent;\n border-color: transparent;\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
1282
1281
 
1283
1282
  var css_248z$1s = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table-stateless-wc {\n display: block;\n }\n :host > div,\n .kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5em;\n }\n th {\n color: var(--color-midnight);\n font-weight: normal;\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-color: var(--color-ice);\n border-style: solid;\n border-width: 0;\n border-top-width: 2px;\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-color: var(--color-ice);\n border-style: solid;\n border-width: 0;\n border-bottom-width: 2px;\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-width: 2px;\n border-color: var(--color-blue);\n outline-offset: 2px;\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n border-color: var(--color-grey-75);\n display: block;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
1284
1283
 
@@ -1286,11 +1285,11 @@ var css_248z$1r = "@layer kol-theme-component {\n :host {\n display: flex;\n
1286
1285
 
1287
1286
  var css_248z$1q = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group {\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n border-bottom: 1px solid var(--color-grey-25);\n }\n .tabs-button-group button {\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .tabs-button-group button .kol-span-wc {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button.selected .kol-span-wc {\n color: var(--color-blue);\n box-shadow: 0 -3px var(--color-blue);\n border-color: var(--color-grey-25);\n border-style: solid;\n border-top-color: var(--color-blue);\n border-bottom-color: white;\n border-width: 1px;\n font-weight: var(--font-weight-bold);\n }\n .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .tabs-button-group button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
1288
1287
 
1289
- var css_248z$1p = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1288
+ var css_248z$1p = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1290
1289
 
1291
1290
  var css_248z$1o = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n background-color: #fff;\n display: block;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast div {\n background-color: var(--color-white);\n }\n .toast div.card {\n border-style: solid;\n border-width: 2px;\n }\n .toast div.msg {\n border: none;\n }\n .toast .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n .toast .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n .toast .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .default {\n border-color: var(--color-grey);\n }\n .toast .default .heading .kol-icon {\n color: var(--color-grey);\n }\n .toast .error {\n border-color: var(--color-red);\n }\n .toast .error .heading .kol-icon {\n color: var(--color-red);\n }\n .toast .info {\n border-color: var(--color-blue);\n }\n .toast .info .heading .kol-icon {\n color: var(--color-blue);\n }\n .toast .success {\n border-color: var(--color-green);\n }\n .toast .success .heading .kol-icon {\n color: var(--color-green);\n }\n .toast .warning {\n border-color: var(--color-orange);\n }\n .toast .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .alert {\n display: block;\n }\n}";
1292
1291
 
1293
- var css_248z$1n = "@layer kol-theme-component {\n .toolbar {\n background-color: var(--color-grey-5);\n border-color: var(--color-grey-25);\n border-style: solid;\n padding: var(--spacing-s);\n border-width: 1px;\n }\n a,\n button {\n background-color: none;\n outline: none;\n text-decoration: none;\n appearance: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n color: var(--color-blue);\n background-color: var(--color-white);\n border-color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n color: var(--color-black);\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n color: var(--color-blue);\n background-color: transparent;\n border-color: transparent;\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
1292
+ var css_248z$1n = "@layer kol-theme-component {\n .toolbar {\n background-color: var(--color-grey-5);\n border-color: var(--color-grey-25);\n border-style: solid;\n padding: var(--spacing-s);\n border-width: 1px;\n }\n a,\n button {\n background-color: none;\n outline: none;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a .kol-span-wc,\n button .kol-span-wc {\n border-style: solid;\n border-radius: 0;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n a.primary .kol-span-wc,\n button.primary .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n a.primary:focus .kol-span-wc,\n button.primary:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n a.primary:hover .kol-span-wc,\n button.primary:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.secondary .kol-span-wc,\n button.secondary .kol-span-wc {\n color: var(--color-blue);\n background-color: var(--color-white);\n border-color: var(--color-blue);\n }\n a.secondary:focus .kol-span-wc,\n button.secondary:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n a.secondary:hover .kol-span-wc,\n button.secondary:hover .kol-span-wc {\n color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n a.normal .kol-span-wc,\n button.normal .kol-span-wc {\n color: var(--color-black);\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n }\n a.normal:hover .kol-span-wc,\n button.normal:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost .kol-span-wc,\n button.ghost .kol-span-wc {\n color: var(--color-blue);\n background-color: transparent;\n border-color: transparent;\n }\n a.ghost:focus .kol-span-wc,\n button.ghost:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n a.ghost:hover .kol-span-wc,\n button.ghost:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
1294
1293
 
1295
1294
  var css_248z$1m = "@layer kol-theme-component {\n .tree ul {\n display: flex;\n flex-direction: column;\n }\n}";
1296
1295
 
@@ -1350,21 +1349,21 @@ var css_248z$1i = "@layer kol-theme-component {\n :host div {\n background-c
1350
1349
 
1351
1350
  var css_248z$1h = "@layer kol-theme-component {\n :host > span {\n padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n font: normal normal var(--font-weight) calc(14rem / var(--kolibri-root-font-size, 16))/1em var(--font-family);\n text-transform: uppercase;\n }\n}";
1352
1351
 
1353
- var css_248z$1g = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n a,\n button {\n border-radius: 4px;\n text-decoration: none;\n appearance: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n a.primary > .kol-span-wc,\n button.primary > .kol-span-wc {\n color: #fff;\n background-color: #0e47cb;\n }\n a.primary:focus-visible > .kol-span-wc,\n button.primary:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n a.primary:hover > .kol-span-wc,\n button.primary:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n a.secondary > .kol-span-wc,\n button.secondary > .kol-span-wc {\n color: #0e47cb;\n background-color: #fff;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n a.secondary:focus-visible > .kol-span-wc,\n button.secondary:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n a.secondary:hover > .kol-span-wc,\n button.secondary:hover > .kol-span-wc {\n color: #0e47cb;\n border-color: #0e47cb;\n }\n a.normal > .kol-span-wc,\n button.normal > .kol-span-wc {\n color: #171a22;\n background-color: #fc0;\n }\n a.normal:focus-visible > .kol-span-wc,\n button.normal:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n a.normal:hover > .kol-span-wc,\n button.normal:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost > .kol-span-wc,\n button.ghost > .kol-span-wc {\n color: #0e47cb;\n }\n a.ghost:focus-visible > .kol-span-wc,\n button.ghost:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n a.ghost:hover > .kol-span-wc,\n button.ghost:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
1352
+ var css_248z$1g = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n a,\n button {\n border-radius: 4px;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n a.primary > .kol-span-wc,\n button.primary > .kol-span-wc {\n color: #fff;\n background-color: #0e47cb;\n }\n a.primary:focus-visible > .kol-span-wc,\n button.primary:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n a.primary:hover > .kol-span-wc,\n button.primary:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n a.secondary > .kol-span-wc,\n button.secondary > .kol-span-wc {\n color: #0e47cb;\n background-color: #fff;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n a.secondary:focus-visible > .kol-span-wc,\n button.secondary:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n a.secondary:hover > .kol-span-wc,\n button.secondary:hover > .kol-span-wc {\n color: #0e47cb;\n border-color: #0e47cb;\n }\n a.normal > .kol-span-wc,\n button.normal > .kol-span-wc {\n color: #171a22;\n background-color: #fc0;\n }\n a.normal:focus-visible > .kol-span-wc,\n button.normal:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n a.normal:hover > .kol-span-wc,\n button.normal:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost > .kol-span-wc,\n button.ghost > .kol-span-wc {\n color: #0e47cb;\n }\n a.ghost:focus-visible > .kol-span-wc,\n button.ghost:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n a.ghost:hover > .kol-span-wc,\n button.ghost:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
1354
1353
 
1355
1354
  var css_248z$1f = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n gap: var(--spacing-2xs);\n }\n}";
1356
1355
 
1357
- var css_248z$1e = "@layer kol-theme-component {\n a,\n button {\n color: var(--color-blue);\n text-decoration: underline;\n appearance: none;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
1356
+ var css_248z$1e = "@layer kol-theme-component {\n a,\n button {\n color: var(--color-blue);\n text-decoration: underline;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
1358
1357
 
1359
1358
  var css_248z$1d = "@layer kol-theme-component {\n :host > div {\n background-color: white;\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n display: grid;\n width: 100%;\n height: 100%;\n grid-template-rows: min-content 2fr min-content;\n }\n :host .header {\n display: inline-flex;\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n font-size: 1.25em;\n font-weight: 700;\n line-height: 1.75;\n font-style: normal;\n }\n :host .content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n }\n :host .footer {\n padding: var(--spacing-xs) var(--spacing-m);\n }\n :host > div > .content + .footer {\n border-top: 2px solid var(--color-blue);\n }\n}";
1360
1359
 
1361
- var css_248z$1c = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-input .error {\n order: 1;\n }\n label {\n order: 2;\n font-weight: var(--font-weight-bold);\n }\n .kol-input .input {\n order: 3;\n }\n .combobox {\n position: relative;\n }\n .combobox__group {\n color: var(--color-grey);\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n align-items: center;\n text-align: left;\n }\n .combobox__input {\n position: relative;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n padding-right: 1em;\n padding-left: 1em;\n place-items: center;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-color: var(--color-blue);\n border-style: solid;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .combobox__item {\n display: flex;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1.2;\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n color: white;\n background-color: var(--color-blue);\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1360
+ var css_248z$1c = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-input .error {\n order: 1;\n }\n label {\n order: 2;\n font-weight: var(--font-weight-bold);\n }\n .kol-input .input {\n order: 3;\n }\n .combobox {\n position: relative;\n }\n .combobox__group {\n color: var(--color-grey);\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n align-items: center;\n text-align: left;\n }\n .combobox__input {\n position: relative;\n width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n flex-grow: 1;\n border: none;\n }\n .combobox__input::-moz-placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input::placeholder {\n color: var(--color-grey-50);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n padding-right: 1em;\n padding-left: 1em;\n place-items: center;\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-color: var(--color-blue);\n border-style: solid;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .combobox__item {\n display: flex;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1.2;\n }\n .combobox__item[aria-selected], .combobox__item:focus {\n color: white;\n background-color: var(--color-blue);\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .combobox:not(.combobox--disabled) .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1362
1361
 
1363
1362
  var css_248z$1b = "@layer kol-theme-component {\n .details__heading-button:focus-within {\n cursor: pointer;\n }\n .details__heading-button button .kol-span-wc .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n gap: 0;\n text-align: left;\n }\n .details__content.indented-text {\n display: inline-block;\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n }\n}";
1364
1363
 
1365
1364
  var css_248z$1a = "@layer kol-theme-component {\n :host .drawer__wrapper {\n box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n }\n}";
1366
1365
 
1367
- var css_248z$19 = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc a,\n .kol-link-wc button {\n color: var(--color-blue);\n line-height: 1.2;\n appearance: none;\n }\n .kol-link-wc a:hover,\n .kol-link-wc button:hover {\n color: var(--color-blue-130);\n }\n .mandatory-fields-hint {\n display: inline-block;\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}";
1366
+ var css_248z$19 = "@layer kol-theme-component {\n :host {\n width: 100%;\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-link-wc {\n display: inline-block;\n }\n .kol-link-wc a,\n .kol-link-wc button {\n color: var(--color-blue);\n line-height: 1.2;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n .kol-link-wc a:hover,\n .kol-link-wc button:hover {\n color: var(--color-blue-130);\n }\n .mandatory-fields-hint {\n display: inline-block;\n padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}";
1368
1367
 
1369
1368
  var css_248z$18 = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n font-weight: var(--font-weight-bold);\n }\n .headline-h1 {\n font-size: calc(42rem / var(--kolibri-root-font-size, 16));\n line-height: 3.25;\n }\n .headline-h2 {\n font-size: calc(36rem / var(--kolibri-root-font-size, 16));\n line-height: 2.755;\n }\n .headline-h3 {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n line-height: 2.5;\n }\n .headline-h4 {\n font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n line-height: 2;\n }\n .headline-h5 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n }\n .headline-h6 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1.75;\n }\n}";
1370
1369
 
@@ -1372,43 +1371,43 @@ var css_248z$17 = "@layer kol-theme-component {\n .kol-indented-text-wc > div {
1372
1371
 
1373
1372
  var css_248z$16 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n color: var(--color-grey);\n background-color: var(--color-white);\n border-style: solid;\n border-width: 2px;\n line-height: 1.5;\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input .kol-alert-wc.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert-wc {\n grid-column: span 2;\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
1374
1373
 
1375
- var css_248z$15 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1374
+ var css_248z$15 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1376
1375
 
1377
- var css_248z$14 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1376
+ var css_248z$14 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1378
1377
 
1379
- var css_248z$13 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1378
+ var css_248z$13 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1380
1379
 
1381
- var css_248z$12 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1380
+ var css_248z$12 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1382
1381
 
1383
- var css_248z$11 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1382
+ var css_248z$11 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1384
1383
 
1385
- var css_248z$10 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1384
+ var css_248z$10 = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1386
1385
 
1387
1386
  var css_248z$$ = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n fieldset {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n border: 0;\n }\n fieldset .kol-alert-wc {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert-wc {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n display: flex;\n position: relative;\n min-height: var(--a11y-min-size);\n margin: 0;\n flex-direction: row;\n align-items: center;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n outline: 2px solid var(--color-grey-75);\n outline-offset: 2px;\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n input[type=radio]:focus {\n outline-color: var(--color-blue);\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: 2px solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: 7px;\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n width: 100%;\n order: 1;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n}";
1388
1387
 
1389
1388
  var css_248z$_ = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
1390
1389
 
1391
- var css_248z$Z = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1390
+ var css_248z$Z = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1392
1391
 
1393
- var css_248z$Y = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n a,\n button {\n border-radius: 4px;\n text-decoration: none;\n appearance: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n a.primary > .kol-span-wc,\n button.primary > .kol-span-wc {\n color: #fff;\n background-color: #0e47cb;\n }\n a.primary:focus-visible > .kol-span-wc,\n button.primary:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n a.primary:hover > .kol-span-wc,\n button.primary:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n a.secondary > .kol-span-wc,\n button.secondary > .kol-span-wc {\n color: #0e47cb;\n background-color: #fff;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n a.secondary:focus-visible > .kol-span-wc,\n button.secondary:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n a.secondary:hover > .kol-span-wc,\n button.secondary:hover > .kol-span-wc {\n color: #0e47cb;\n border-color: #0e47cb;\n }\n a.normal > .kol-span-wc,\n button.normal > .kol-span-wc {\n color: #171a22;\n background-color: #fc0;\n }\n a.normal:focus-visible > .kol-span-wc,\n button.normal:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n a.normal:hover > .kol-span-wc,\n button.normal:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost > .kol-span-wc,\n button.ghost > .kol-span-wc {\n color: #0e47cb;\n }\n a.ghost:focus-visible > .kol-span-wc,\n button.ghost:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n a.ghost:hover > .kol-span-wc,\n button.ghost:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
1392
+ var css_248z$Y = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n a,\n button {\n border-radius: 4px;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n a.primary > .kol-span-wc,\n button.primary > .kol-span-wc {\n color: #fff;\n background-color: #0e47cb;\n }\n a.primary:focus-visible > .kol-span-wc,\n button.primary:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n a.primary:hover > .kol-span-wc,\n button.primary:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n a.secondary > .kol-span-wc,\n button.secondary > .kol-span-wc {\n color: #0e47cb;\n background-color: #fff;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n a.secondary:focus-visible > .kol-span-wc,\n button.secondary:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n a.secondary:hover > .kol-span-wc,\n button.secondary:hover > .kol-span-wc {\n color: #0e47cb;\n border-color: #0e47cb;\n }\n a.normal > .kol-span-wc,\n button.normal > .kol-span-wc {\n color: #171a22;\n background-color: #fc0;\n }\n a.normal:focus-visible > .kol-span-wc,\n button.normal:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n a.normal:hover > .kol-span-wc,\n button.normal:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost > .kol-span-wc,\n button.ghost > .kol-span-wc {\n color: #0e47cb;\n }\n a.ghost:focus-visible > .kol-span-wc,\n button.ghost:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n a.ghost:hover > .kol-span-wc,\n button.ghost:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
1394
1393
 
1395
- var css_248z$X = "@layer kol-theme-component {\n a,\n button {\n color: var(--color-blue);\n line-height: 1.2;\n appearance: none;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
1394
+ var css_248z$X = "@layer kol-theme-component {\n a,\n button {\n color: var(--color-blue);\n line-height: 1.2;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
1396
1395
 
1397
1396
  var css_248z$W = "@layer kol-theme-component {\n .list {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .list.vertical {\n flex-direction: column;\n }\n .entry {\n display: flex;\n }\n .entry .kol-button-wc:first-child,\n .entry .kol-link-wc,\n .entry .kol-span-wc {\n flex-grow: 1;\n }\n /* custom. */\n nav {\n background-color: var(--color-blue);\n }\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .expand-button button {\n background-color: var(--color-blue-130);\n height: 100%;\n margin: auto;\n }\n .kol-span-wc {\n color: var(--color-white);\n border-color: transparent;\n border-style: solid;\n height: 100%;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n border-width: 2px;\n justify-items: start;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n }\n li > ul,\n li + li {\n border-color: var(--color-blue-75);\n border-style: solid;\n border-width: 0;\n border-top-width: 2px;\n }\n a {\n text-decoration: none;\n }\n :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {\n border-color: var(--color-white);\n }\n :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,\n :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {\n text-decoration: underline;\n }\n div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab6\";\n }\n .expanded > div > .expand-button kol-icon::part(icon)::before {\n content: \"\\eab4\";\n }\n .toggle-button a > .kol-span-wc,\n .toggle-button button > .kol-span-wc {\n color: #0e47cb;\n }\n .toggle-button a:focus-visible > .kol-span-wc,\n .toggle-button button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .toggle-button a:hover > .kol-span-wc,\n .toggle-button button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
1398
1397
 
1399
1398
  var css_248z$V = "@layer kol-theme-component {\n :host {\n display: grid;\n }\n .button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n border-radius: 4px;\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n color: #171a22;\n background-color: #fc0;\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n }\n .button:focus-visible .button-inner {\n outline: 2px solid var(--color-black);\n outline-offset: -4px;\n }\n button:not(:disabled):active .button-inner,\n button:not(:disabled):hover .button-inner {\n background-color: #fc0;\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n border-color: #fc0;\n }\n .button:disabled .button-inner {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .selected .button-inner {\n opacity: 1;\n color: var(--color-white);\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n font-weight: bold;\n text-decoration: underline;\n }\n}";
1400
1399
 
1401
- var css_248z$U = "@layer kol-theme-component {\n a,\n button {\n border-radius: 4px;\n text-decoration: none;\n appearance: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n a.primary > .kol-span-wc,\n button.primary > .kol-span-wc {\n color: #fff;\n background-color: #0e47cb;\n }\n a.primary:focus-visible > .kol-span-wc,\n button.primary:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n a.primary:hover > .kol-span-wc,\n button.primary:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n a.secondary > .kol-span-wc,\n button.secondary > .kol-span-wc {\n color: #0e47cb;\n background-color: #fff;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n a.secondary:focus-visible > .kol-span-wc,\n button.secondary:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n a.secondary:hover > .kol-span-wc,\n button.secondary:hover > .kol-span-wc {\n color: #0e47cb;\n border-color: #0e47cb;\n }\n a.normal > .kol-span-wc,\n button.normal > .kol-span-wc {\n color: #171a22;\n background-color: #fc0;\n }\n a.normal:focus-visible > .kol-span-wc,\n button.normal:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n a.normal:hover > .kol-span-wc,\n button.normal:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost > .kol-span-wc,\n button.ghost > .kol-span-wc {\n color: #0e47cb;\n }\n a.ghost:focus-visible > .kol-span-wc,\n button.ghost:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n a.ghost:hover > .kol-span-wc,\n button.ghost:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
1400
+ var css_248z$U = "@layer kol-theme-component {\n a,\n button {\n border-radius: 4px;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n a.primary > .kol-span-wc,\n button.primary > .kol-span-wc {\n color: #fff;\n background-color: #0e47cb;\n }\n a.primary:focus-visible > .kol-span-wc,\n button.primary:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n a.primary:hover > .kol-span-wc,\n button.primary:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n a.secondary > .kol-span-wc,\n button.secondary > .kol-span-wc {\n color: #0e47cb;\n background-color: #fff;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n a.secondary:focus-visible > .kol-span-wc,\n button.secondary:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n a.secondary:hover > .kol-span-wc,\n button.secondary:hover > .kol-span-wc {\n color: #0e47cb;\n border-color: #0e47cb;\n }\n a.normal > .kol-span-wc,\n button.normal > .kol-span-wc {\n color: #171a22;\n background-color: #fc0;\n }\n a.normal:focus-visible > .kol-span-wc,\n button.normal:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n a.normal:hover > .kol-span-wc,\n button.normal:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost > .kol-span-wc,\n button.ghost > .kol-span-wc {\n color: #0e47cb;\n }\n a.ghost:focus-visible > .kol-span-wc,\n button.ghost:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n a.ghost:hover > .kol-span-wc,\n button.ghost:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
1402
1401
 
1403
- var css_248z$T = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1402
+ var css_248z$T = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1404
1403
 
1405
- var css_248z$S = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .single-select {\n position: relative;\n }\n .single-select__group {\n color: var(--color-grey);\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n }\n .single-select__input {\n position: relative;\n width: calc(100% - 2.5rem);\n flex-grow: 1;\n border: none;\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n padding-left: 1em;\n place-items: center;\n cursor: pointer;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-blue);\n border-style: solid;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n display: flex;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: flex-start;\n justify-items: center;\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n padding-left: 1em;\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n color: white;\n background-color: var(--color-blue);\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1404
+ var css_248z$S = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .single-select {\n position: relative;\n }\n .single-select__group {\n color: var(--color-grey);\n display: inline-flex;\n width: 100%;\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n }\n .single-select__input {\n position: relative;\n width: calc(100% - 2.5rem);\n flex-grow: 1;\n border: none;\n }\n .single-select__input::-moz-placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input::placeholder {\n color: var(--color-grey-50);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-blue);\n }\n .single-select__button {\n display: grid;\n padding-left: 1em;\n place-items: center;\n cursor: pointer;\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-color: var(--color-blue);\n border-style: solid;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n }\n .single-select__item {\n display: flex;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n align-items: flex-start;\n justify-items: center;\n line-height: 1.2;\n }\n .single-select__item .radio-label {\n padding-left: 1em;\n align-self: center;\n }\n .single-select__item[aria-selected], .single-select__item:focus, .single-select__item.highlighted {\n color: white;\n background-color: var(--color-blue);\n outline: 0;\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16));\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1406
1405
 
1407
1406
  var css_248z$R = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-wc {\n color: #fff;\n background-color: #0e47cb;\n border-radius: 4px;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n cursor: pointer;\n }\n}";
1408
1407
 
1409
1408
  var css_248z$Q = "@layer kol-theme-component {\n .cycle {\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .cycle span {\n background-color: var(--color-blue-80);\n }\n}";
1410
1409
 
1411
- var css_248z$P = "@layer kol-theme-component {\n :host {\n border-color: var(--color-blue);\n border-style: solid;\n border-radius: 4px;\n border-width: 2px;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n .popover {\n background-color: #fff;\n }\n a,\n button {\n border-radius: 4px;\n text-decoration: none;\n appearance: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n a.primary > .kol-span-wc,\n button.primary > .kol-span-wc {\n color: #fff;\n background-color: #0e47cb;\n }\n a.primary:focus-visible > .kol-span-wc,\n button.primary:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n a.primary:hover > .kol-span-wc,\n button.primary:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n a.secondary > .kol-span-wc,\n button.secondary > .kol-span-wc {\n color: #0e47cb;\n background-color: #fff;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n a.secondary:focus-visible > .kol-span-wc,\n button.secondary:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n a.secondary:hover > .kol-span-wc,\n button.secondary:hover > .kol-span-wc {\n color: #0e47cb;\n border-color: #0e47cb;\n }\n a.normal > .kol-span-wc,\n button.normal > .kol-span-wc {\n color: #171a22;\n background-color: #fc0;\n }\n a.normal:focus-visible > .kol-span-wc,\n button.normal:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n a.normal:hover > .kol-span-wc,\n button.normal:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost > .kol-span-wc,\n button.ghost > .kol-span-wc {\n color: #0e47cb;\n }\n a.ghost:focus-visible > .kol-span-wc,\n button.ghost:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n a.ghost:hover > .kol-span-wc,\n button.ghost:hover > .kol-span-wc {\n color: #0e47cb;\n }\n .main-button > .button > .kol-span-wc {\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-right-radius: 0;\n border-right: none;\n border-top-left-radius: calc(var(--border-radius) - var(--border-width));\n border-top-right-radius: 0;\n }\n .secondary-button > .button > .kol-span-wc {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));\n border-left: none;\n border-top-left-radius: 0;\n border-top-right-radius: calc(var(--border-radius) - var(--border-width));\n }\n}";
1410
+ var css_248z$P = "@layer kol-theme-component {\n :host {\n border-color: var(--color-blue);\n border-style: solid;\n border-radius: 4px;\n border-width: 2px;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n .popover {\n background-color: #fff;\n }\n a,\n button {\n border-radius: 4px;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n a.primary > .kol-span-wc,\n button.primary > .kol-span-wc {\n color: #fff;\n background-color: #0e47cb;\n }\n a.primary:focus-visible > .kol-span-wc,\n button.primary:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n a.primary:hover > .kol-span-wc,\n button.primary:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n a.secondary > .kol-span-wc,\n button.secondary > .kol-span-wc {\n color: #0e47cb;\n background-color: #fff;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n a.secondary:focus-visible > .kol-span-wc,\n button.secondary:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n a.secondary:hover > .kol-span-wc,\n button.secondary:hover > .kol-span-wc {\n color: #0e47cb;\n border-color: #0e47cb;\n }\n a.normal > .kol-span-wc,\n button.normal > .kol-span-wc {\n color: #171a22;\n background-color: #fc0;\n }\n a.normal:focus-visible > .kol-span-wc,\n button.normal:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n a.normal:hover > .kol-span-wc,\n button.normal:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost > .kol-span-wc,\n button.ghost > .kol-span-wc {\n color: #0e47cb;\n }\n a.ghost:focus-visible > .kol-span-wc,\n button.ghost:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n a.ghost:hover > .kol-span-wc,\n button.ghost:hover > .kol-span-wc {\n color: #0e47cb;\n }\n .main-button > .button > .kol-span-wc {\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-width));\n border-bottom-right-radius: 0;\n border-right: none;\n border-top-left-radius: calc(var(--border-radius) - var(--border-width));\n border-top-right-radius: 0;\n }\n .secondary-button > .button > .kol-span-wc {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-width));\n border-left: none;\n border-top-left-radius: 0;\n border-top-right-radius: calc(var(--border-radius) - var(--border-width));\n }\n}";
1412
1411
 
1413
1412
  var css_248z$O = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .pagination {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n }\n .kol-table-stateless-wc {\n display: block;\n }\n caption {\n padding: 0.5em;\n }\n th {\n color: var(--color-midnight);\n font-weight: normal;\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-color: var(--color-ice);\n border-style: solid;\n border-width: 0;\n border-top-width: 2px;\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-color: var(--color-ice);\n border-style: solid;\n border-width: 0;\n border-bottom-width: 2px;\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n outline-color: var(--color-blue);\n outline-style: solid;\n outline-width: 2px;\n border-color: var(--color-blue);\n outline-offset: 2px;\n }\n .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n outline: 2px solid var(--color-grey-75);\n display: block;\n outline-offset: 2px;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n outline: 2px solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
1414
1413
 
@@ -1416,11 +1415,11 @@ var css_248z$N = "@layer kol-theme-component {\n :host {\n display: flex;\n
1416
1415
 
1417
1416
  var css_248z$M = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group {\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n border-bottom: 1px solid var(--color-grey-25);\n }\n .tabs-button-group button {\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .tabs-button-group button .kol-span-wc {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button.selected .kol-span-wc {\n color: var(--color-blue);\n box-shadow: 0 -3 px var(--color-blue);\n border-color: var(--color-grey-25);\n border-style: solid;\n border-top-color: var(--color-blue);\n border-bottom-color: white;\n border-width: 1px;\n font-weight: var(--font-weight-bold);\n }\n .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .tabs-button-group button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
1418
1417
 
1419
- var css_248z$L = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1418
+ var css_248z$L = "@layer kol-theme-component {\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n outline: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n input,\n select:not([multiple]) {\n height: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-bottom: 1px solid var(--color-blue);\n border-top: 1px solid var(--color-blue);\n }\n label {\n order: 1;\n font-weight: var(--font-weight-bold);\n }\n .hint {\n order: 2;\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc {\n color: var(--color-red);\n margin-left: calc(-1 * var(--spacing-2xs));\n font-size: 0.875em;\n order: 3;\n }\n .input {\n color: var(--color-grey);\n min-height: var(--a11y-min-size);\n padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n order: 4;\n align-items: center;\n border: 1px solid var(--color-grey-75);\n }\n input::-moz-placeholder, textarea::-moz-placeholder {\n color: var(--color-grey-50);\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
1420
1419
 
1421
1420
  var css_248z$K = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n background-color: #fff;\n display: block;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast div {\n background-color: var(--color-white);\n }\n .toast div.card {\n border-style: solid;\n border-width: 2px;\n }\n .toast div.msg {\n border: none;\n }\n .toast .msg .heading .kol-icon {\n margin: var(--spacing-2xs);\n font-size: 1.5em;\n }\n .toast .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n .toast .card {\n padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .default {\n border-color: var(--color-grey);\n }\n .toast .default .heading kol-icon {\n color: var(--color-grey);\n }\n .toast .error {\n border-color: var(--color-red);\n }\n .toast .error .heading .kol-icon {\n color: var(--color-red);\n }\n .toast .info {\n border-color: var(--color-blue);\n }\n .toast .info .heading .kol-icon {\n color: var(--color-blue);\n }\n .toast .success {\n border-color: var(--color-green);\n }\n .toast .success .heading .kol-icon {\n color: var(--color-green);\n }\n .toast .warning {\n border-color: var(--color-orange);\n }\n .toast .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .toast .heading {\n width: 100%;\n }\n .toast .heading .heading-content {\n flex: 1;\n }\n .alert {\n display: block;\n }\n}";
1422
1421
 
1423
- var css_248z$J = "@layer kol-theme-component {\n .toolbar {\n background-color: var(--color-white);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n border-radius: 8px;\n padding: var(--spacing-s);\n }\n a,\n button {\n border-radius: 4px;\n text-decoration: none;\n appearance: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n a.primary > .kol-span-wc,\n button.primary > .kol-span-wc {\n color: #fff;\n background-color: #0e47cb;\n }\n a.primary:focus-visible > .kol-span-wc,\n button.primary:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n a.primary:hover > .kol-span-wc,\n button.primary:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n a.secondary > .kol-span-wc,\n button.secondary > .kol-span-wc {\n color: #0e47cb;\n background-color: #fff;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n a.secondary:focus-visible > .kol-span-wc,\n button.secondary:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n a.secondary:hover > .kol-span-wc,\n button.secondary:hover > .kol-span-wc {\n color: #0e47cb;\n border-color: #0e47cb;\n }\n a.normal > .kol-span-wc,\n button.normal > .kol-span-wc {\n color: #171a22;\n background-color: #fc0;\n }\n a.normal:focus-visible > .kol-span-wc,\n button.normal:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n a.normal:hover > .kol-span-wc,\n button.normal:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost > .kol-span-wc,\n button.ghost > .kol-span-wc {\n color: #0e47cb;\n }\n a.ghost:focus-visible > .kol-span-wc,\n button.ghost:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n a.ghost:hover > .kol-span-wc,\n button.ghost:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
1422
+ var css_248z$J = "@layer kol-theme-component {\n .toolbar {\n background-color: var(--color-white);\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n border-radius: 8px;\n padding: var(--spacing-s);\n }\n a,\n button {\n border-radius: 4px;\n text-decoration: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 4px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n margin: 0;\n padding: calc(12rem / var(--kolibri-root-font-size, 16));\n font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: 400;\n line-height: 1.2;\n }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-style: solid;\n outline-width: 2px;\n outline-offset: -4px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n a.primary > .kol-span-wc,\n button.primary > .kol-span-wc {\n color: #fff;\n background-color: #0e47cb;\n }\n a.primary:focus-visible > .kol-span-wc,\n button.primary:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n a.primary:hover > .kol-span-wc,\n button.primary:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n a.secondary > .kol-span-wc,\n button.secondary > .kol-span-wc {\n color: #0e47cb;\n background-color: #fff;\n padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border: 2px solid #0e47cb;\n }\n a.secondary:focus-visible > .kol-span-wc,\n button.secondary:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n a.secondary:hover > .kol-span-wc,\n button.secondary:hover > .kol-span-wc {\n color: #0e47cb;\n border-color: #0e47cb;\n }\n a.normal > .kol-span-wc,\n button.normal > .kol-span-wc {\n color: #171a22;\n background-color: #fc0;\n }\n a.normal:focus-visible > .kol-span-wc,\n button.normal:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n a.normal:hover > .kol-span-wc,\n button.normal:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n a.danger .kol-span-wc,\n button.danger .kol-span-wc {\n color: var(--color-white);\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.danger:hover .kol-span-wc,\n button.danger:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n a.ghost > .kol-span-wc,\n button.ghost > .kol-span-wc {\n color: #0e47cb;\n }\n a.ghost:focus-visible > .kol-span-wc,\n button.ghost:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n a.ghost:hover > .kol-span-wc,\n button.ghost:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
1424
1423
 
1425
1424
  var css_248z$I = "@layer kol-theme-component {\n .tree ul {\n display: flex;\n flex-direction: column;\n }\n}";
1426
1425
 
@@ -1501,23 +1500,23 @@ var css_248z$t = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,
1501
1500
 
1502
1501
  var css_248z$s = "@layer kol-theme-component {\n .kol-indented-text-wc > div {\n width: 100%;\n margin-left: calc(-4rem / var(--kolibri-root-font-size, 16));\n padding: 0.25em 0.5em;\n border-left: 4px solid var(--color-petrol);\n }\n}";
1503
1502
 
1504
- var css_248z$r = "@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-color: var(--default-border);\n border-style: solid;\n border-width: 2px;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n input:hover {\n border-color: var(--color-petrol);\n }\n /* NEU */\n .kol-input {\n display: grid;\n width: 100%;\n align-items: center;\n justify-items: left;\n }\n .kol-input.default {\n grid-template-columns: calc(12 * var(--spacing)) auto;\n }\n .default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(12 * var(--spacing));\n }\n .switch {\n grid-template-columns: calc(26 * var(--spacing)) auto;\n }\n .switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(26 * var(--spacing));\n }\n .button {\n gap: calc(8rem / var(--kolibri-root-font-size, 16)) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input > div.input {\n display: inline-flex;\n order: 1;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n .kol-input > label {\n padding-left: calc(4 * var(--spacing));\n order: 2;\n }\n .kol-input > .kol-alert-wc.error {\n padding-top: 0.25em;\n order: 3;\n grid-column: span 2/auto;\n }\n /* CHECKBOX */\n input[type=checkbox] {\n background-color: white;\n appearance: none;\n cursor: pointer;\n transition: 0.5s;\n }\n input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .default input[type=checkbox] {\n width: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n height: calc(12 * var(--spacing));\n }\n .default .icon {\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-weiss);\n }\n .switch input[type=checkbox] {\n display: block;\n position: relative;\n width: 3.2em;\n min-width: 3.2em;\n height: 1.7em;\n }\n .switch input[type=checkbox]:before {\n background-color: black;\n position: absolute;\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n width: 1.2em;\n height: 1.2em;\n /* border-radius: 0.25em; */\n -webkit-transition: 0.5s;\n -moz-transition: 0.5s;\n -ms-transition: 0.5s;\n transition: 0.5;\n }\n .switch input[type=checkbox]:checked:before {\n transform: translateX(1.5em);\n background-color: white;\n }\n .switch input[type=checkbox]:indeterminate:before {\n transform: translateX(0.75em);\n background-color: var(--color-petrol);\n }\n .switch:is(:not(.checked), .indeterminate) .icon {\n color: #fff;\n }\n .disabled {\n opacity: 0.33;\n }\n .kol-input span.hint {\n color: gray;\n display: block;\n padding: 0 var(--spacing);\n order: 3;\n grid-column: span 2;\n font-style: italic;\n }\n .button:focus-within {\n outline-color: var(--color-achat);\n outline-style: solid;\n outline-width: 3px;\n border-radius: 32px;\n outline-offset: 2px;\n }\n}";
1503
+ var css_248z$r = "@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n border-color: var(--default-border);\n border-style: solid;\n border-width: 2px;\n }\n .required label > span::after {\n padding-left: 0.125em;\n content: \"*\";\n }\n input:hover {\n border-color: var(--color-petrol);\n }\n /* NEU */\n .kol-input {\n display: grid;\n width: 100%;\n align-items: center;\n justify-items: left;\n }\n .kol-input.default {\n grid-template-columns: calc(12 * var(--spacing)) auto;\n }\n .default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(12 * var(--spacing));\n }\n .switch {\n grid-template-columns: calc(26 * var(--spacing)) auto;\n }\n .switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(26 * var(--spacing));\n }\n .button {\n gap: calc(8rem / var(--kolibri-root-font-size, 16)) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input > div.input {\n display: inline-flex;\n order: 1;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n .kol-input > label {\n padding-left: calc(4 * var(--spacing));\n order: 2;\n }\n .kol-input > .kol-alert-wc.error {\n padding-top: 0.25em;\n order: 3;\n grid-column: span 2/auto;\n }\n /* CHECKBOX */\n input[type=checkbox] {\n background-color: white;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: pointer;\n transition: 0.5s;\n }\n input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .default input[type=checkbox] {\n width: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n height: calc(12 * var(--spacing));\n }\n .default .icon {\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-weiss);\n }\n .switch input[type=checkbox] {\n display: block;\n position: relative;\n width: 3.2em;\n min-width: 3.2em;\n height: 1.7em;\n }\n .switch input[type=checkbox]:before {\n background-color: black;\n position: absolute;\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n width: 1.2em;\n height: 1.2em;\n /* border-radius: 0.25em; */\n transition: 0.5;\n }\n .switch input[type=checkbox]:checked:before {\n transform: translateX(1.5em);\n background-color: white;\n }\n .switch input[type=checkbox]:indeterminate:before {\n transform: translateX(0.75em);\n background-color: var(--color-petrol);\n }\n .switch:is(:not(.checked), .indeterminate) .icon {\n color: #fff;\n }\n .disabled {\n opacity: 0.33;\n }\n .kol-input span.hint {\n color: gray;\n display: block;\n padding: 0 var(--spacing);\n order: 3;\n grid-column: span 2;\n font-style: italic;\n }\n .button:focus-within {\n outline-color: var(--color-achat);\n outline-style: solid;\n outline-width: 3px;\n border-radius: 32px;\n outline-offset: 2px;\n }\n}";
1505
1504
 
1506
- var css_248z$q = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1505
+ var css_248z$q = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1507
1506
 
1508
- var css_248z$p = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1507
+ var css_248z$p = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1509
1508
 
1510
- var css_248z$o = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1509
+ var css_248z$o = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1511
1510
 
1512
- var css_248z$n = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1511
+ var css_248z$n = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1513
1512
 
1514
- var css_248z$m = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1513
+ var css_248z$m = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1515
1514
 
1516
- var css_248z$l = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1515
+ var css_248z$l = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1517
1516
 
1518
- var css_248z$k = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n label {\n font-weight: normal;\n }\n :host input:focus {\n outline-color: var(--color-achat);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--color-anthrazit);\n border-color: var(--default-border);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n /* padding: rem(10) rem(14); */\n }\n input:hover {\n border-color: var(--color-achat);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n order: 3;\n }\n .kol-required span::after {\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n border: 0;\n }\n fieldset .hint,\n fieldset .kol-input .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .hint {\n order: 4;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n }\n fieldset.horizontal {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: flex-start;\n }\n fieldset legend {\n display: block;\n width: 100%;\n line-height: 1.5;\n }\n .radio-input-wrapper,\n .input {\n display: flex;\n position: relative;\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n gap: 0.5em;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-label {\n display: flex;\n width: 100%;\n cursor: pointer;\n }\n .radio-label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n height: calc(12 * var(--spacing));\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n box-shadow: 0 0 1.6px black;\n }\n .radio-input-wrapper input[type=radio]:disabled {\n background-color: var(--color-input-bg-default);\n border-color: #999;\n cursor: not-allowed;\n }\n .kol-alert-wc {\n width: 100%;\n }\n}";
1517
+ var css_248z$k = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n label {\n font-weight: normal;\n }\n :host input:focus {\n outline-color: var(--color-achat);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--color-anthrazit);\n border-color: var(--default-border);\n border-style: solid;\n border-radius: 5px;\n width: 100%;\n border-width: 2px;\n /* padding: rem(10) rem(14); */\n }\n input:hover {\n border-color: var(--color-achat);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n order: 3;\n }\n .kol-required span::after {\n content: \"*\";\n }\n /* RADIO */\n fieldset {\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n border: 0;\n }\n fieldset .hint,\n fieldset .kol-input .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .hint {\n order: 4;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n }\n fieldset.horizontal {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: flex-start;\n }\n fieldset legend {\n display: block;\n width: 100%;\n line-height: 1.5;\n }\n .radio-input-wrapper,\n .input {\n display: flex;\n position: relative;\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n gap: 0.5em;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .radio-label {\n display: flex;\n width: 100%;\n cursor: pointer;\n }\n .radio-label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n border-radius: 100%;\n width: calc(12 * var(--spacing));\n min-width: calc(12 * var(--spacing));\n height: calc(12 * var(--spacing));\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: 0.5s;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n box-shadow: 0 0 1.6px black;\n }\n .radio-input-wrapper input[type=radio]:disabled {\n background-color: var(--color-input-bg-default);\n border-color: #999;\n cursor: not-allowed;\n }\n .kol-alert-wc {\n width: 100%;\n }\n}";
1519
1518
 
1520
- var css_248z$j = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1519
+ var css_248z$j = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n cursor: pointer;\n }\n input::-moz-placeholder {\n font-style: italic;\n }\n input::placeholder {\n font-style: italic;\n }\n input:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n input:not(.disabled, input:disabled):hover, input:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error input {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n}";
1521
1520
 
1522
1521
  var css_248z$i = "@layer kol-theme-component {\n button {\n background-color: transparent;\n }\n :is(a, button) > .kol-span-wc {\n border-style: solid;\n border-radius: var(--border-radius);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n transition-timing-function: ease-in-out;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n .primary:is(a, button) > .kol-span-wc,\n .primary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n .primary:is(a, button):hover > .kol-span-wc,\n .primary:is(a, button):focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n .secondary:is(a, button) > .kol-span-wc,\n .secondary:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-petrol);\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n .secondary:is(a, button):hover > .kol-span-wc,\n .secondary:is(a, button):focus > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n .normal:is(a, button) > .kol-span-wc,\n .normal:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-anthrazit);\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n .normal:is(a, button):hover > .kol-span-wc,\n .normal:is(a, button):focus > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n .danger:is(a, button) > .kol-span-wc,\n .danger:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-blut);\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n .danger:is(a, button):hover > .kol-span-wc,\n .danger:is(a, button):focus > .kol-span-wc {\n color: var(--color-weiss);\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n .ghost:is(a, button) > .kol-span-wc,\n .ghost:is(a, button):disabled:hover > .kol-span-wc {\n color: var(--color-anthrazit);\n background-color: var(--color-ghost);\n border-color: transparent;\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n .ghost:is(a, button):hover > .kol-span-wc,\n .ghost:is(a, button):focus > .kol-span-wc {\n color: var(--color-anthrazit);\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n }\n}";
1523
1522
 
@@ -1545,9 +1544,9 @@ var css_248z$7 = "@layer kol-theme-component {\n :host > div {\n overflow-x:
1545
1544
 
1546
1545
  var css_248z$6 = "@layer kol-theme-component {\n :host {\n display: flex;\n gap: 8px;\n flex-direction: column;\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-style: solid;\n outline-width: 3px;\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-width: 0 1px 1px 1px;\n border: 1px solid var(--color-petrol);\n border-collapse: collapse;\n border-spacing: 0;\n }\n tr {\n border-top: 1px solid var(--color-petrol);\n }\n th,\n td {\n border-right: 1px solid var(--color-petrol);\n }\n th:last-child,\n td:last-child {\n border-right-width: 0;\n }\n tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n th,\n td {\n padding: 0.25em 0.5em;\n }\n th {\n background-color: #eee;\n }\n .table-sort-button .button {\n font-weight: bold;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .input input[type=checkbox]:focus {\n outline-color: var(--color-petrol);\n outline-style: solid;\n outline-width: 3px;\n border-color: var(--color-petrol);\n outline-offset: 2px;\n }\n .input .icon {\n color: var(--color-weiss);\n }\n .input.indeterminate input {\n background-color: var(--color-weiss);\n }\n .input.indeterminate .icon {\n color: var(--color-petrol);\n }\n .input input[type=radio] {\n display: flex;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-achat);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-anthrazit);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n }\n .input input[type=radio]:focus {\n outline-style: solid;\n outline-width: 2px;\n border-color: var(--color-petrol);\n border-color: var(--color-anthrazit);\n outline-offset: 2px;\n }\n}";
1547
1546
 
1548
- var css_248z$5 = "@layer kol-theme-component {\n :host > div {\n display: block;\n width: 100%;\n }\n :host .tabs-button-group {\n background-color: var(--color-petrol);\n display: flex;\n }\n :host .tabs-button-group > div {\n display: inline-flex;\n }\n :host .tabs-button-group > div + div {\n margin-left: 0.25em;\n }\n .tabs-content {\n padding: 0.25em;\n border: 1px solid var(--border-color);\n }\n button {\n box-shadow: 0 0 0.25em gray;\n border-style: solid;\n display: grid;\n width: inherit;\n padding: calc(4 * var(--spacing));\n border-width: 2px;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n line-height: 1.25;\n cursor: pointer;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button-wc button.selected,\n .kol-button-wc[aria-selected=true] button {\n background-color: white;\n border-bottom-color: var(--color-citrin);\n border-bottom-width: 0.25em;\n border-bottom-style: solid;\n }\n button > .kol-span-wc span {\n display: flex;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n }\n button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n button.primary,\n button.primary:disabled:hover {\n color: white;\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\n }\n button.primary:hover,\n button.primary:focus {\n color: var(--kolibri-color-primary);\n }\n button.secondary,\n button.secondary:disabled:hover {\n color: white;\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\n }\n button.secondary:hover,\n button.secondary:focus {\n color: var(--kolibri-color-secondary);\n }\n button.normal,\n button.normal:disabled:hover {\n color: white;\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n button.normal:hover,\n button.normal:focus {\n color: var(--color-petrol);\n }\n button.danger,\n button.danger:disabled:hover {\n color: white;\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\n }\n button.danger:hover,\n button.danger:focus {\n color: var(--kolibri-color-danger);\n }\n button.ghost,\n button.ghost:disabled:hover {\n color: var(--kolibri-color-ghost);\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n }\n button.ghost:hover,\n button.ghost:focus {\n color: white;\n background-color: var(--kolibri-color-ghost);\n }\n button:hover,\n button:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n }\n button:active {\n box-shadow: none;\n outline: 0;\n }\n .close-button {\n width: 0;\n height: fit-content;\n font-size: 25%;\n }\n .close-button button {\n position: relative;\n top: 0.25em;\n left: -4.25em;\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 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 > 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}";
1547
+ var css_248z$5 = "@layer kol-theme-component {\n :host > div {\n display: block;\n width: 100%;\n }\n :host .tabs-button-group {\n background-color: var(--color-petrol);\n display: flex;\n }\n :host .tabs-button-group > div {\n display: inline-flex;\n }\n :host .tabs-button-group > div + div {\n margin-left: 0.25em;\n }\n .tabs-content {\n padding: 0.25em;\n border: 1px solid var(--border-color);\n }\n button {\n box-shadow: 0 0 0.25em gray;\n border-style: solid;\n display: grid;\n width: inherit;\n padding: calc(4 * var(--spacing));\n border-width: 2px;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n line-height: 1.25;\n cursor: pointer;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-button-wc button.selected,\n .kol-button-wc[aria-selected=true] button {\n background-color: white;\n border-bottom-color: var(--color-citrin);\n border-bottom-width: 0.25em;\n border-bottom-style: solid;\n }\n button > .kol-span-wc span {\n display: flex;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n }\n button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n button.primary,\n button.primary:disabled:hover {\n color: white;\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\n }\n button.primary:hover,\n button.primary:focus {\n color: var(--kolibri-color-primary);\n }\n button.secondary,\n button.secondary:disabled:hover {\n color: white;\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\n }\n button.secondary:hover,\n button.secondary:focus {\n color: var(--kolibri-color-secondary);\n }\n button.normal,\n button.normal:disabled:hover {\n color: white;\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n button.normal:hover,\n button.normal:focus {\n color: var(--color-petrol);\n }\n button.danger,\n button.danger:disabled:hover {\n color: white;\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\n }\n button.danger:hover,\n button.danger:focus {\n color: var(--kolibri-color-danger);\n }\n button.ghost,\n button.ghost:disabled:hover {\n color: var(--kolibri-color-ghost);\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n }\n button.ghost:hover,\n button.ghost:focus {\n color: white;\n background-color: var(--kolibri-color-ghost);\n }\n button:hover,\n button:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n }\n button:active {\n box-shadow: none;\n outline: 0;\n }\n .close-button {\n width: 0;\n height: -moz-fit-content;\n height: fit-content;\n font-size: 25%;\n }\n .close-button button {\n position: relative;\n top: 0.25em;\n left: -4.25em;\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 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 > 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}";
1549
1548
 
1550
- var css_248z$4 = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n }\n textarea::placeholder {\n font-style: italic;\n }\n textarea:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n textarea:not(.disabled, textarea:disabled):hover, textarea:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error textarea {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n textarea:read-only {\n background-color: var(--background-light-grey);\n border-color: var(--border-default);\n }\n}";
1549
+ var css_248z$4 = "@layer kol-theme-component {\n label {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n line-height: 1.25;\n color: var(--color-anthrazit);\n width: 100%;\n font-weight: 700;\n }\n}\n@layer kol-theme-component {\n .kol-alert-wc {\n display: block;\n margin-top: calc(2 * var(--spacing));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n}\n@layer kol-theme-component {\n :host {\n --kolibri-border-width: 1px;\n }\n :host .default {\n border-color: var(--color-anthrazit);\n }\n :host .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n :host .error {\n border-color: var(--color-rotton);\n }\n :host .error .heading-icon {\n background-color: var(--color-rotton);\n }\n :host .info {\n border-color: var(--color-petrol);\n }\n :host .info .heading-icon {\n background-color: var(--color-petrol);\n }\n :host .success {\n border-color: var(--color-gras);\n }\n :host .success .heading-icon {\n background-color: var(--color-gras);\n }\n :host .warning {\n border-color: var(--color-warn);\n }\n :host .warning .heading-icon {\n background-color: var(--color-warn);\n }\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n color: var(--default-letter);\n background-color: #e8edf2;\n border-color: var(--kolibri-color-normal);\n border-style: solid;\n border-radius: 0;\n border-width: 1px;\n width: 100%;\n }\n textarea::-moz-placeholder {\n font-style: italic;\n }\n textarea::placeholder {\n font-style: italic;\n }\n textarea:disabled {\n background-color: var(--color-input-bg-default);\n border-color: var(--border-color);\n cursor: not-allowed;\n }\n textarea:not(.disabled, textarea:disabled):hover, textarea:focus {\n outline-color: var(--primary);\n outline-style: solid;\n outline-width: 1px;\n border-color: var(--default-border-hover);\n outline-offset: 0;\n }\n .error textarea {\n background-color: var(--color-rotton-20);\n border-color: var(--color-rotton);\n }\n textarea:-moz-read-only {\n background-color: var(--background-light-grey);\n border-color: var(--border-default);\n }\n textarea:read-only {\n background-color: var(--background-light-grey);\n border-color: var(--border-default);\n }\n}";
1551
1550
 
1552
1551
  var css_248z$3 = "@layer kol-theme-component {\n .default {\n border-color: var(--color-anthrazit);\n }\n .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n .error {\n border-color: var(--color-rotton);\n }\n .error .heading-icon {\n background-color: var(--color-rotton);\n }\n .info {\n border-color: var(--color-petrol);\n }\n .info .heading-icon {\n background-color: var(--color-petrol);\n }\n .success {\n border-color: var(--color-gras);\n }\n .success .heading-icon {\n background-color: var(--color-gras);\n }\n .warning {\n border-color: var(--color-warn);\n }\n .warning .heading-icon {\n background-color: var(--color-warn);\n }\n}\n@layer kol-theme-component {\n :host {\n transform: translateX(-50%);\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n left: 50%;\n width: calc(750rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .heading {\n width: 100%;\n }\n .toast .heading .heading-content {\n flex: 1;\n }\n}";
1553
1552